Vue — Get Started

Create a project

npm create vue@latest my-app

Follow the prompts:

Project name: my-app
Add TypeScript? No
Add JSX Support? No
Add Vue Router? Yes
Add Pinia? Yes
Add Vitest? Yes
Add ESLint? Yes

Project structure

my-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── stores/
│   ├── views/
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
└── vite.config.js

Run the app

cd my-app
npm install
npm run dev

Open http://localhost:5173

Your first component

src/components/HelloWorld.vue:

<template>
  <div>
    <h1>{{ greeting }}</h1>
    <p>Count: {{ count }}</p>
    <button @click="count++">Add 1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello Vue!',
      count: 0
    }
  }
}
</script>

Using the component

App.vue:

<template>
  <HelloWorld />
</template>

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

export default {
  components: {
    HelloWorld
  }
}
</script>

Project files

• index.html - Entry HTML file
• src/main.js - Vue app initialization
• src/App.vue - Root component
• vite.config.js - Vite configuration

Build for production

npm run build
npm run preview

Mini Practice

1. Create a new Vue project
2. Add a new component
3. Pass data between components
4. Build and preview the production app

Up Next

Continue with Installation - Manual setup options.