↑

Introduction to Vue.js

  1. What Is Vue.js?



  2. How Vue Works

    3. <div id="app">
    {{ message }}
</div>

<script>
const app = Vue.createApp({
    data() {
        return {
            message: "Hello Vue!"
        }
    }
});
app.mount("#app");
</script>


  3. Getting Started (CDN Method)

    4. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>


  4. Core Concepts of Vue

    1. Templates & Data Binding

      2. <div id="app">
    <h1>{{ title }}</h1>
    <p>Counter: {{ count }}</p>
</div>

      data() {
    return {
        title: "Welcome",
        count: 0
    }
}


    2. Event Handling

      3. <button @click="count++">Increase</button>


    3. Two-Way Binding with v-model

      4. <input v-model="name">
<p>Hello {{ name }}</p>


    4. Conditionals and Loops
      5. <p v-if="loggedIn">Welcome back!</p>
<p v-else>Please log in.</p>

<ul>
    <li v-for="item in items">{{ item }}</li>
</ul>


    5. Computed Properties

      6. computed: {
    reversed() {
        return this.message.split("").reverse().join("");
    }
}


    6. Methods
      7. methods: {
    greet() {
        return "Hello " + this.name;
    }
}


  5. Single File Components (SFC)

    6. <!-- MyComponent.vue -->
<template>
    <h1>{{ title }}</h1>
</template>

<script>
export default {
    data() {
        return { title: "Hello SFC" }
    }
}
</script>

<style>
h1 { color: blue; }
</style>


  6. Vue Tooling: Vite & Vue CLI

    7. npm create vue@latest
cd myproject
npm install
npm run dev


  7. Ecosystem Overview

    8. Tool Purpose
    Vue Router Navigation for SPA apps
    Pinia State management
    Vite Development & build tool
    DevTools Chrome/Firefox debugging extension


  8. Why Vue Is Great for Beginners



  9. Summary

    10. Concept Description
    Reactivity UI updates automatically when data changes
    Declarative templates Use {{ }} to display data easily
    Directives v-if, v-for, v-model, v-on
    Components Reusable UI blocks, .vue files
    Tooling Vite, Vue Router, Pinia


Vue Options API vs Composition API (Introduction & Comparison)

  1. Introduction



  2. Options API (Traditional Vue Style)

    3. export default {
    data() {
        return { count: 0 }
    },
    methods: {
        increment() {
            this.count++
        }
    },
    computed: {
        double() {
            return this.count * 2
        }
    }
}


  3. Composition API (Modern Vue Style)

    4. import { ref, computed } from "vue"

export default {
    setup() {
        const count = ref(0)
        const increment = () => count.value++
        const double = computed(() => count.value * 2)

        return { count, increment, double }
    }
}


  4. Key Differences

    5. Aspect Options API Composition API
    Code organization Grouped by option (data, methods, computed) Grouped by logic and feature
    Learning curve Easier for beginners Requires understanding of JS functions and reactivity
    Reactivity Implicit (this.count++) Explicit (ref, reactive, value)
    Logic reuse Mixins (old, limited) Composable functions (modern, powerful)
    Scaling to large apps More difficult Much easier
    TypeScript support Limited Excellent
    IDE autocompletion Less precise (due to this) Very precise (explicit types & refs)
    Recommended for Vue 3? Still supported & fine Yes, the future direction


  5. When to Use Which?



  6. Example Comparison (Same Component in Both APIs)

    7. Options API Composition API 
    export default {
    data() {
        return { count: 0 }
    },
    methods: {
        increment() {
            this.count++
        }
    }
}

    import { ref } from "vue"

export default {
    setup() {
        const count = ref(0)
        const increment = () => count.value++
        return { count, increment }
    }
}


  7. Summary

    8. Feature Options API Composition API
    Ease of use Very easy Medium
    Flexibility Limited Very high
    Logic organization Separated by option Grouped by feature
    Preferred for new Vue 3 apps? Okay Yes
    TypeScript Not ideal Excellent


Introduction to the Vue 3 Composition API (Thorough & Beginner-Friendly)

  1. Short Intro



  2. The Setup Function

    3. export default {
    setup() {
        return {
            // expose things to the template
        }
    }
}


  3. Creating Reactive State with ref()

    4. import { ref } from "vue"

export default {
    setup() {
        const count = ref(0)

        function increment() {
            count.value++
        }

        return { count, increment }
    }
}


  4. Reactive Objects with reactive()

    5. import { reactive } from "vue"

export default {
    setup() {
        const state = reactive({
            name: "Hwangfu",
            age: 22
        })

        return { state }
    }
}


  5. Computed Properties

    6. import { ref, computed } from "vue"

export default {
    setup() {
        const count = ref(5)
        const double = computed(() => count.value * 2)

        return { count, double }
    }
}


  6. Watchers

    7. import { ref, watch } from "vue"

export default {
    setup() {
        const name = ref("")

        watch(name, (newVal, oldVal) => {
            console.log("Changed from", oldVal, "to", newVal)
        })

        return { name }
    }
}


  7. watchEffect() (Automatic Tracking)

    8. import { ref, watchEffect } from "vue"

export default {
    setup() {
        const x = ref(1)

        watchEffect(() => {
            console.log("x is", x.value)
        })

        return { x }
    }
}


  8. Methods in Composition API

    9. setup() {
    const count = ref(0)

    function increment() {
        count.value++
    }

    return { count, increment }
}


  9. Lifecycles in Composition API

    10. import { onMounted, onUnmounted } from "vue"

export default {
    setup() {
        onMounted(() => {
            console.log("Component mounted")
        })

        onUnmounted(() => {
            console.log("Component removed")
        })
    }
}


  10. Props in Composition API

    11. export default {
    props: {
        msg: String;
    },

    setup(props) {
        console.log(props.msg);
        return { };
    }
}


  11. Emitting Events

    12. export default {
    emits: ["update"],

    setup(props, { emit }) {
        function updateValue() {
            emit("update", 42)
        }

        return { updateValue }
    }
}


  12. Extracting Logic Into Composables

    13. // useCounter.js
import { ref } from "vue"

export function useCounter() {
    const count = ref(0)
    const increment = () => count.value++
    return { count, increment }
}

    // Component.vue
import { useCounter } from "./useCounter"

export default {
    setup() {
        const { count, increment } = useCounter()
        return { count, increment }
    }
}


  13. Why the Composition API Is Powerful



  14. Options API vs Composition API Summary

    15. Feature Options API Composition API
    Organization By option type (data, methods, etc.) By logic/functionality
    Reactivity Implicit this Explicit ref, reactive
    Logic reuse mixins composables
    TypeScript not ideal excellent
    Best for small/simple components medium/large apps, reusable logic


What Is a Reactive Value in Vue?

  1. Introduction



  2. Why Reactivity Matters

    3. let count = 0
document.getElementById("counter").innerText = count
count++
document.getElementById("counter").innerText = count

    const count = ref(0)
count.value++  // UI updates automatically


  3. ref(): Reactive Primitive Values

    4. import { ref } from "vue"

const count = ref(0)
console.log(count.value)  // 0

count.value++
console.log(count.value)  // 1


  4. reactive(): Reactive Objects (Deep Reactivity)

    5. import { reactive } from "vue"

const user = reactive({
    name: "Hwangfu",
    age: 22
})

user.age++  // automatically updates UI



  5. How Vue Detects Changes (The Proxy System)



  6. Reactive Values in Templates

    7. <template>
    <button @click="count++">{{ count }}</button>
</template>



  7. Computed Properties Are Also Reactive

    8. import { ref, computed } from "vue"

const count = ref(5)
const double = computed(() => count.value * 2)

console.log(double.value) // 10
count.value++
console.log(double.value) // 12


  8. Watchers React to Changes

    9. watch(count, (newVal, oldVal) => {
    console.log("Count changed:", oldVal, "->", newVal)
})


  9. How Reactivity Differs from Plain JavaScript

    10. Plain JavaScript Vue Reactive Value
    Variables don't update UI automatically UI updates instantly when reactive value changes
    No dependency tracking Automatic dependency tracking
    Manual DOM updates needed DOM updates handled by Vue


  10. ref vs reactive (Quick Comparison)

    11. Feature ref() reactive()
    Main use-case single primitive objects, arrays, maps
    Access value property direct property access
    Deep reactivity No (wrapping only) Yes
    Template auto-unwrapping Yes Yes


  11. When Should You Use ref()?

    12. const isVisible = ref(true)
const count = ref(0)
const message = ref("Hello")


  12. When Should You Use reactive()?

    13. const form = reactive({
    email: "",
    password: "",
    remember: false
})

Creating a Vue Application

  1. Introduction



  2. Quick Start with CDN (Single HTML File)

    3. <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 3 App</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ title }}</h1>
        <button @click="count++">Clicked {{ count }} times</button>
    </div>

    <script>
        const { createApp, ref } = Vue;

        const App = {
            setup() {
                const title = ref("Hello Vue 3");
                const count = ref(0);

                return { title, count };
            }
        };

        createApp(App).mount("#app");
    </script>
</body>
</html>


  3. Real Project Setup with Vite (Recommended)

    4. # 1. Create a new Vue 3 + Vite project
npm create vue@latest my-vue-app

# 2. Move into the folder
cd my-vue-app

# 3. Install dependencies
npm install

# 4. Start dev server
npm run dev


  4. Project Structure (Typical Vite + Vue App)

    5. my-vue-app/
  ├─ index.html
  ├─ package.json
  ├─ vite.config.js
  └─ src/
      ├─ main.js
      ├─ App.vue
      └─ components/
          └─ ...


  5. main.js: Creating and Mounting the Application

    6. import { createApp } from "vue"
import App from "./App.vue"

const app = createApp(App)

// here you can also use plugins, router, store, etc.
// e.g. app.use(router)

app.mount("#app")


  6. index.html: The Mount Point
    7. <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>My Vue App</title>
    </head>
    <body>
        <div id="app"></div>
        <!-- Vite will inject the compiled JS here -->
        <script type="module" src="/src/main.js"></script>
    </body>
</html>


  7. App.vue: Root Component with Composition API

    8. <template>
    <main>
        <h1>{{ title }}</h1>
        <button @click="count++">
            Clicked {{ count }} times
        </button>
    </main>
</template>

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

const title = ref("My First Vue App")
const count = ref(0)
</script>

<style>
main {
    font-family: system-ui, sans-serif;
}
button {
    margin-top: 1rem;
}
</style>


  8. Adding Another Component

    9. <template>
    <div>
        <p>Local count: {{ count }}</p>
        <button @click="count++">Increment</button>
    </div>
</template>

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

const count = ref(0)
</script>


    <template>
    <main>
        <h1>{{ title }}</h1>
        <Counter />
    </main>
</template>

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

const title = ref("My Vue App")
</script>


  9. Development vs Production

    10. npm run dev


    npm run build
npm run preview   # optional: preview the production build locally


  10. Summary

    11. Step What Happens
    Create project Use npm create vue@latest to scaffold a Vue 3 app
    Entry file main.js imports App.vue and calls createApp(App).mount("#app")
    Root component App.vue defined using Composition API (<script setup>, ref())
    DOM mount point <div id="app"> in index.html
    Components More components go into src/components/ and are imported into App.vue or others
    Dev server npm run dev for live reload while coding
    Production build npm run build to create optimized static files


Template Syntax in Vue

  1. What Is the Template?

    2. <template>
    <h1>{{ title }}</h1>
    <p>Count: {{ count }}</p>
</template>

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

const title = ref("Hello from Vue")
const count = ref(0)
</script>


  2. Text Interpolation with {{ }} (Just like in Angular)

    3. <template>
    <h1>{{ title }}</h1>
    <p>Hello, {{ name }}!</p>
</template>

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

const title = ref("Welcome")
const name = ref("User")
</script>


  3. Using Simple JavaScript Expressions

    4. <template>
    <p>Next: {{ count + 1 }}</p>
    <p>Full name: {{ firstName + " " + lastName }}</p>
    <p>Role: {{ isAdmin ? "Admin" : "User" }}</p>
</template>

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

const count     = ref(1)
const firstName = ref("Junzhe")
const lastName  = ref("Hwangfu")
const isAdmin   = ref(false)
</script>


  4. Raw HTML with v-html (Be Careful)

    5. <template>
    <p>Normal: {{ rawHtml }}</p>
    <p v-html="rawHtml"></p>
</template>

<script setup>
const rawHtml = "<strong>This is bold</strong>"
</script>


  5. Attribute Binding with v-bind: / :

    6. <template>
    <a :href="profileUrl">Go to profile</a>
    <img :src="avatarUrl" :alt="username" />
</template>

<script setup>
const profileUrl = "https://example.com/user/hwangfu"
const avatarUrl  = "/images/avatar.png"
const username   = "Hwangfu"
</script>

    <button :disabled="isLoading">
    {{ isLoading ? "Loading..." : "Submit" }}
</button>


  6. Binding class and style

    7. <template>
    <!-- Dynamic classes --
         Vue evaluates the object and produces a normal class string.
         With isActive=true and hasError=false, the final HTML becomes:
         <p class="active">
    -->
    <p :class="{ active: isActive, error: hasError }">
        Status text
    </p>

    <!-- Dynamic inline styles --
         Vue converts the object to a real style attribute:
         style="color: blue; font-size: 18px;"
    -->
    <div :style="{ color: textColor, fontSize: size + 'px' }">
        Styled text
    </div>
</template>

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

const isActive  = ref(true)
const hasError  = ref(false)

const textColor = ref("blue")
const size      = ref(18)
</script>


  7. Conditional Rendering: v-if, v-else-if, v-else, v-show

    8. <template>
    <p v-if="loggedIn">Welcome back!</p>
    <p v-else>Please log in.</p>

    <p v-show="showDetails">
        These details can be quickly shown/hidden.
    </p>
</template>

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

const loggedIn    = ref(false)
const showDetails = ref(true)
</script>


  8. List Rendering with v-for and key

    9. <template>
    <ul>
        <li v-for="user in users" :key="user.id">
            {{ user.name }} ({{ user.age }})
        </li>
    </ul>
</template>

<script setup>
const users = [
    { id: 1, name: "Alice", age: 23 },
    { id: 2, name: "Bob", age: 31 },
    { id: 3, name: "Charlie", age: 27 }
]
</script>


  9. Event Handling with v-on: / @

    10. <template>
    <button @click="increment">
        Clicked {{ count }} times
    </button>

    <input
        type="text"
        placeholder="Type something"
        @input="onInput"
    />
</template>

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

const count = ref(0)

function increment() {
    count.value++
}

function onInput(event) {
    console.log("You typed:", event.target.value)
}
</script>


  10. Two-Way Binding with v-model (Quick Overview)

    11. <template>
    <input v-model="name" placeholder="Your name" />
    <p>Hello, {{ name }}!</p>
</template>

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

const name = ref("")
</script>


  11. Directive Shorthands (Cheat Sheet)

    12. Full Form Shorthand Meaning
    v-bind:href="url" :href="url" Bind an attribute to an expression
    v-on:click="doSomething" @click="doSomething" Listen to an event
    v-model="value" none Two-way binding
    v-if="condition" none Conditional rendering
    v-for="item in items" none List rendering


Watchers in Vue (Composition API)

  1. Introduction



  2. watch(): Watching Specific Reactive Sources

    3. import { ref, watch } from "vue"

const name = ref("")

watch(name, (newValue, oldValue) => {
    console.log("Changed:", oldValue, "-->", newValue)
})


  3. Watching Multiple Sources

    4. const first = ref("")
const last  = ref("")

watch([first, last], ([newFirst, newLast], [oldFirst, oldLast]) => {
    console.log("First:", oldFirst, "-->", newFirst)
    console.log("Last:", oldLast, "-->", newLast)
})


  4. Watching Reactive Objects

    5. import { reactive, watch } from "vue"

const user = reactive({
    name: "Alice",
    age: 25
})

watch(user, (newVal, oldVal) => {
    console.log("User changed!")
}, { deep: true })


  5. Watching a Getter Function

    6. watch(
    () => user.age,
    (newAge, oldAge) => {
        console.log("Age changed:", oldAge, "-->", newAge)
    }
)


  6. Immediate Watchers

    7. watch(
    count,
    (newVal, oldVal) => {
        console.log("Watcher triggered:", newVal)
    },
    {
        // Run once immediately with the current value
        immediate: true
    }
)


  7. watchEffect(): Automatic Dependency Tracking

    8. import { ref, watchEffect } from "vue"

const count = ref(0)

watchEffect(() => {
    console.log("Count is", count.value)
})


  8. watch vs watchEffect (Comparison)

    9. Feature watch() watchEffect()
    Tracks values Explicitly listed values Automatically detects dependencies
    First run Only when changed (unless immediate) Runs immediately
    Best for side effects on specific values complex reactive logic, debugging
    Old value available? Yes (for refs) No


  9. Cleanup (Stopping Watchers)

    10. const stop = watch(count, () => {
    console.log("count changed")
})

// Later:
stop()


  10. Practical Example: Fetching from an API

    11. import { ref, watch } from "vue"

const search = ref("")
const results = ref([])

watch(search, async (term) => {
    if (term.length < 3) {
        results.value = []
        return
    }

    const res = await fetch(`/api/search?q=${term}`)
    results.value = await res.json()
})


  11. Summary

    12. Concept Description
    watch() Tracks specific reactive values and gives access to old/new values
    watchEffect() Runs immediately and re-runs whenever any dependency changes
    Deep watch Needed to observe changes inside reactive objects
    Immediate Runs watcher callback right away on initialization
    Usage Side effects such as data fetching, logging, reacting to changes


Template Refs in Vue

  1. Introduction



  2. Basic Example: Referencing a DOM Element

    3. <template>
    <input ref="inputEl" placeholder="Type here..." />
    <button @click="focusInput">Focus input</button>
</template>

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

const inputEl = ref(null)

function focusInput() {
    inputEl.value.focus()
}
</script>


  3. When Is the Template Ref Available?

    4. import { ref, onMounted } from "vue"

const box = ref(null)

onMounted(() => {
    console.log("Box height:", box.value.offsetHeight)
})


  4. Template Refs with Components

    5. <!-- Parent.vue -->
<template>
    <Child ref="childComp" />
    <button @click="childComp.increment">Call child method</button>
</template>

<script setup>
import { ref } from "vue"
import Child from "./Child.vue"

const childComp = ref(null)
</script>

    <!-- Child.vue -->
<script setup>
import { ref } from "vue"
import { defineExpose } from "vue"

const count = ref(0)
function increment() { count.value++ }

defineExpose({
    count,
    increment
})
</script>

<template>
    <p>{{ count }}</p>
</template>


  5. Binding Refs in v-for

    6. <template>
    <ul>
        <li
            v-for="(user, index) in users"
            :key="user.id"
            :ref="setItemRef"
        >
            {{ user.name }}
        </li>
    </ul>
</template>

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

const users = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" }
]

const itemRefs = ref([])

function setItemRef(el) {
    if (el) itemRefs.value.push(el)
}
</script>


  6. Using template ref for Non-DOM Purposes

    7. <template>
    <canvas ref="canvas" width="200" height="200"></canvas>
</template>

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

const canvas = ref(null)

onMounted(() => {
    const ctx = canvas.value.getContext("2d")
    ctx.fillRect(10, 10, 100, 100)
})
</script>


  7. Template Ref Caveats



  8. Summary

    9. Concept Description
    DOM refs Use ref="..." to access DOM elements directly
    Component refs Require defineExpose() in the child component
    When available After mount — use onMounted()
    v-for refs Bind a function as :ref to collect multiple elements
    Usage Focus, measurements, canvas, third-party libraries


Using Vue with TypeScript (Vue 3 + Composition API)

  1. Introduction



  2. Enabling TypeScript in a Vue SFC

    3. <script setup lang="ts">
import { ref } from "vue"

const message = ref("Hello TypeScript")
</script>


  3. Typing Refs

    4. const count = ref(0)          // ref<number>
const username = ref("Alice") // ref<string>

    const age = ref<number | null>(null)


  4. Typing Reactive Objects

    5. interface User {
    name: string
    age: number
}

const user = reactive<User>({
    name: "Hwangfu",
    age: 22
})


  5. Typing Functions Inside Components

    6. function greet(name: string): string {
    return "Hello, " + name
}


  6. Typing Computed Properties

    7. const count = ref(2)

const double = computed(() => count.value * 2)
// computed<number>


    const price = ref(10)

const withTax = computed<number>(() => price.value * 1.19)


  7. Typing Props (with <script setup>)

    8. <script setup lang="ts">
interface Props {
    title: string
    count?: number
}

const props = defineProps<Props>()
</script>

<template>
    <h1>{{ props.title }}</h1>
    <p>Count: {{ props.count ?? 0 }}</p>
</template>


  8. Typing Emits

    9. <script setup lang="ts">
const emit = defineEmits<{
    (event: "update", value: number): void
}>()

emit("update", 42) // ✔️
emit("update")     // ❌ type error
</script>


  9. Typing Template Refs

    10. <template>
    <input ref="inputEl" />
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"

const inputEl = ref<HTMLInputElement | null>(null)

onMounted(() => {
    inputEl.value?.focus()
})
</script>


  10. Typing Composables

    11. // useCounter.ts
import { ref } from "vue"

export function useCounter(initial = 0) {
    const count = ref(initial)

    function increment(): void {
        count.value++
    }

    return { count, increment }
}


  11. Typing Events in the Template

    12. <input @input="onInput" />

<script setup lang="ts">
function onInput(event: Event) {
    const target = event.target as HTMLInputElement
    console.log(target.value)
}
</script>


  12. Type Safety with defineModel() (Vue 3.4+)

    13. <script setup lang="ts">
const modelValue = defineModel<string>()
</script>

<template>
    <input v-model="modelValue" />
</template>


  13. Recommended Project Setup

    14. npm create vue@latest
# choose: Typescript + JSX support (optional)


  14. Summary

    15. Feature TypeScript Usage
    Typing refs ref<T>(initial)
    Reactive objects reactive<Interface>({ ... })
    Props defineProps<Props>()
    Emits defineEmits<Signatures>()
    Template refs ref<ElementType | null>(null)
    Computed auto inferred or computed<T>()
    Composables write typed functions returning reactive state


Components Basics in Vue (Composition API + TypeScript)

  1. Introduction



  2. Your First Component

    3. <!-- Hello.vue -->
<template>
    <h2>Hello, {{ name }}!</h2>
</template>

<script setup lang="ts">
import { defineProps } from "vue";

const props = defineProps<{
    name: string
}>();
</script>


  3. Using a Component

    4. <!-- App.vue -->
<template>
    <Hello name="Junzhe" />
</template>

<script setup lang="ts">
import Hello from "./components/Hello.vue";
</script>


  4. Props: Passing Data into Components

    5. <script setup lang="ts">
const props = defineProps<{
    title:  string;
    count?: number;     // optional
}>()
</script>

<template>
    <h3>{{ title }}</h3>
    <p>Count: {{ count ?? 0 }}</p>
</template>


  5. Emits: Sending Data from Child to Parent

    6. <!-- Counter.vue -->
<template>
    <button @click="increment">Count is {{ count }}</button>
</template>

<script setup lang="ts">
import { ref, defineEmits } from "vue";

const emit = defineEmits<{
    (e: "update:count", value: number): void;
}>()

const count = ref(0);

function increment() {
    count.value++;
    emit("update:count", count.value);
}
</script>

    <!-- Parent.vue -->
<template>
    <Counter @update:count="val => total = val" />
    <p>Latest count from child: {{ total }}</p>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Counter from "./Counter.vue";

const total = ref(0);
</script>


  6. Component Slots: Passing Content into Children

    7. <!-- Card.vue -->
<template>
    <div class="card">
        <slot /> <!-- default slot -->
    </div>
</template>

    <!-- Parent.vue -->
<template>
    <Card>
        <p>This is inside the card!</p>
    </Card>
</template>

<script setup lang="ts">
import Card from "./Card.vue";
</script>


  7. Named Slots

    8. <!-- Layout.vue -->
<template>
    <header>
        <slot name="header"/>
    </header>

    <main>
        <slot/>
    </main>

    <footer>
        <slot name="footer"/>
    </footer>
</template>

    <!-- App.vue -->
<template>
    <Layout>
        <template #header>Header content</template>
        Main area content
        <template #footer>Footer content</template>
    </Layout>
</template>

<script setup lang="ts">
import Layout from "./Layout.vue"
</script>


  8. Component Naming Conventions



  9. Reusable Component Pattern (Full Example)

    10. <!-- Button.vue -->
<template>
    <button :class="variant" @click="onClick">
        <slot />
    </button>
</template>

<script setup lang="ts">
const props = defineProps<{
    variant?: "primary" | "secondary"
}>()

const emit = defineEmits<{
    (e: "click"): void
}>()

function onClick() {
    emit("click")
}
</script>

<style scoped>
.primary { padding: 6px; background: #3b82f6; color: white; }
.secondary { padding: 6px; background: #e5e7eb; }
</style>

    <!-- App.vue -->
<template>
    <Button variant="primary" @click="sayHi">Say Hi</Button>
</template>

<script setup lang="ts">
import Button from "./components/Button.vue"

function sayHi() {
    alert("Hello from Vue!")
}
</script>


  10. Summary

    11. Feature Description
    Creating components Use .vue SFC files with <script setup lang="ts">
    Props Typed via defineProps<T>() for safe inputs
    Emits Typed events via defineEmits<Signature>()
    Usage Components are imported and used directly in parent templates
    Slots Allow flexible insertion of content
    Composition API + TS Provides best developer experience & type safety


Component Registration in Vue (Global & Local)

  1. Introduction



  2. Local Registration (Recommended)

    3. <!-- Parent.vue -->
<template>
    <UserCard name="Junzhe" />
</template>

<script setup lang="ts">
import UserCard from "./UserCard.vue"
</script>


  3. Local Registration in Old Syntax (Not Needed with <script setup>)

    4. <script lang="ts">
import { defineComponent } from "vue";
import UserCard from "./UserCard.vue";

export default defineComponent({
    components: {
        UserCard
    }
})
</script>


  4. Global Registration

    5. import { createApp } from "vue";
import App from "./App.vue";

import BaseButton from "./components/BaseButton.vue";
import BaseCard   from "./components/BaseCard.vue"  ;

const app = createApp(App);

// global registration
app.component("BaseButton", BaseButton);
app.component("BaseCard", BaseCard);

app.mount("#app");


  5. Automatic Global Registration (Optional)

    6. const components = import.meta.glob("./components/global/*.vue", { eager: true })

for (const path in components) {
    const comp = components[path]
    const name = path.split("/").pop()!.replace(".vue", "")
    app.component(name, (comp as any).default)
}


  6. Local vs Global Registration (Quick Comparison)

    7. Aspect Local Registration Global Registration
    Scope Only usable inside the importing component Usable everywhere in the app
    Recommended? Yes for most components Yes for common UI elements
    Tree-shaking Excellent Potentially worse (less dead-code elimination)
    Setup style Use <script setup> import Register in main.ts
    Best use-case Pages, logic-specific components Buttons, form fields, layouts, icons


  7. Summary

    8. Concept Description
    Local registration Import in <script setup> → immediately available
    Global registration Register with app.component() in main.ts
    Recommended pattern Use local registration for most components
    Global usage Use for shared UI primitives (buttons, cards, icons)
    Automatic loading Possible using import.meta.glob()


Props in Vue (Typed Props Composition API + TypeScript)

  1. Introduction



  2. Defining Typed Props

    3. <!-- UserCard.vue -->
<template>
    <h2>{{ name }}</h2>
    <p>Age: {{ age }}</p>
</template>

<script setup lang="ts">
interface Props {
    name: string
    age: number
}

const props = defineProps<Props>()
</script>


  3. Passing Props from a Parent Component

    4. <!-- Parent.vue -->
<template>
    <!--
        Without `:` → the value is a plain string
        With    `:` → the value is a JavaScript expression
    -->
    <UserCard name="Junzhe" :age="22" />
</template>

<script setup lang="ts">
import UserCard from "./UserCard.vue"
</script>


  4. Optional Props

    5. const props = defineProps<{
    title: string
    subtitle?: string
}>()


  5. Props with Default Values

    6. <script setup lang="ts">
const props = withDefaults(
    defineProps<{
        size?: "sm" | "md" | "lg"
        label: string
    }>(),
    {
        size: "md"
    }
)
</script>


  6. Union Types for Props

    7. const props = defineProps<{
    status: "success" | "warning" | "error"
}>()


  7. Props with Complex Types

    8. interface User {
    id: number
    name: string
    email: string
}

const props = defineProps<{
    user: User
    tags: string[]
}>()


  8. Readonly Behavior of Props

    9. props.count++   // ❌ not allowed (props are readonly)

    const localCount = ref(props.count)


  9. Required Props

    10. const props = defineProps<{
    id: number      // required
    name?: string   // optional
}>()


  10. Prop Validation with TypeScript

    11. <!-- ❌ Type error: age must be a number -->
<UserCard name="Alice" age="twenty" />


  11. Destructuring Props (Safe Pattern)

    12. import { toRefs } from "vue"

const props = defineProps<{
    title: string
    count: number
}>()

const { title, count } = toRefs(props)


  12. Props and Emits Together

    13. <!-- Toggle.vue -->
<template>
    <button @click="toggle">{{ modelValue ? "On" : "Off" }}</button>
</template>

<script setup lang="ts">
const props = defineProps<{
    modelValue: boolean
}>()

const emit = defineEmits<{
    (e: "update:modelValue", value: boolean): void
}>()

function toggle() {
    emit("update:modelValue", !props.modelValue)
}
</script>


  13. Best Practices for Props



  14. Summary

    15. Feature Description
    Define props defineProps<T>() with TypeScript interfaces
    Optional props Use ? in type definitions
    Default values Use withDefaults() around defineProps
    Prop immutability Props are readonly — cannot mutate directly
    Complex props Pass objects, arrays, or interfaces
    Destructuring Use toRefs() to keep reactivity
    Type safety TypeScript enforces correct prop usage automatically


Component Events in Vue (Emits + TypeScript)

  1. Introduction



  2. Defining Events with defineEmits()

    3. <!-- Child.vue -->
<template>
    <button @click="sendMessage">Send</button>
</template>

<script setup lang="ts">
const emit = defineEmits<{
    (event: "hello", message: string): void
}>()

function sendMessage() {
    emit("hello", "Hi from child!")
}
</script>


  3. Listening to Events in the Parent

    4. <!-- Parent.vue -->
<template>
    <Child @hello="onHello" />
</template>

<script setup lang="ts">
import Child from "./Child.vue"

function onHello(message: string) {
    console.log("Child said:", message)
}
</script>


  4. Multiple Events

    5. <script setup lang="ts">
const emit = defineEmits<{
    (e: "increment"): void
    (e: "submit", value: string): void
    (e: "delete", id: number): void
}>()
</script>


  5. Passing Multiple Arguments

    6. emit("submit", title.value, description.value)
// Typed as: (e: "submit", title: string, desc: string)


  6. Using Events for User Interaction

    7. <!-- LikeButton.vue -->
<template>
    <button @click="like">Like ({{ count }})</button>
</template>

<script setup lang="ts">
import { ref } from "vue"

const count = ref(0)

const emit = defineEmits<{
    (e: "liked", newCount: number): void
}>()

function like() {
    count.value++
    emit("liked", count.value)
}
</script>

    <!-- Parent.vue -->
<template>
    <LikeButton @liked="onLiked" />
</template>

<script setup lang="ts">
import LikeButton from "./LikeButton.vue"

function onLiked(total: number) {
    console.log("Likes:", total)
}
</script>


  7. Events and Custom v-model

    8. <!-- Toggle.vue -->
<template>
    <button @click="toggle">
        {{ modelValue ? "On" : "Off" }}
    </button>
</template>

<script setup lang="ts">
const props = defineProps<{
    modelValue: boolean
}>()

const emit = defineEmits<{
    (e: "update:modelValue", value: boolean): void
}>()

function toggle() {
    emit("update:modelValue", !props.modelValue)
}
</script>

    <!-- Parent.vue -->
<template>
    <!--
        <Toggle
            :modelValue="enabled"
            @update:modelValue="enabled = $event"
        />
    -->

    <Toggle v-model="enabled" />
</template>

<script setup lang="ts">
import { ref } from "vue"
import Toggle from "./Toggle.vue"

const enabled = ref(false)
</script>


  8. Typing Event Listeners in Parents

    9. function onSelect(id: number) {
    // id is guaranteed to be a number
}


  9. Event Validation (Old Vue 2 API)

    10. <script setup lang="ts">
defineEmits({
    submit(payload: string) {
        return payload.length > 0
    }
})
</script>


  10. Best Practices for Component Events



  11. Summary

    12. Concept Description
    Defining events defineEmits<Signatures>()
    Triggering events emit("eventName", payload)
    Parent listening <Child @eventName="handler" />
    Multiple events Use multiple overload signatures
    Custom v-model Event must be update:modelValue
    Type safety All events strictly typed with TypeScript


Component v-model (Custom Two-Way Binding in Vue)

  1. Introduction



  2. Basic Example: A Simple Toggle Component

    3. <!-- Toggle.vue -->
<template>
    <button @click="toggle">
        {{ modelValue ? "ON" : "OFF" }}
    </button>
</template>

<script setup lang="ts">
const props = defineProps<{
    modelValue: boolean
}>()

const emit = defineEmits<{
    (e: "update:modelValue", value: boolean): void
}>()

function toggle() {
    emit("update:modelValue", !props.modelValue)
}
</script>

    <!-- Parent.vue -->
<template>
    <Toggle v-model="enabled" />
    <p>Enabled: {{ enabled }}</p>
</template>

<script setup lang="ts">
import { ref } from "vue"
import Toggle from "./Toggle.vue"

const enabled = ref(false)
</script>


  3. Understanding the Pattern

    4. Part Purpose
    modelValue The value provided by the parent (v-model)
    update:modelValue The event emitted when the child wants to update the parent
    v-model="x" Links x to modelValue and listens for updates


  4. v-model with TypeScript Validation

    5. const emit = defineEmits<{
    (e: "update:modelValue", value: string): void
}>()


  5. Multiple v-model Bindings

    6. <!-- RangeInput.vue -->
<template>
    <input type="number" :value="min" @input="onMin($event)" />
    <input type="number" :value="max" @input="onMax($event)" />
</template>

<script setup lang="ts">
const props = defineProps<{
    min: number
    max: number
}>()

const emit = defineEmits<{
    (e: "update:min", value: number): void
    (e: "update:max", value: number): void
}>()

function onMin(e: Event) {
    emit("update:min", Number((e.target as HTMLInputElement).value))
}

function onMax(e: Event) {
    emit("update:max", Number((e.target as HTMLInputElement).value))
}
</script>

    <!-- Parent.vue -->
<template>
    <RangeInput v-model:min="start" v-model:max="end" />
    <p>Range: {{ start }} - {{ end }}</p>
</template>

<script setup lang="ts">
import { ref } from "vue"
import RangeInput from "./RangeInput.vue"

const start = ref(1)
const end = ref(10)
</script>


  6. Customizing v-model Name

    7. <!-- SearchInput.vue -->
<script setup lang="ts">
const props = defineProps<{ query: string }>()

const emit = defineEmits<{
    (e: "update:query", value: string): void
}>()
</script>

<template>
    <input :value="query" @input="emit('update:query', $event.target.value)" />
</template>

    <!-- Parent.vue -->
<template>
    <SearchInput v-model:query="searchText" />
</template>

<script setup lang="ts">
import { ref } from "vue"
import SearchInput from "./SearchInput.vue"

const searchText = ref("")
</script>


  7. Using Local State + Props in v-model

    8. <script setup lang="ts">
import { ref, watch } from "vue"

const props = defineProps<{ modelValue: string }>()
const emit = defineEmits<{ (e: "update:modelValue", value: string): void }>()

const internal = ref(props.modelValue)

// sync internal state to prop changes
watch(() => props.modelValue, (v) => internal.value = v)

function update(v: string) {
    internal.value = v
    emit("update:modelValue", v)
}
</script>


  8. Best Practices



  9. Summary

    10. Feature Description
    Default v-model Uses modelValue prop + update:modelValue event
    Multiple v-models Use v-model:name + update:name
    Type safety All payloads validated by TypeScript
    Local state pattern Use ref() + watch() for more control
    Component usage <CustomInput v-model="value" />


Fallthrough Attributes in Vue (Composition API + TypeScript)

  1. Introduction



  2. Basic Example of Fallthrough Attributes

    3. <!-- Button.vue -->
<template>
    <button>
        <slot />
    </button>
</template>

<script setup lang="ts">
</script>

    <!-- Parent.vue -->
<template>
    <Button id="main-btn" class="primary" data-x="123">
        Click me
    </Button>
</template>

    <button id="main-btn" class="primary" data-x="123">
    Click me
</button>


  3. Accessing Fallthrough Attributes

    4. <script setup lang="ts">
import { useAttrs } from "vue"

const attrs = useAttrs()

console.log(attrs)
// { id: "main-btn", class: "primary", "data-x": "123" }
</script>


  4. Manually Applying Fallthrough Attributes

    5. <!-- InputWrapper.vue -->
<template>
    <label>
        {{ label }}
        <input v-bind="attrs" />
    </label>
</template>

<script setup lang="ts">
import { defineProps, useAttrs } from "vue"

const props = defineProps<{
    label: string
}>()

const attrs = useAttrs()
</script>


  5. Disabling Automatic Fallthrough

    6. <!-- CustomField.vue -->
<script setup lang="ts">
defineOptions({
    inheritAttrs: false
})
</script>

<template>
    <div>
        <!-- No automatic fallthrough onto this element -->
        <slot />
    </div>
</template>


  6. Fallthrough and Multiple Root Elements

    7. <!-- Wrong: Multi-root component -->
<template>
    <h1>Hello</h1>
    <p>World</p>
</template>

    <!-- Correct -->
<template>
    <div v-bind="$attrs">
        <h1>Hello</h1>
        <p>World</p>
    </div>
</template>


  7. Fallthrough Attributes with TypeScript

    8. const attrs = useAttrs() as Record<string, string | number | boolean>


  8. Common Use Cases



  9. Best Practices



  10. Summary

    11. Concept Description
    Fallthrough attributes Attributes not declared as props automatically applied to the component root
    $attrs / useAttrs() Access fallthrough attributes inside the component
    inheritAttrs: false Disables automatic fallthrough behavior
    Manual binding v-bind="$attrs" applies attributes to chosen elements
    Multiple roots Require manual placement of fallthrough attributes


Lifecycle Hooks in Vue (Composition API + TypeScript)

  1. Introduction



  2. Basic Example

    3. <script setup lang="ts">
import { onMounted, onUnmounted } from "vue"

onMounted(() => {
    console.log("Component mounted!")
})

onUnmounted(() => {
    console.log("Component removed!")
})
</script>


  3. Full List of Composition API Lifecycle Hooks

    4. Hook When It Runs
    onBeforeMount Right before the component is mounted to the DOM
    onMounted After the component is mounted (DOM is available)
    onBeforeUpdate Before the component re-renders due to reactive changes
    onUpdated After the DOM is updated
    onBeforeUnmount Right before the component is removed
    onUnmounted After the component is removed from the DOM
    onErrorCaptured When an error occurs in a child component
    onRenderTracked Tracks reactive dependencies during render (debug only)
    onRenderTriggered Called when reactive dependencies cause re-render (debug only)
    onActivated When a component wrapped by <KeepAlive> becomes active
    onDeactivated When a kept-alive component is deactivated


  4. onMounted() — When DOM Is Available

    5. onMounted(() => {
    console.log("Component ready!")
})


  5. onBeforeMount() — Before Mounting

    6. onBeforeMount(() => {
    console.log("About to mount...")
})


  6. onUpdated() and onBeforeUpdate()

    7. onBeforeUpdate(() => {
    console.log("DOM is about to update")
})

onUpdated(() => {
    console.log("DOM updated")
})


  7. onUnmounted() — Cleanup Logic

    8. onUnmounted(() => {
    console.log("Component destroyed")
})


  8. Handling Errors with onErrorCaptured()

    9. onErrorCaptured((err, instance, info) => {
    console.error("Error:", err)
    return false   // prevents further propagation
})


  9. Debug Hooks: onRenderTracked() & onRenderTriggered()

    10. onRenderTracked((event) => {
    console.log("Tracked:", event)
})

onRenderTriggered((event) => {
    console.log("Triggered:", event)
})


  10. KeepAlive Hooks: onActivated() & onDeactivated()

    11. <KeepAlive>
    <MyComponent />
</KeepAlive>
    onActivated(() => console.log("Activated"))
onDeactivated(() => console.log("Deactivated"))


  11. Using Lifecycle Hooks with TypeScript

    12. onMounted((): void => {
    console.log("Typed hook example")
})


  12. Summary

    13. Hook Purpose
    onMounted Run code after initial render (DOM ready)
    onUnmounted Cleanup when component is removed
    onUpdated Run code after DOM updates
    onBeforeMount Before initial DOM insertion
    onBeforeUpdate Before DOM updates
    onErrorCaptured Error handling from descendants
    onActivated / onDeactivated Hooks for <KeepAlive> components


Slots in Vue (Composition API + TypeScript)


  1. Slots allow parent components to pass template content into child components.


  2. Basic Slot

    3. <!-- Child.vue -->
<template>
    <div class="box">
        <slot>Fallback content</slot>
    </div>
</template>

<script setup lang="ts"></script>


    <!-- Parent.vue -->
<Child>
    <p>This is inserted into the slot!</p>
</Child>


  3. Named Slots

    4. <!-- Card.vue -->
<template>
    <div class="card">
        <header><slot name="header" /></header>
        <main><slot /></main>
        <footer><slot name="footer" /></footer>
    </div>
</template>

<script setup lang="ts"></script>


    <Card>
    <template #header>Header Content</template>
    Body text goes here.
    <template #footer>Footer Content</template>
</Card>


  4. Scoped Slots (Passing Data From Child to Parent)

    5. <!-- UserList.vue -->
<template>
    <ul>
        <li v-for="user in users" :key="user.id">
            <slot :user="user">{{ user.name }}</slot>
        </li>
    </ul>
</template>

<script setup lang="ts">
interface User {
    id: number;
    name: string;
}

const users: User[] = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" }
];
</script>


    <UserList>
    <template #default="{ user }">
        <strong>{{ user.name }}</strong>
    </template>
</UserList>


  5. Typing Slot Props in TypeScript

    6. <script setup lang="ts">
import type { SlotsType } from "vue"

interface User {
    id: number;
    name: string;
}

defineSlots<SlotsType<{
    default: { user: User }
}>>()
</script>


  6. Default Slot + Named Slots Together

    7. <!-- Layout.vue -->
<template>
    <div class="layout">
        <aside><slot name="sidebar" /></aside>
        <section><slot /></section>
    </div>
</template>

<script setup lang="ts"></script>

    <Layout>
    <template #sidebar>Menu items...</template>
    <p>Main content goes here.</p>
</Layout>


  7. Fallback Content

    8. <slot>Nothing provided</slot>


  8. Summary

    9. Feature Description
    Default slot Main content placeholder
    Named slots Multiple content areas such as header/footer/sidebar
    Scoped slots Child passes data to parent templates
    Fallback content Shown when no parent content is provided
    TypeScript slots Use defineSlots for typing slot props


Conditional Rendering in Vue (Composition API + TypeScript)

  1. Introduction



  2. v-if — Render Only If Condition Is True

    3. <template>
    <div>
        <p v-if="loggedIn">Welcome back!</p>
        <p v-else>Please log in.</p>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const loggedIn = ref(false)
</script>


  3. v-else-if and v-else

    4. <template>
    <div>
        <p v-if="score >= 90">Excellent</p>
        <p v-else-if="score >= 60">Pass</p>
        <p v-else>Fail</p>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue"

const score = ref(75)
</script>


  4. v-show — Toggle Visibility with CSS

    5. <template>
    <button @click="show = !show">Toggle</button>
    <p v-show="show">I stay in the DOM.</p>
</template>

<script setup lang="ts">
import { ref } from "vue"

const show = ref(true)
</script>


  5. v-if vs v-show: When to Use Which?

    6. Directive Behavior Best Use Case
    v-if Creates/removes DOM elements Rare toggles, expensive components
    v-show Always renders, toggles visibility via CSS Frequent toggling, always needed in DOM


  6. Conditional Groups Using <template>

    7. <template v-if="user">
    <h2>User Info</h2>
    <p>Name: {{ user.name }}</p>
</template>

<template v-else>
    <p>No user found.</p>
</template>

<script setup lang="ts">
interface User {
    name: string;
}

const user = ref<User | null>({ name: "Alice" })
</script>


  7. Using Computed Properties for Cleaner Conditions

    8. <script setup lang="ts">
import { ref, computed } from "vue"

const age = ref(20)

const isAdult = computed(() => age.value >= 18)
</script>

    <template>
    <p v-if="isAdult">You are an adult.</p>
</template>


  8. v-if with Async Data (Common Pattern)

    9. <template>
    <p v-if="loading">Loading...</p>
    <p v-else-if="error">Error: {{ error }}</p>
    <p v-else>Data: {{ data }}</p>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue"

const loading = ref(true)
const error = ref<string | null>(null)
const data = ref<string | null>(null)

onMounted(async () => {
    try {
        const res = await fetch("/api/message")
        data.value = await res.text()
    } catch (err) {
        error.value = String(err)
    } finally {
        loading.value = false
    }
})
</script>


  9. Best Practices



  10. Summary

    11. Directive Purpose
    v-if Conditionally render elements (added/removed from DOM)
    v-else-if / v-else Chain conditional rendering
    v-show Toggle visibility using CSS, always in DOM
    v-if + <template> Conditionally render a block of elements
    Computed conditions Cleaner and reusable conditional logic


List Rendering in Vue (Composition API + TypeScript)

  1. Introduction



  2. Basic List Rendering with Arrays

    3. <template>
    <ul>
        <li v-for="name in names" :key="name">
            {{ name }}
        </li>
    </ul>
</template>

<script setup lang="ts">
import { ref } from "vue"

const names = ref<string[]>(["Alice", "Bob", "Charlie"])
</script>


  3. Accessing Index in v-for
    4. <li v-for="(name, index) in names" :key="index">
    {{ index }} - {{ name }}
</li>


  4. Rendering a List of Objects
    5. <template>
    <ul>
        <li v-for="user in users" :key="user.id">
            {{ user.name }} ({{ user.age }})
        </li>
    </ul>
</template>

<script setup lang="ts">
import { ref } from "vue"

interface User {
    id: number
    name: string
    age: number
}

const users = ref<User[]>([
    { id: 1, name: "Alice", age: 20 },
    { id: 2, name: "Bob", age: 25 }
])
</script>


  5. Using Computed Properties to Transform Lists
    6. <script setup lang="ts">
import { ref, computed } from "vue"

const numbers = ref([1, 2, 3, 4, 5])

const evenNumbers = computed(() =>
    numbers.value.filter(n => n % 2 === 0)
)
</script>

    <template>
    <p v-for="num in evenNumbers" :key="num">
        {{ num }}
    </p>
</template>


  6. v-for on <template> (Multiple Elements)

    7. <template v-for="user in users" :key="user.id">
    <h3>{{ user.name }}</h3>
    <p>Age: {{ user.age }}</p>
</template>


  7. Looping Through Objects
    8. <template>
    <div v-for="(value, key) in settings" :key="key">
        {{ key }}: {{ value }}
    </div>
</template>

<script setup lang="ts">
import { reactive } from "vue"

const settings = reactive({
    theme: "dark",
    notifications: true,
    version: 3
})
</script>


  8. Looping Through a Range (v-for with Numbers)
    9. <li v-for="n in 5" :key="n">
    Item {{ n }}
</li>


  9. Combining v-for with v-if (Warning)

    10. <!-- ❌ Avoid -->
<li v-for="user in users" v-if="user.active" :key="user.id">
    {{ user.name }}
</li>

    <!-- ✔ Better -->
<li v-for="user in activeUsers" :key="user.id">
    {{ user.name }}
</li>

    <script setup lang="ts">
import { ref, computed } from "vue"

const users = ref([
    { id: 1, name: "Alice", active: true },
    { id: 2, name: "Bob", active: false }
])

const activeUsers = computed(() =>
    users.value.filter(u => u.active)
)
</script>


  10. Tracking List Items with Unique Keys

    11. <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
</li>


  11. Using List Rendering with Components

    12. <template>
    <TodoItem
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
    />
</template>

<script setup lang="ts">
import { ref } from "vue"
import TodoItem from "./TodoItem.vue"

const todos = ref([
    { id: 1, text: "Study Vue" },
    { id: 2, text: "Write components" }
])
</script>


  12. Summary

    13. Feature Description
    v-for Loop through arrays, objects, or numbers
    :key Helps Vue track elements efficiently
    Computed filtering Recommended instead of using v-if inside v-for
    Object iteration Access value + key
    Range iteration Loop n times using v-for="n in 10"
    Component lists Use v-for with components and properly typed props


Event Handling in Vue (Composition API + TypeScript)

  1. Introduction



  2. Basic Event Listening

    3. <template>
    <button @click="increment">Count: {{ count }}</button>
</template>

<script setup lang="ts">
import { ref } from "vue"

const count = ref(0)

function increment() {
    count.value++
}
</script>


  3. Passing Arguments to Event Handlers

    4. <button @click="add(5)">+5</button>

<script setup lang="ts">
function add(amount: number) {
    console.log("Added:", amount)
}
</script>


  4. Accessing the Native Event Object

    5. <input @input="handleInput($event)" />

<script setup lang="ts">
function handleInput(e: Event) {
    const target = e.target as HTMLInputElement
    console.log(target.value)
}
</script>


  5. Inline Arrow Functions
    6. <button @click="() => count++">Increment</button>


  6. Event Modifiers

    7. Modifier Meaning
    .stop Calls event.stopPropagation()
    .prevent Calls event.preventDefault()
    .capture Use capture mode
    .once Listener runs only once
    .passive Use passive mode (scroll performance) 

    <button @click.stop="doSomething">Stop Propagation</button>
<form @submit.prevent="submit">...</form>


  7. Key Modifiers (Keyboard Events)

    8. <input @keyup.enter="submit" />


    <input @keyup.ctrl.enter="save" />


  8. Mouse Button Modifiers
    9. <button @click.right="onRightClick">Right Click</button>
<button @click.middle="onMiddleClick">Middle Click</button>


  9. v-on on <template>

    10. <template @click="clicked">
    <button>A</button>
    <button>B</button>
</template>


  10. Event Handling with TypeScript (Strong Typing)

    11. <script setup lang="ts">
function onInput(e: Event) {
    const target = e.target as HTMLInputElement
    console.log(target.value)
}

function onClick(e: MouseEvent) {
    console.log("Mouse X:", e.clientX)
}
</script>


  11. Using Events Inside Components
    12. <ChildComponent @update="handleUpdate" />

<script setup lang="ts">
function handleUpdate(value: number) {
    console.log("Updated:", value)
}
</script>



  12. Summary

    13. Feature Description
    @click, @input, etc. Attach DOM event listeners
    Event modifiers .stop, .prevent, .once, etc.
    Key modifiers .enter, .esc, .ctrl.enter, etc.
    Inline event handlers Quick logic but less readable
    Typed events Use TypeScript for safe event handling


Form Input Bindings in Vue (Composition API + TypeScript)

  1. Introduction



  2. Text Input with v-model
    3. <template>
    <input v-model="name" placeholder="Your name" />
    <p>Hello, {{ name }}!</p>
</template>

<script setup lang="ts">
import { ref } from "vue"

const name = ref("")
</script>


  3. Textarea
    4. <textarea v-model="message"></textarea>

<script setup lang="ts">
const message = ref("")
</script>


  4. Checkbox (Boolean)

    5. <input type="checkbox" v-model="isChecked" />
<p>Checked: {{ isChecked }}</p>

<script setup lang="ts">
const isChecked = ref(false)
</script>


  5. Checkbox Group (Array Binding)

    6. <template>
    <label>
        <input type="checkbox" value="apple" v-model="fruits" /> Apple
    </label>
    <label>
        <input type="checkbox" value="banana" v-model="fruits" /> Banana
    </label>

    <p>Selected: {{ fruits }}</p>
</template>

<script setup lang="ts">
import { ref } from "vue"

const fruits = ref<string[]>([])
</script>


  6. Radio Buttons

    7. <template>
    <label>
        <input type="radio" value="male" v-model="gender" /> Male
    </label>
    <label>
        <input type="radio" value="female" v-model="gender" /> Female
    </label>

    <p>Gender: {{ gender }}</p>
</template>

<script setup lang="ts">
const gender = ref("male")
</script>


  7. Select Dropdown (Single)
    8. <select v-model="city">
    <option value="Berlin">Berlin</option>
    <option value="Munich">Munich</option>
    <option value="Hamburg">Hamburg</option>
</select>

<script setup lang="ts">
const city = ref("Berlin")
</script>


  8. Select Dropdown (Multiple)
    9. <select v-model="cities" multiple>
    <option value="Berlin">Berlin</option>
    <option value="Munich">Munich</option>
    <option value="Hamburg">Hamburg</option>
</select>

<script setup lang="ts">
const cities = ref<string[]>([])
</script>


  9. Binding Value Types (Number / Boolean / String)

    10. <input v-model.number="age" type="number" />

<script setup lang="ts">
const age = ref<number | null>(null)
</script>


    <input v-model.trim="username" />
<input v-model.lazy="email" />


  10. Binding to reactive() Objects

    11. <template>
    <input v-model="form.email" placeholder="Email" />
    <input type="password" v-model="form.password" placeholder="Password" />
</template>

<script setup lang="ts">
import { reactive } from "vue"

const form = reactive({
    email: "",
    password: ""
})
</script>


  11. TypeScript Typing for Forms
    12. <script setup lang="ts">
import { reactive } from "vue"

interface LoginForm {
    email: string
    password: string
    remember: boolean
}

const form = reactive<LoginForm>({
    email: "",
    password: "",
    remember: false
})
</script>


  12. Using v-model with Components

    13. <CustomInput v-model="username" />


  13. Best Practices



  14. Summary

    15. Feature Description
    v-model Two-way binding for form fields
    Modifiers .trim, .number, .lazy
    Checkbox & Radio Boolean, array, or single-value binding
    Select Single or multiple selection support
    reactive() Organize form data in typed objects
    TypeScript support Strong typing for safe form handling


Scoped Slots in Vue (Composition API + TypeScript)

  1. Introduction



  2. How Scoped Slots Work (Concept)

    3. <slot :user="user"></slot>

    <template #default="{ user }">
    {{ user.name }}
</template>


  3. Basic Scoped Slot Example

    4. <!-- UserList.vue -->
<template>
    <ul>
        <li v-for="user in users" :key="user.id">
            <slot :user="user">
                {{ user.name }}
            </slot>
        </li>
    </ul>
</template>

<script setup lang="ts">
interface User {
    id: number
    name: string
}

const users: User[] = [
    { id: 1, name: "Alice" },
    { id: 2, name: "Bob" }
]
</script>


    <UserList>
    <template #default="{ user }">
        <strong>{{ user.name.toUpperCase() }}</strong>
    </template>
</UserList>


  4. Example: Building a Flexible Table

    5. <!-- DataTable.vue -->
<template>
    <table>
        <tr v-for="row in rows" :key="row.id">
            <slot :row="row"></slot>
        </tr>
    </table>
</template>

<script setup lang="ts">
interface Row {
    id: number
    name: string
    age: number
}

const rows: Row[] = [
    { id: 1, name: "Alice", age: 20 },
    { id: 2, name: "Bob", age: 25 }
]
</script>

    <DataTable>
    <template #default="{ row }">
        <td>{{ row.name }}</td>
        <td>{{ row.age }}</td>
    </template>
</DataTable>


  5. Typing Scoped Slots in TypeScript (Strong Typing)


    6. <!-- UserCard.vue -->
<template>
    <div class="card">
        <!-- Expose "user" as a scoped slot prop to the parent -->
        <slot :user="user"></slot>
    </div>
</template>

<script setup lang="ts">
import type { SlotsType } from "vue"

interface User {
    id: number
    name: string
}

const user: User = {
    id: 1,
    name: "Alice"
}

defineSlots<SlotsType<{
    default: { user: User }
}>>()
</script>

    <!-- Parent.vue -->
<template>
    <UserCard>
        <template #default="{ user }">
            <p>{{ user.name }} (ID: {{ user.id }})</p>
        </template>
    </UserCard>
</template>

<script setup lang="ts">
import UserCard from "./UserCard.vue"
</script>



    <!-- Panel.vue -->
<template>
    <section class="panel">
        <header>
            <slot name="header" :title="title"></slot>
        </header>

        <main>
            <slot :item="item"></slot>
        </main>

        <footer>
            <slot name="footer" :updatedAt="updatedAt"></slot>
        </footer>
    </section>
</template>

<script setup lang="ts">
import type { SlotsType } from "vue"

const title = "Panel Title"
const item = "Some item"
const updatedAt = new Date()

defineSlots<SlotsType<{
    header: { title: string }
    default: { item: string }
    footer: { updatedAt: Date }
}>>()
</script>

    <!-- App.vue -->
<template>
    <Panel>
        <template #header="{ title }">
            <h2> {{ title }} </h2>
        </template>

        <template #default="{ item }">
            <p>Item: {{ item }}</p>
        </template>

        <template #footer="{ updatedAt }">
            <small>Last updated: {{ updatedAt.toLocaleString() }}</small>
        </template>
    </Panel>
</template>

<script setup lang="ts">
import Panel from "./Panel.vue"
</script>



    <script setup lang="ts">
import type { SlotsType } from "vue"

interface User {
    id: number
    name: string
}

const user: User | null = null

defineSlots<SlotsType<{
    default: { user?: User | null }
}>>()
</script>


  6. Multiple Scoped Slots

    7. <!-- UserCard.vue -->
<template>
    <div class="card">
        <slot name="header" :user="user" />
        <p>Age: {{ user.age }}</p>
        <slot name="footer" :user="user" />
    </div>
</template>

<script setup lang="ts">
const user = {
    name: "Alice",
    age: 22
}
</script>

    <UserCard>
    <template #header="{ user }">
        <h3>{{ user.name }}</h3>
    </template>

    <template #footer="{ user }">
        <small>User is {{ user.age }} years old.</small>
    </template>
</UserCard>


  7. Default Slot Fallback Behavior

    8. <slot :item="item">Default layout for {{ item.name }}</slot>


  8. Advanced: Passing Functions via Scoped Slots

    9. <!-- ActionList.vue -->
<template>
    <slot :remove="remove" :items="items"></slot>
</template>

<script setup lang="ts">
import { ref } from "vue"

const items = ref(["A", "B", "C"])

function remove(index: number) {
    items.value.splice(index, 1)
}
</script>

    <ActionList>
    <template #default="{ items, remove }">
        <div v-for="(item, i) in items" :key="item">
            {{ item }}
            <button @click="remove(i)">X</button>
        </div>
    </template>
</ActionList>


  9. Summary

    10. Concept Description
    Scoped Slots Child exposes data → parent renders UI
    Data Direction Child → Parent
    Usage Lists, tables, cards, customized layouts
    TypeScript Support Use defineSlots + SlotsType
    Named Scoped Slots Useful for components with multiple regions
    Fallback Content Default slot content if parent provides none


Provide / Inject in Vue (Composition API + TypeScript)

  1. Introduction



  2. Basic Usage

    3. <!-- Parent.vue -->
<template>
    <div>
        <h2>Parent</h2>
        <Child />
    </div>
</template>

<script setup lang="ts">
import { provide } from "vue"
import Child from "./Child.vue"

const message = "Hello from Parent"

provide("msg", message)  // key = "msg"
</script>

    <!-- Child.vue -->
<template>
    <p>Injected: {{ msg }}</p>
</template>

<script setup lang="ts">
import { inject } from "vue"

const msg = inject("msg")
</script>


    const msg = inject("msg", "default value")


  3. Typed Provide / Inject Using Injection Keys

    4. // keys.ts
import type { InjectionKey } from "vue"

export const userKey: InjectionKey<string> = Symbol("userKey")

    <!-- Parent.vue -->
<script setup lang="ts">
import { provide } from "vue"
import { userKey } from "./keys"

provide(userKey, "Alice")
</script>

    <!-- Child.vue -->
<script setup lang="ts">
import { inject } from "vue"
import { userKey } from "./keys"

const user = inject(userKey)
</script>


    const user = inject(userKey, "Guest")


  4. Providing Reactive Values

    5. <!-- Parent.vue -->
<script setup lang="ts">
import { ref, provide } from "vue"
import { countKey } from "./keys"

const count = ref(0)

provide(countKey, count)
</script>

    <!-- Child.vue -->
<script setup lang="ts">
import { inject } from "vue"
import { countKey } from "./keys"

const count = inject(countKey)
</script>

<template>
    <button @click="count.value++">Increment</button>
    <p>Count: {{ count.value }}</p>
</template>


  5. Providing Complex Objects
    6. <!-- keys.ts -->
import type { InjectionKey } from "vue"

export interface AuthContext {
    user: string
    login: (name: string) => void
    logout: () => void
}

export const authKey: InjectionKey<AuthContext> = Symbol("authKey")


    <script setup lang="ts">
import { provide, ref } from "vue"
import { authKey } from "./keys"

const user = ref("Guest")

function login(name: string) {
    user.value = name
}

function logout() {
    user.value = "Guest"
}

provide(authKey, { user, login, logout })
</script>

<template>
    <slot />
</template>


    <script setup lang="ts">
import { inject } from "vue"
import { authKey } from "./keys"

const auth = inject(authKey)

if (!auth) throw new Error("AuthProvider is missing")
</script>

<template>
    <p>Current user: {{ auth.user }}</p>
    <button @click="auth.login('Alice')">Login as Alice</button>
</template>


  6. Default Values

    7. const config = inject(configKey, { theme: "light" })


  7. Summary

    8. Concept Description
    provide() Defines shared data from an ancestor component
    inject() Consumes shared data in any descendant
    TypeScript keys Use InjectionKey<T> + Symbol for type-safe injection
    Reactivity Reactive values stay reactive across components
    Use cases Global config, services, shared stores, avoiding prop drilling


Async Components in Vue (Composition API + TypeScript)

  1. Introduction



  2. Basic Async Component

    3. <!-- Parent.vue -->
<template>
    <AsyncChild />
</template>

<script setup lang="ts">
import { defineAsyncComponent } from "vue"

const AsyncChild = defineAsyncComponent(() =>
    import("./Child.vue")
)
</script>


  3. Typing Async Components

    4. <!-- Parent.vue -->
<script setup lang="ts">
import { defineAsyncComponent } from "vue"
import type { DefineComponent } from "vue"

const AsyncForm = defineAsyncComponent<DefineComponent>(() =>
    import("./Form.vue")
)
</script>


  4. Async Component with Loading and Error Components

    5. <!-- Parent.vue -->
<script setup lang="ts">
import { defineAsyncComponent } from "vue"

const AsyncChart = defineAsyncComponent({
    loader: () => import("./Chart.vue"),
    loadingComponent: () => import("./Loading.vue"),
    errorComponent: () => import("./Error.vue"),
    delay: 200,     // show loading component after 200ms
    timeout: 3000   // throw error if it takes >3s
})
</script>

<template>
    <AsyncChart />
</template>


  5. Using Async Components with <Suspense>

    6. <!-- Parent.vue -->
<template>
    <Suspense>
        <template #default>
            <AsyncProfile />
        </template>

        <template #fallback>
            <p>Loading profile...</p>
        </template>
    </Suspense>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from "vue"

const AsyncProfile = defineAsyncComponent(() =>
    import("./Profile.vue")
)
</script>


  6. Dynamic Async Components

    7. <!-- Parent.vue -->
<template>
    <component :is="currentView" />

    <button @click="showLogin">Login</button>
    <button @click="showDashboard">Dashboard</button>
</template>

<script setup lang="ts">
import { ref, defineAsyncComponent } from "vue"

const LoginView     = defineAsyncComponent(() => import("./Login.vue"))
const DashboardView = defineAsyncComponent(() => import("./Dashboard.vue"))

const currentView = ref(LoginView)

function showLogin() {
    currentView.value = LoginView
}
function showDashboard() {
    currentView.value = DashboardView
}
</script>


  7. Preloading Async Components

    8. <script setup lang="ts">
import { defineAsyncComponent } from "vue"

// Preload early
import("./HeavyPanel.vue")

// Create async component after preload
const HeavyPanel = defineAsyncComponent(() => import("./HeavyPanel.vue"))
</script>


  8. Summary

    9. Feature Description
    Lazy loading Load components only when needed
    defineAsyncComponent Main API for creating async components
    Loading/error UI Custom components for loading states and errors
    <Suspense> Simplified loading fallback system
    TypeScript support Use DefineComponent to type async imports
    Dynamic switching Use <component :is="..."> with async components


Composables in Vue

  1. What Are Composables in Vue?



  2. Basic Example: A Counter Composable

    3. src/
└── composables/
    └── useCounter.ts

    import { ref } from "vue";

export function useCounter() {
    const count = ref(0);

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

    function decrement() {
        count.value--;
    }

    return { count, increment, decrement };
}

    <script setup lang="ts">
import { useCounter } from "@/composables/useCounter";

const { count, increment, decrement } = useCounter();
</script>

<template>
    <button @click="decrement">-</button>
    {{ count }}
    <button @click="increment">+</button>
</template>


  3. Example: Fetch Data Composable

    4. import { ref, onMounted } from "vue";

export function useFetch(url: string) {
    const data    = ref(null);
    const loading = ref(true);
    const error   = ref(null);

    async function load() {
        loading.value = true;
        try {
            const res = await fetch(url);
            data.value = await res.json();
        } catch (err: any) {
            error.value = err.message;
        } finally {
            loading.value = false;
        }
    }

    onMounted(load);

    return { data, loading, error, load };
}

    <script setup lang="ts">
import { useFetch } from "@/composables/useFetch";

const { data, loading, error } = useFetch("https://api.example.com/posts");
</script>

<template>
    <p v-if="loading">Loading...</p>
    <p v-if="error">Error: {{ error }}</p>
    <pre v-if="data">{{ data }}</pre>
</template>


  4. Rules of Composables



  5. Example: Shared Global State (Simple Store)

    6. import { ref } from "vue";

const dark = ref(false);  // <-- shared across all components

export function useDarkMode() {
    function toggle() {
        dark.value = !dark.value;
    }

    return { dark, toggle };
}

    const { dark, toggle } = useDarkMode();

    const { dark } = useDarkMode();


  6. Example: Listening to Window Resize

    7. import { ref, onMounted, onUnmounted } from "vue";

export function useWindowSize() {
    const width = ref(window.innerWidth);
    const height = ref(window.innerHeight);

    function update() {
        width.value = window.innerWidth;
        height.value = window.innerHeight;
    }

    onMounted(() => window.addEventListener("resize", update));
    onUnmounted(() => window.removeEventListener("resize", update));

    return { width, height };
}

    <template>
    Width: {{ width }}
    Height: {{ height }}
</template>

<script setup lang="ts">
import { useWindowSize } from "@/composables/useWindowSize";

const { width, height } = useWindowSize();
</script>


  7. Folder Organization (Recommended)

    8. src/
├── composables/
│   ├── useCounter.ts
│   ├── useFetch.ts
│   ├── useDarkMode.ts
│   ├── useWindowSize.ts
│   └── useForm.ts
├── components/
├── pages/
└── ...


Custom Directives in Vue (Composition API + TypeScript)

  1. What Are Directives in Vue?



  2. Directive Lifecycle Hooks (TypeScript)
    3. import type { Directive, DirectiveBinding } from "vue";

export const myDirective: Directive = {
    created(el: HTMLElement, binding: DirectiveBinding) {},
    beforeMount(el: HTMLElement, binding: DirectiveBinding) {},
    mounted(el: HTMLElement, binding: DirectiveBinding) {},
    beforeUpdate(el: HTMLElement, binding: DirectiveBinding) {},
    updated(el: HTMLElement, binding: DirectiveBinding) {},
    beforeUnmount(el: HTMLElement, binding: DirectiveBinding) {},
    unmounted(el: HTMLElement, binding: DirectiveBinding) {},
};


  3. Your First Custom Directive: v-focus (Auto-Focus Input)

    4. src/
└── directives/
    └── vFocus.ts

    import type { Directive } from "vue";

export const vFocus: Directive = {
    mounted(el: HTMLElement) {
        el.focus();
    }
};

    import { createApp } from "vue";
import App from "./App.vue";
import { vFocus } from "./directives/vFocus";

const app = createApp(App);

app.directive("focus", vFocus);

app.mount("#app");

    <input v-focus />


  4. Example: v-color (Change Text Color Dynamically)
    5. export const vColor: Directive = {
    mounted(el: HTMLElement, binding) {
        el.style.color = String(binding.value);
    },
    updated(el: HTMLElement, binding) {
        el.style.color = String(binding.value);
    }
};

    <p v-color="'red'">Red text</p>
<p v-color="dynamicColor">Dynamic</p>


  5. Example: v-click-outside (Dropdown / Modal Usage)
    6. export const vClickOutside: Directive = {
    beforeMount(el: HTMLElement, binding) {
        el.__handler__ = (event: MouseEvent) => {
            if (!el.contains(event.target as Node)) {
                binding.value(event);
            }
        };
        document.addEventListener("click", el.__handler__);
    },
    unmounted(el: HTMLElement) {
        document.removeEventListener("click", el.__handler__);
    }
};

    <div v-click-outside="onOutside">
    Click outside me!
</div>

    <script setup lang="ts">
function onOutside() {
    alert("Clicked outside!");
}
</script>


  6. Example: v-autosize (Auto-Grow Textarea)
    7. export const vAutosize: Directive = {
    mounted(el: HTMLTextAreaElement) {
        const resize = () => {
            el.style.height = "auto";
            el.style.height = el.scrollHeight + "px";
        };

        el.__autosize__ = resize;
        el.addEventListener("input", resize);
        resize();
    },
    unmounted(el: HTMLTextAreaElement) {
        el.removeEventListener("input", el.__autosize__);
    }
};

    <textarea v-autosize></textarea>


  7. Local Registration (Composition API)

    8. <script setup lang="ts">
import { vColor } from "@/directives/vColor";

const directives = { color: vColor };
</script>

<template>
    <p v-color="'blue'">Hello</p>
</template>


  8. Passing Arguments and Modifiers
    9. <div v-example:foo.bar="123"></div>

    mounted(el, binding) {
    console.log(binding.value);      // 123
    console.log(binding.arg);        // "foo"
    console.log(binding.modifiers);  // { bar: true }
}


Vue Plugins (Composition API + TypeScript)

  1. What Are Plugins in Vue?

    2. app.use(SomePlugin);


  2. Plugin Structure (Composition API + TypeScript)

    3. import type { App } from "vue";

export default {
    install(app: App, options?: unknown) {
        // plugin logic
    }
};


  3. Create a Simple Plugin (Global Utility Function)

    4. // LoggerPlugin.ts
import type { App } from "vue";

export default {
    install(app: App) {
        app.config.globalProperties.$log = (message: string) => {
            console.log("[LOG]", message);
        };
    }
};

    import { createApp } from "vue";
import App from "./App.vue";
import LoggerPlugin from "./plugins/LoggerPlugin";

const app = createApp(App);

app.use(LoggerPlugin);

app.mount("#app");

    <script setup lang="ts">
const app = getCurrentInstance();
app?.proxy?.$log("Hello plugin!");
</script>


  4. Using TypeScript Types for Global Properties

    5. // src/types/vue.d.ts
import "vue";

declare module "vue" {
    interface ComponentCustomProperties {
        $log: (msg: string) => void;
    }
}


  5. Plugin Accepting Options

    6. import type { App } from "vue";

interface LoggerOptions {
    prefix?: string;
}

export default {
    install(app: App, options: LoggerOptions = {}) {
        const prefix = options.prefix ?? "LOG";

        app.config.globalProperties.$log = (msg: string) => {
            console.log(`[${prefix}]`, msg);
        };
    }
};

    app.use(LoggerPlugin, { prefix: "MyApp" });


  6. Providing Global Values via provide/inject

    7. import type { App } from "vue";

export const UserKey = Symbol("UserKey");

export default {
    install(app: App) {
        const user = {
            name: "Junzhe",
            role: "admin"
        };

        app.provide(UserKey, user);
    }
};

    <script setup lang="ts">
import { inject } from "vue";
import { UserKey } from "@/plugins/UserPlugin";

const user = inject(UserKey);

console.log(user?.name);
</script>


  7. Plugin Adding a Global Component

    8. export default {
    install(app: App) {
        app.component("BaseButton", BaseButton);
    }
};

    <BaseButton>Click</BaseButton>


  8. Plugin Adding a Global Directive
    9. export default {
    install(app: App) {
        app.directive("focus", {
            mounted(el: HTMLElement) {
                el.focus();
            }
        });
    }
};

    <input v-focus />


  9. A Realistic Example: Toast Notification Plugin
    10. import type { App } from "vue";

interface ToastOptions {
    duration?: number;
}

export default {
    install(app: App, options: ToastOptions = {}) {
        const duration = options.duration ?? 2000;

        const toast = (msg: string) => {
            const div = document.createElement("div");
            div.textContent = msg;
            div.className = "toast";
            document.body.appendChild(div);

            setTimeout(() => {
                document.body.removeChild(div);
            }, duration);
        };

        app.config.globalProperties.$toast = toast;
        app.provide("toast", toast);
    }
};

    <script setup lang="ts">
const app = getCurrentInstance();
app?.proxy?.$toast("Hello!");
</script>