Setting Up a Vue Project

Scaffolding with create-vue

The official way to start a project is create-vue, run with npm create vue@latest. It asks which features to include (TypeScript, Vue Router, Pinia, Vitest, ESLint and others) and generates a project built on Vite, which gives a fast dev server with hot module replacement and an optimised production build. The entry file creates the app with createApp(App), registers plugins with app.use(...) and mounts it onto an element in index.html. The prompts and generated files change between releases, so check the docs for your version.

Create, run and mount

Commands and the main entry file.

// terminal
// npm create vue@latest
// cd my-app && npm install
// npm run dev        -> start the Vite dev server
// npm run build      -> production build in dist/

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
// app.use(router)   // plugins are registered before mounting
app.mount('#app')   // matches <div id="app"></div> in index.html

Install the editor tooling

Use the official Vue extension for your editor (Vue - Official for VS Code) to get syntax highlighting, type checking and autocompletion inside .vue files.

Quick check: Which command scaffolds an official Vite-based Vue project?

• npm create vue@latest
• npm install vue-starter --global
• vue new project
• npx create-react-app --vue