How to create a vue.js app in Visual Studio Code

Question

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.

npm init vue@latest, cd <your-project-name>, npm install and npm run dev is not working well for you? — kissu
– kissu, Commented Dec 30, 2022 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
– quilkin, Commented Dec 30, 2022 at 20:50
Where do you even have CORS issues from? The given snippet is not doing any API calls. — kissu
– kissu, Commented Dec 30, 2022 at 23:00
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
– quilkin, Commented Dec 31, 2022 at 14:09

kissu · Accepted Answer · 2022-12-30 21:39:57Z

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.

answered Dec 30, 2022 at 21:39

kissu

47.3k16 gold badges94 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

quilkin Over a year ago

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.

kissu Over a year ago

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.

Collectives™ on Stack Overflow

How to create a vue.js app in Visual Studio Code

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related