Creating a Vue App with Vite

The recommended way to start a new Vue 3 project is with Vite, a lightning-fast build tool that replaces the older Vue CLI. Vite leverages native ES modules in development for near-instant hot module replacement, and it produces highly optimised production bundles via Rollup. Running `npm create vue@latest` launches the official scaffolding tool (create-vue). It prompts you to opt into TypeScript, JSX, Vue Router, Pinia, Vitest, and ESLint, generating a ready-to-run project structure with sensible defaults. All you need afterwards is `npm install && npm run dev`. The generated project separates concerns cleanly: `src/main.ts` bootstraps the app, `src/App.vue` is the root component, and `src/components/` holds reusable pieces. Single-File Components (SFCs) with the `.vue` extension co-locate template, script, and styles in one file, keeping each component self-contained and easy to reason about.

Example

// src/main.ts — app entry point generated by create-vue
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import router from './router';
import App from './App.vue';
import './assets/main.css';

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.mount('#app');

// src/App.vue (abridged)
// <template>
//   <RouterView />
// </template>
//
// <script setup lang="ts">
// import { RouterView } from 'vue-router';
// </script>

// Useful npm scripts in package.json:
// "dev"    : "vite"              — start dev server
// "build"  : "vite build"        — production bundle
// "preview": "vite preview"      — preview prod build
// "test"   : "vitest"            — run unit tests

HTML

Full Editor

Related Resources

Vue.js Reference

Complete tag & property list

Vue.js How-To Guides

Step-by-step practical guides

Vue.js Exercises

Practice what you've learned