Skip to content
Vue.js

How to Setup a Vue Project

Try Vue Online

  • To quickly get a taste of Vue, you can try it directly in our ► Playground.

  • If you prefer a plain HTML setup without any build steps, you can use this JSFiddle as your starting point.

  • If you are already familiar with Node.js and the concept of build tools, you can also try a complete build setup right within your browser on StackBlitz.

Installation

Section titled “Installation”

Prerequisites

  • Familiarity with the command line
  • Install Node.js version 18.3 or higher

In this section, you will learn how to create a Vue Single Page Application on your local machine. The created project will be using a build setup based on Vite, which will allow us to use Vue Single-File Components (SFCs).

  1. Create a new project using create-vue by running one of these commands:

    Terminal window
    npm create vue@latest

    This command will install and execute create-vue, the official Vue project scaffolding tool.

  2. Answer the prompts for optional features such as TypeScript and testing support:

    Terminal window
    ✔ Project name: … <your-project-name>
    ✔ Add TypeScript? … No / Yes
    ✔ Add JSX Support? … No / Yes
    ✔ Add Vue Router for Single Page Application development? … No / Yes
    ✔ Add Pinia for state management? … No / Yes
    ✔ Add Vitest for Unit testing? … No / Yes
    ✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
    ✔ Add ESLint for code quality? … No / Yes
    ✔ Add Prettier for code formatting? … No / Yes
    ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes
    

    Scaffolding project in ./<your-project-name>...
    Done.

  3. Once the project is created, follow the instructions to install dependencies and start the dev server:

    Terminal window
    cd <your-project-name>
    npm install
    npm run dev

You should now have your first Vue project running! Note that the example components in the generated project are written using the Composition API and <script setup>, rather than the Options API. Here are some additional tips:

Production Deployment

Section titled “Production Deployment”

When you are ready to ship your app to production, run the following:

Terminal window
   npm run build

This will create a production-ready build of your app in the project’s ./dist directory. Check out the Production Deployment Guide to learn more about shipping your app to production.

Next Steps

Using Vue from CDN​

Section titled “Using Vue from CDN​”

You can use Vue directly from a CDN via a script tag:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Unpkg is used here, but you can also use any CDN that serves npm packages, for example jsdelivr or cdnjs. Also, you can download this file and serve it yourself.

Using the Global Build​

Section titled “Using the Global Build​”

The above link loads the global build of Vue, where all top-level APIs are exposed as properties on the global Vue object. Here is a full example using the global build:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>


<div id="app">{{ message }}</div>


<script>
const { createApp, ref } = Vue;


createApp({
 setup() {
   const message = ref("Hello vue!");
   return {
     message,
   };
 },
}).mount("#app");
</script>

Using the ES Module Build​

Section titled “Using the ES Module Build​”

Throughout the rest of the documentation, we will be primarily using ES modules syntax. Most modern browsers now support ES modules natively, so we can use Vue from a CDN via native ES modules like this:

<div id="app">{{ message }}</div>


<script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'


createApp({
  setup() {
    const message = ref('Hello Vue!')
    return {
      message
    }
  }
}).mount('#app')
</script>

Enabling Import maps

Section titled “Enabling Import maps”

In the above example, you are importing from the full CDN URL, but in the rest of the documentation you will see code like this:

import { createApp } from "vue";

you can tell the browser where to locate the vue import by using Import Maps:

<script type="importmap">
{
 "imports": {
   "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
 }
}
</script>
<div id="app">{{ message }}</div>
<script type="module">
import { createApp, ref } from "vue";
createApp({
 setup() {
   const message = ref("Hello Vue!");
   return {
     message,
   };
 },
}).mount("#app");
</script>

CodePen Demo

You can also add entries for other dependencies to the import map - but make sure they point to the ES modules version of the library you intend to use.

Splitting Up the Modules​

Section titled “Splitting Up the Modules​”

As you dive deeper into the guide, its best to split our code into separate JavaScript files so that they are easier to manage. For example:

  1. Add the following into index.html
    index.html
    <div id="app"></div>
    

    <script type="module">
      import { createApp } from "vue";
      import MyComponent from "./my-component.js";
    

      createApp(MyComponent).mount("#app");
    </script>
  2. Add the following into my-component.js
    my-component.js
    import { ref } from "vue";
    export default {
      setup() {
        const count = ref(0);
        return { count };
      },
      template: `<div>Count is: {{ count }}</div>`,
    };

If you directly open the above index.html in your browser, you will find that it throws an error because ES modules cannot work over the file:// protocol, which is the protocol the browser uses when you open a local file.

Due to security reasons, ES modules can only work over the http:// protocol, which is what the browsers use when opening pages on the web. In order for ES modules to work on our local machine, we need to serve the index.html over the http:// protocol, with a local HTTP server.

To start a local HTTP server, first make sure you have Node.js installed, then run npx serve from the command line in the same directory where your HTML file is. You can also use any other HTTP server that can serve static files with the correct MIME types.

You may have noticed that the imported component’s template is inlined as a JavaScript string. If you are using VS Code, you can install the es6-string-html extension and prefix the strings with a /*html*/ comment to get syntax highlighting for them.

Next Steps​

Section titled “Next Steps​”

If you skipped the Introduction, we strongly recommend reading it before moving on to the rest of the documentation.

Continue with the Guide The guide walks you through every aspect of the framework in full detail, with interactive examples.
Tutorials For those who prefer to learning by practicals.
Examples Explore examples of core featuresand common UI tasks