# Setting Up a Vue Project — Vue.js

Source: https://www.skillbyai.com/en/vue/f-setup

> create-vue, Vite and the app entry point.

## 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.

```javascript
// 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.

**Quiz:** Which command scaffolds an official Vite-based Vue project?

- [x] npm create vue@latest
- [ ] npm install vue-starter --global
- [ ] vue new project
- [ ] npx create-react-app --vue

*Answer:* npm create vue@latest. create-vue is the official scaffolding tool.