1. Creating an app and Single-File Components

npm create vue@latest shop        # choose TypeScript, Router, Pinia, Vitest, ESLint
cd shop && npm install && npm run dev

<!-- src/components/OrderCard.vue -->
<script setup lang="ts">
import { computed } from "vue";

const props = defineProps<{ order: { id: number; customer: string; total: number; status: string } }>();
const emit = defineEmits<{ select: [id: number] }>();
const isBig = computed(() => props.order.total > 10000);
</script>

<template>
  <div class="card" :class="{ big: isBig, paid: order.status === 'paid' }" @click="emit('select', order.id)">
    <h3>#{{ order.id }} — {{ order.customer }}</h3>
    <p>{{ order.total.toLocaleString("en-IN", { style: "currency", currency: "INR" }) }}</p>
  </div>
</template>

<style scoped>
.card { padding: 1rem; border: 1px solid #ddd; }
.big { border-color: gold; }
</style>

// src/main.ts
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";
import router from "./router";

createApp(App).use(createPinia()).use(router).mount("#app");