Setting Up a Vue Project with Vite

The recommended way to start a new Vue 3 project is with Vite — an extremely fast build tool that serves files using native ES modules in development.

Create a New Project

npm create vue@latest my-app
# Prompts: TypeScript? JSX? Vue Router? Pinia? Vitest? ESLint?
cd my-app
npm install
npm run dev

Project Structure

my-app/
├── public/            # static assets
├── src/
│   ├── assets/        # processed by Vite (images, css)
│   ├── components/    # reusable Vue components
│   ├── views/         # page-level components (with Vue Router)
│   ├── App.vue        # root component
│   └── main.js        # app entry point
├── index.html         # Vite entry HTML
└── vite.config.js

main.js

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

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

Useful Scripts

npm run dev      # start dev server with HMR
npm run build    # production build to dist/
npm run preview  # preview production build locally