Create a Vue App with Vite

Vite is the recommended tool for Vue 3 — fast hot module replacement and optimized production builds.

  npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

Open http://localhost:5173 in your browser.

TypeScript Template 

  npm create vite@latest my-vue-app -- --template vue-ts

Project Structure 

  my-vue-app/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── App.vue            # Root component
│   ├── main.js            # Entry point
│   └── style.css          # Global styles
├── index.html             # HTML shell
├── package.json
└── vite.config.js

Entry Point

src/main.js:

  import { createApp } from 'vue';
import App from './App.vue';
import './style.css';

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

index.html:

  <div id="app"></div>
<script type="module" src="/src/main.js"></script>

Root Component

src/App.vue:

  <script setup>
import HelloWorld from './components/HelloWorld.vue';
</script>

<template>
  <div class="app">
    <h1>Hello, Vue!</h1>
    <HelloWorld msg="Welcome to JS Code Camp" />
  </div>
</template>

<style scoped>
.app {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
}
</style>

Single-File Components (SFCs)

Each .vue file has three optional sections:

  <script setup>
// JavaScript logic (Composition API)
</script>

<template>
  <!-- HTML template -->
</template>

<style scoped>
/* Component-scoped CSS */
</style>

npm Scripts 

  {
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}
  
  npm run dev      # Development server with hot reload
npm run build    # Production build → dist/
npm run preview  # Preview production build locally

Folder Organization (Growing Apps) 

  src/
├── components/     # Reusable UI components
├── views/          # Route-level page components
├── composables/    # Shared Composition API logic
├── stores/         # Pinia stores
├── router/         # Vue Router configuration
├── services/       # API calls
└── assets/         # Images, fonts

You’re ready to learn template syntax and directives in the next chapter.