0

Just starting with vue.js. I am using Visual Studio Code, and have followed all the instructions for using VS Code with the Volar extension. I can see from the source files that the sample project includes a 'hello world' page (HelloWorld.vue). But when I run index.html I just get a blank screen , because of a CORS error (see below).

I haven't changed any code from the installed sample, so it appears that the vuejs.org instructions are not complete.

index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app">
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

and main.js:

import { createApp } from 'vue'
import App from './App.vue'

import './assets/main.css'

createApp(App).mount('#app')

So what do I need to do to make use of the example .vue components? The Chrome console shows a CORS problem:

Access to script at 'file:///C:/Users/quilk/Documents/testvue/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

quilkin
  • 874
  • 11
  • 31
  • `npm init vue@latest`, `cd `, `npm install` and `npm run dev` is not working well for you? – kissu Dec 30 '22 at 20:30
  • All those installs worked fine. I have now discovered it's a CORS problem. Will post solution when I have found it. – quilkin Dec 30 '22 at 20:50
  • Where do you even have CORS issues from? The given snippet is not doing any API calls. – kissu Dec 30 '22 at 23:00
  • Check your extensions too maybe. – kissu Dec 30 '22 at 23:19
  • I have added more info about the CORS issue. HTTP file cannot load JS file. – quilkin Dec 31 '22 at 10:13
  • No reason that you get a CORS issue with the `main.js` file. Check what you have in your `App.vue`. Otherwise, create a new app, run the server with `dev` and make sure that you're trying in a Private Window in your browser. – kissu Dec 31 '22 at 11:32
  • As I said, all files were created by the 'official steps'. Sorry, but I don't undestand 'run the server with dev', The browser opens automatically when I start debugging so how do I open it in private mode? Thanks for your persistence in trying to help, but I'm considering giving up trying to learn Vue and switch to React instead, maybe it's more established and tested. – quilkin Dec 31 '22 at 11:42
  • Tried to run `npm run dev`? Then open the URL inside of a private window (by copy-pasting the whole thing). You don't need to debug anything so far (especially NOT run a server from VScode, like Live Server). Vue is as well established and tested as React, here you're facing CLI issues for some reason. More of a generic knowledge than a framework thing so far. You can try React, but you will mainly face the same issues creating a brand-new project. Also, considering which one to pick based on that is quite extreme IMO. – kissu Dec 31 '22 at 11:46
  • 1
    Thanks, I started again from scratch and it is now working, and I've successfully added some new vue components to the demo. I must have missed a step last time. – quilkin Dec 31 '22 at 14:09

1 Answers1

2

To have an easy and simple time working with Vue, I recommend following the official steps:

  • npm init vue@latest
  • cd <your-project-name>
  • npm install
  • npm run dev

For CORS, you need to fix it on your backend/service dashboard. More details are available here.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • yes, I already said in my question that I had followed the instructions. The app builds fine. just won't run properly. I don't have a 'backend/service dashboard'. I have tried the Chrome extensions to disable CORS, mentioned in your link, but I am still getting the CORS error. – quilkin Dec 30 '22 at 22:52
  • I'm saying that because you should not have a `But when I run index.html I just get a blank screen` out of this setup. – kissu Dec 30 '22 at 22:53