<div v-if="role === 'admin'">
    <h2>Admin Dashboard</h2>
    <button>Manage Users</button>
</div>

<div v-else-if="role === 'editor'">
    <h2>Editor Panel</h2>
    <button>Write Article</button>
</div>

<div v-else>
    <h2>Welcome, Guest!</h2>
    <button>Sign Up</button>
</div>

<!-- Loop through an array -->
<ul>
    <li v-for="product in products" :key="product.id">
        {{ product.name }} — ₹{{ product.price }}
    </li>
</ul>

<!-- Loop with index -->
<div v-for="(item, index) in items" :key="item.id">
    {{ index + 1 }}. {{ item.name }}
</div>

<!-- Loop through an object -->
<div v-for="(value, key) in userProfile" :key="key">
    <strong>{{ key }}:</strong> {{ value }}
</div>

<input v-model="searchQuery" placeholder="Search..." />
<p>You typed: {{ searchQuery }}</p>

<!-- v-model on different form elements -->
<textarea v-model="message"></textarea>
<input type="checkbox" v-model="isAgreed" />
<input type="radio" v-model="selectedPlan" value="monthly" />
<select v-model="selectedCountry">
    <option value="IN">India</option>
    <option value="US">United States</option>
</select>

<!-- v-if removes/adds element from DOM -->
<div v-if="isLoading">Loading...</div>

<!-- v-show just toggles CSS display -->
<div v-show="isLoading">Loading...</div>

<!-- Use v-show when element toggles frequently -->
<!-- Use v-if when condition rarely changes -->

<!-- ProductCard.vue -->
<template>
    <div class="product-card" :class="{ 'out-of-stock': !product.inStock }">
        <img :src="product.image" :alt="product.name" />
        <h3>{{ product.name }}</h3>
        <p class="price">₹{{ product.price.toLocaleString() }}</p>
        <span v-if="product.inStock" class="badge green">In Stock</span>
        <span v-else class="badge red">Out of Stock</span>
        <button
            @click="addToCart"
            :disabled="!product.inStock || isAdding"
        >
            {{ isAdding ? "Adding..." : "Add to Cart" }}
        </button>
    </div>
</template>

<script setup>
import { ref } from "vue";

// Props — data passed from parent
const props = defineProps({
    product: {
        type: Object,
        required: true
    }
});

// Emits — events sent to parent
const emit = defineEmits(["add-to-cart"]);

const isAdding = ref(false);

async function addToCart() {
    isAdding.value = true;
    await new Promise(resolve => setTimeout(resolve, 800));
    emit("add-to-cart", props.product);
    isAdding.value = false;
}
</script>

<style scoped>
/* scoped — styles only apply to this component */
.product-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    transition: box-shadow 0.2s;
}

.product-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.out-of-stock {
    opacity: 0.6;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.green { background: #e6f4ea; color: #2e7d32; }
.red { background: #fce8e6; color: #c62828; }
</style>

<!-- App.vue -->
<template>
    <div class="product-grid">
        <ProductCard
            v-for="product in products"
            :key="product.id"
            :product="product"
            @add-to-cart="handleAddToCart"
        />
    </div>
</template>

<script setup>
import { ref } from "vue";
import ProductCard from "./components/ProductCard.vue";

const products = ref([
    { id: 1, name: "Laptop", price: 75000, inStock: true, image: "/laptop.jpg" },
    { id: 2, name: "Mouse", price: 1200, inStock: true, image: "/mouse.jpg" },
    { id: 3, name: "Monitor", price: 22000, inStock: false, image: "/monitor.jpg" }
]);

function handleAddToCart(product) {
    console.log("Added to cart:", product.name);
}
</script>

<script setup>
import { ref, computed } from "vue";

const firstName = ref("Rahul");
const lastName = ref("Sharma");
const cartItems = ref([
    { name: "Laptop", price: 75000, quantity: 1 },
    { name: "Mouse", price: 1200, quantity: 2 },
    { name: "Keyboard", price: 3500, quantity: 1 }
]);

// Computed property — recalculates when firstName or lastName changes
const fullName = computed(() => `${firstName.value} ${lastName.value}`);

// Computed for cart total
const cartTotal = computed(() => {
    return cartItems.value.reduce(
        (total, item) => total + (item.price * item.quantity),
        0
    );
});

const cartItemCount = computed(() => {
    return cartItems.value.reduce((count, item) => count + item.quantity, 0);
});
</script>

<template>
    <p>Hello, {{ fullName }}!</p>
    <p>Items in cart: {{ cartItemCount }}</p>
    <p>Total: ₹{{ cartTotal.toLocaleString() }}</p>
</template>

import { ref, watch, watchEffect } from "vue";

const searchQuery = ref("");
const results = ref([]);
const isLoading = ref(false);

// Watch a specific value
watch(searchQuery, async (newQuery, oldQuery) => {
    if (newQuery.length < 3) {
        results.value = [];
        return;
    }

    isLoading.value = true;
    results.value = await fetchSearchResults(newQuery);
    isLoading.value = false;
}, { debounce: 300 }); // Optional: debounce

// watchEffect — automatically tracks dependencies
watchEffect(() => {
    console.log(`Search query changed to: ${searchQuery.value}`);
    document.title = searchQuery.value
        ? `Search: ${searchQuery.value}`
        : "My App";
});

<script>
export default {
    name: "Counter",
    data() {
        return {
            count: 0,
            message: "Hello Vue!"
        };
    },
    computed: {
        doubleCount() {
            return this.count * 2;
        }
    },
    methods: {
        increment() {
            this.count++;
        },
        reset() {
            this.count = 0;
        }
    },
    mounted() {
        console.log("Component mounted!");
    }
};
</script>

<script setup>
import { ref, computed, onMounted } from "vue";

const count = ref(0);
const message = ref("Hello Vue!");

const doubleCount = computed(() => count.value * 2);

function increment() {
    count.value++;
}

function reset() {
    count.value = 0;
}

onMounted(() => {
    console.log("Component mounted!");
});
</script>

npm install vue-router

// router/index.js
import { createRouter, createWebHistory } from "vue-router";
import HomePage from "@/views/HomePage.vue";
import AboutPage from "@/views/AboutPage.vue";
import ProductsPage from "@/views/ProductsPage.vue";
import ProductDetail from "@/views/ProductDetail.vue";
import NotFound from "@/views/NotFound.vue";

const routes = [
    { path: "/", component: HomePage },
    { path: "/about", component: AboutPage },
    { path: "/products", component: ProductsPage },
    { path: "/products/:id", component: ProductDetail },    // Dynamic route
    { path: "/:pathMatch(.*)*", component: NotFound }       // 404 catch-all
];

const router = createRouter({
    history: createWebHistory(),
    routes
});

export default router;

<template>
    <nav>
        <!-- RouterLink generates <a> tags with proper navigation -->
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
        <RouterLink to="/products">Products</RouterLink>
    </nav>

    <!-- Where matched components render -->
    <RouterView />
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";

const router = useRouter(); // For programmatic navigation
const route = useRoute();   // For reading current route info

// Read route params
console.log(route.params.id);    // For /products/:id
console.log(route.query.search); // For ?search=laptop

// Programmatic navigation
function goToProduct(id) {
    router.push(`/products/${id}`);
}
</script>

// Protect routes that require authentication
router.beforeEach((to, from, next) => {
    const isAuthenticated = localStorage.getItem("token");

    if (to.meta.requiresAuth && !isAuthenticated) {
        next("/login"); // Redirect to login
    } else {
        next(); // Allow navigation
    }
});

npm install pinia

// stores/cartStore.js
import { defineStore } from "pinia";
import { ref, computed } from "vue";

export const useCartStore = defineStore("cart", () => {
    // State
    const items = ref([]);

    // Getters (computed)
    const itemCount = computed(() =>
        items.value.reduce((count, item) => count + item.quantity, 0)
    );

    const totalPrice = computed(() =>
        items.value.reduce(
            (total, item) => total + item.price * item.quantity,
            0
        )
    );

    // Actions
    function addItem(product) {
        const existing = items.value.find(i => i.id === product.id);
        if (existing) {
            existing.quantity++;
        } else {
            items.value.push({ ...product, quantity: 1 });
        }
    }

    function removeItem(productId) {
        items.value = items.value.filter(i => i.id !== productId);
    }

    function clearCart() {
        items.value = [];
    }

    return { items, itemCount, totalPrice, addItem, removeItem, clearCart };
});

<script setup>
import { useCartStore } from "@/stores/cartStore";

const cart = useCartStore();
</script>

<template>
    <div class="cart-icon">
        🛒 {{ cart.itemCount }} items — ₹{{ cart.totalPrice.toLocaleString() }}
    </div>

    <button @click="cart.addItem(product)">Add to Cart</button>
</template>

npx nuxi@latest init my-nuxt-app

npm create vue@latest my-project
# Creates a Vue.js 3 + Vite project

# Create a new Vue.js project (recommended way in 2026)
npm create vue@latest my-vue-app

# Options you will be asked:
# Add TypeScript? Yes (recommended)
# Add JSX support? No
# Add Vue Router? Yes
# Add Pinia? Yes
# Add Vitest? Yes (for testing)
# Add ESLint? Yes

# Navigate to project
cd my-vue-app

# Install dependencies
npm install

# Start development server
npm run dev
# App running at http://localhost:5173