Get Started

# ===== 1. Create the project =====
npm create vue@latest my-app
cd my-app
npm install
npm run dev
# Open http://localhost:5173

# Walks you through choices: TypeScript, Router, Pinia, Vitest, ESLint, Prettier. Take them.

# ===== 2. The structure =====
# src/App.vue          root SFC
# src/main.ts          entry; creates the app
# src/components/      reusable components
# src/router/index.ts  vue-router config
# src/stores/          pinia stores

# ===== 3. A first component =====
<!-- src/components/Counter.vue -->
<script setup lang="ts">
import { ref, computed } from 'vue';
const props = defineProps<{ start?: number }>();
const count = ref(props.start ?? 0);
const doubled = computed(() => count.value * 2);
</script>

<template>
  <button @click="count++">clicks: {{ count }} (x2 = {{ doubled }})</button>
</template>

<style scoped>
button { padding: 0.5rem 1rem; }
</style>

# ===== 4. Use it =====
<!-- src/App.vue -->
<script setup lang="ts">
import Counter from './components/Counter.vue';
</script>
<template>
  <main>
    <h1>Vue + Vite</h1>
    <Counter :start="5" />
  </main>
</template>

# ===== 5. Routing =====
# Already wired by create-vue. Add pages in src/views and edit src/router/index.ts:
import HomeView from '@/views/HomeView.vue';
const routes = [{ path: '/', component: HomeView }];

# ===== 6. State (Pinia) =====
# src/stores/counter.ts
import { defineStore } from 'pinia';
import { ref } from 'vue';
export const useCounter = defineStore('counter', () => {
  const n = ref(0);
  const inc = () => n.value++;
  return { n, inc };
});

# ===== 7. Build for production =====
npm run build
# Output in dist/; static assets, deploy anywhere.

# ===== Patterns to internalise =====
# - <script setup> + composition API for new code
# - TS from day one
# - Pinia for shared state; useThing() composables for reusable logic
# - One UI kit (PrimeVue, Vuetify, Element Plus, Naive UI) per app

# ===== Pitfalls =====
# - Mixing Options API + Composition API patterns inconsistently
# - Destructuring reactive() — loses reactivity (use toRefs)
# - Long Watch chains that hide intent — use computed or composables
# - Skipping defineProps types; lose IDE help

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