### Migrating Plugin Installation to Vue 3

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api.md

Demonstrates how to transition from global automatic plugin installation to explicit app instance registration using app.use().

```javascript
/* Vue 2 style (deprecated) */
if (inBrowser && window.Vue) {
  window.Vue.use(VueRouter)
}

/* Vue 3 style */
const app = createApp(MyApp)
app.use(VueRouter)
```

--------------------------------

### Initialize a new Vue 3 project with Vite

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/recommendations.md

Uses the create-vue scaffolding tool to generate a new Vue 3 project powered by Vite. This is the recommended approach for starting new projects.

```shell
npm init vue@3
```

--------------------------------

### Importing VueMastery Widget in Vue SFC

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/index.md

Demonstrates how to import and register a custom Vue component using the script setup syntax. This is commonly used in Vue 3 SFCs to include external widgets or components.

```vue
<script setup>
import VueMasteryWidget from './VueMastery.vue'
</script>
<VueMasteryWidget/>
```

--------------------------------

### Migration: propsData to createApp

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/props-data.md

This guide demonstrates how to replace the deprecated propsData option with the second argument of the createApp function in Vue 3.

```APIDOC
## Migration: propsData Removal

### Description
The `propsData` option used during Vue instance creation in 2.x is removed in Vue 3. To pass props to the root component, use the second argument of `createApp`.

### 2.x Syntax (Deprecated)
```js
new Comp({
  propsData: {
    username: 'Evan'
  }
})
```

### 3.x Syntax (Recommended)
```js
const app = createApp(
  { /* component options */ },
  { username: 'Evan' } // Props passed as second argument
)
```
```

--------------------------------

### Vue 2 Custom Directive Example

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/custom-directives.md

Demonstrates the syntax for creating a custom directive in Vue 2 using lifecycle hooks like 'bind'. It highlights how to apply styles to an element based on a directive value.

```html
<p v-highlight="'yellow'">Highlight this text bright yellow</p>
```

```javascript
Vue.directive('highlight', {
  bind(el, binding, vnode) {
    el.style.background = binding.value
  }
})
```

--------------------------------

### Vue 3 Event Bus with tiny-emitter

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/events-api.md

Provides an example of replacing the Vue 2 event bus pattern in Vue 3 using the 'tiny-emitter' library. This wrapper mimics the old $on, $off, $once, and $emit API.

```javascript
import emitter from 'tiny-emitter/instance'

export default {
  $on: (...args) => emitter.on(...args),
  $once: (...args) => emitter.once(...args),
  $off: (...args) => emitter.off(...args),
  $emit: (...args) => emitter.emit(...args)
}
```

--------------------------------

### Migrate Vue 2 Global API to Vue 3 Import in Plugins

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api-treeshaking.md

Demonstrates the transition of using Vue 2's global API, such as `nextTick`, within a plugin's `install` function to Vue 3's explicit import method. This ensures compatibility with Vue 3's composition API and module system.

```javascript
const plugin = {
  install: Vue => {
    Vue.nextTick(() => {
      // ...
    })
  }
}
```

```javascript
import { nextTick } from 'vue'

const plugin = {
  install: app => {
    nextTick(() => {
      // ...
    })
  }
}
```

--------------------------------

### Migrate Lifecycle Hooks to Vue 3 Naming Conventions

Source: https://context7.com/vuejs/v3-migration-guide/llms.txt

Documents the renaming of lifecycle hooks for consistency, specifically 'beforeDestroy' to 'beforeUnmount' and 'destroyed' to 'unmounted'. Also includes examples of the Composition API equivalents.

```javascript
// Vue 2 - Lifecycle hooks
export default {
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {}
}

// Vue 3 - Lifecycle hooks
export default {
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {},
  unmounted() {}
}

// Vue 3 - Composition API lifecycle hooks
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'

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

    onUnmounted(() => {
      console.log('Component unmounted')
    })
  }
}
```

--------------------------------

### Vue 3 Custom Directive Syntax and Lifecycle

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/custom-directives.md

Illustrates the new custom directive API in Vue 3, which unifies directive hooks with component lifecycle methods. It shows the available hooks and provides an example of a directive using 'beforeMount'.

```javascript
const MyDirective = {
  created(el, binding, vnode, prevVnode) {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {},
  unmounted() {}
}
```

```html
<p v-highlight="'yellow'">Highlight this text bright yellow</p>
```

```javascript
const app = Vue.createApp({})

app.directive('highlight', {
  beforeMount(el, binding, vnode) {
    el.style.background = binding.value
  }
})
```

--------------------------------

### Vue 2 Filters Removal and Vue 3 Replacements

Source: https://context7.com/vuejs/v3-migration-guide/llms.txt

Illustrates the removal of filters in Vue 3 and provides examples of replacing them with computed properties in component templates or using global properties for reusable filter functions.

```vue
<!-- Vue 2 - Using filters -->
<template>
  <p>{{ accountBalance | currencyUSD }}</p>
</template>

<script>
export default {
  props: ['accountBalance'],
  filters: {
    currencyUSD(value) {
      return '$' + value
    }
  }
}
</script>

<!-- Vue 3 - Using computed property -->
<template>
  <p>{{ accountInUSD }}</p>
</template>

<script>
export default {
  props: ['accountBalance'],
  computed: {
    accountInUSD() {
      return '$' + this.accountBalance
    }
  }
}
</script>
```

```javascript
// Vue 3 - Global filters via globalProperties
const app = createApp(App)

app.config.globalProperties.$filters = {
  currencyUSD(value) {
    return '$' + value
  },
  dateFormat(value, format) {
    return new Intl.DateTimeFormat('en-US').format(new Date(value))
  }
}

// Usage in template: {{ $filters.currencyUSD(accountBalance) }}
```

--------------------------------

### Create App Instance in Vue 3

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api.md

Demonstrates the creation of an application instance using `createApp` in Vue 3. This is the recommended way to initialize Vue applications, providing isolated configurations.

```javascript
import { createApp } from 'vue'

const app = createApp({})
```

--------------------------------

### Mounting a Vue 3 Application Instance

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api.md

Shows the standard pattern for initializing an application with createApp and mounting it to a DOM element.

```javascript
import { createApp } from 'vue'
import MyApp from './MyApp.vue'

const app = createApp(MyApp)
app.mount('#app')
```

--------------------------------

### Initialize Application Instance with createApp

Source: https://context7.com/vuejs/v3-migration-guide/llms.txt

Demonstrates the shift from the Vue 2 global API to the Vue 3 application instance pattern. This change isolates app configurations and improves modularity.

```javascript
// Vue 2 - Global API approach
import Vue from 'vue'

Vue.component('button-counter', {
  data: () => ({ count: 0 }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})

Vue.directive('focus', {
  inserted: (el) => el.focus()
})

Vue.mixin({
  created() {
    console.log('Mixin created hook')
  }
})

Vue.prototype.$http = axios

new Vue({ el: '#app' })

// Vue 3 - Application instance approach
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.component('button-counter', {
  data: () => ({ count: 0 }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})

app.directive('focus', {
  mounted: (el) => el.focus()
})

app.mixin({
  created() {
    console.log('Mixin created hook')
  }
})

app.config.globalProperties.$http = axios

app.mount('#app')
```

--------------------------------

### Registering Components and Directives on App Instance

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api.md

Demonstrates registering components and directives locally to an app instance to avoid global pollution.

```javascript
const app = createApp(MyApp)

app.component('button-counter', {
  data: () => ({ count: 0 }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})

app.directive('focus', {
  mounted: (el) => el.focus()
})

app.mount('#app')
```

--------------------------------

### Vue 3 Component with emits Option and Validator

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/emits-option.md

The 'emits' option in Vue 3 can also be an object, enabling the definition of validators for event arguments. This example shows how to define a validator for the 'error' event.

```vue
export default {
  props: ['text'],
  emits: {
    accepted: () => true,
    rejected: () => true,
    error: (err) => {
      // validate error payload
      return typeof err === 'string'
    }
  }
}
```

--------------------------------

### Compare Async Component Loader Syntax

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/async-components.md

Shows the difference between Vue 2.x syntax, which accepted resolve/reject arguments, and Vue 3.x syntax, which requires the loader to return a Promise.

```javascript
// 2.x version
const oldAsyncComponent = (resolve, reject) => {
  /* ... */
}

// 3.x version
const asyncComponent = defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {
      /* ... */
    })
)
```

--------------------------------

### Vue 3 Component With emits Option

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/emits-option.md

Vue 3's 'emits' option allows explicit declaration of emitted events. This example demonstrates a Vue 3 component that declares the 'accepted' event it can emit.

```vue
<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text'],
    emits: ['accepted']
  }
</script>
```

--------------------------------

### Configure Migration Build with @vue/compat

Source: https://context7.com/vuejs/v3-migration-guide/llms.txt

Shows how to set up the migration build in package.json and build tools like Vite or Webpack. This allows running Vue 3 with Vue 2-compatible behavior.

```json
{
  "dependencies": {
    "vue": "^3.1.0",
    "@vue/compat": "^3.1.0"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "^3.1.0"
  }
}
```

```javascript
// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  resolve: {
    alias: {
      vue: '@vue/compat'
    }
  },
  plugins: [
    vue({
      template: {
        compilerOptions: {
          compatConfig: {
            MODE: 2
          }
        }
      }
    })
  ]
}
```

```javascript
// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      vue: '@vue/compat'
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: {
            compatConfig: {
              MODE: 2
            }
          }
        }
      }
    ]
  }
}
```

--------------------------------

### Sharing App Configurations via Factory Function

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api.md

Demonstrates using a factory function to create multiple app instances that share common configurations like directives.

```javascript
const createMyApp = (options) => {
  const app = createApp(options)
  app.directive('focus', { /* ... */ })
  return app
}

createMyApp(Foo).mount('#foo')
createMyApp(Bar).mount('#bar')
```

--------------------------------

### Vue 3 App Instance Creation

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api.md

Demonstrates the creation of an application instance in Vue 3 using the `createApp` API.

```APIDOC
## Vue 3 App Instance Creation

### Description
Creates a new Vue application instance using the `createApp` function, which returns an app instance with its own isolated configuration.

### Method
Imported Function

### Endpoint
N/A

### Parameters
N/A

### Request Example
```javascript
import { createApp } from 'vue'

const app = createApp({})
```

### Response
N/A
```

--------------------------------

### Application Instance API

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api.md

Methods for initializing, configuring, and mounting a Vue 3 application instance.

```APIDOC
## createApp(options)

### Description
Initializes a new Vue application instance. This replaces the global Vue constructor from Vue 2.

### Method
Function

### Parameters
- **options** (Object) - Required - The root component options or component object.

### Response
- **app** (Object) - The application instance containing methods like .use(), .mount(), .component(), .directive(), and .provide().

---

## app.use(plugin)

### Description
Installs a Vue.js plugin. In Vue 3, plugins must be installed on the specific app instance rather than globally.

### Parameters
- **plugin** (Object|Function) - Required - The plugin to install.

---

## app.mount(domTarget)

### Description
Mounts the application instance to a DOM element.

### Parameters
- **domTarget** (String|Element) - Required - The CSS selector or DOM element to mount the app into.

---

## app.provide(key, value)

### Description
Provides a value that can be injected into any component within the application tree.

### Parameters
- **key** (String|Symbol) - Required - The key used for injection.
- **value** (Any) - Required - The value to provide.
```

--------------------------------

### Using Provide and Inject in Vue 3

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api.md

Explains how to provide dependencies at the app level and inject them into child components.

```javascript
// Entry point
app.provide('guide', 'Vue 3 Guide')

// Child component
export default {
  inject: { book: { from: 'guide' } },
  template: `<div>{{ book }}</div>`
}
```

--------------------------------

### Vue 3 Component Re-emitting Native Event (With emits Declaration)

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/emits-option.md

To prevent double event firing in Vue 3 when re-emitting native events, declare the event in the 'emits' option. This example shows the correct way to declare the 'click' event.

```vue
<template>
  <button v-on:click="$emit('click', $event)">OK</button>
</template>
<script>
export default {
  emits: ['click'] // declared event
}
</script>
```

--------------------------------

### Vue 3 Component Re-emitting Native Event (Without emits Declaration)

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/emits-option.md

This example illustrates a Vue 3 component that re-emits a native 'click' event without declaring it in the 'emits' option. This can lead to the event being triggered twice due to automatic attribute binding.

```vue
<template>
  <button v-on:click="$emit('click', $event)">OK</button>
</template>
<script>
export default {
  emits: [] // without declared event
}
</script>
```

--------------------------------

### Create App Instance from CDN Build in Vue 3

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api.md

Shows how to create an application instance using `createApp` when using a CDN build of Vue. The `createApp` function is exposed on the global `Vue` object.

```javascript
const { createApp } = Vue

const app = createApp({})
```

--------------------------------

### Vue 2 Component Without emits Option

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/emits-option.md

In Vue 2, components can emit events using $emit, but there's no explicit way to declare these events within the component's definition. This example shows a basic Vue 2 component with props and an emitted event.

```vue
<template>
  <div>
    <p>{{ text }}</p>
    <button v-on:click="$emit('accepted')">OK</button>
  </div>
</template>
<script>
  export default {
    props: ['text']
  }
</script>
```

--------------------------------

### Vue 3 CDN App Instance Creation

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api.md

Shows how to create a Vue 3 application instance when using the CDN build.

```APIDOC
## Vue 3 CDN App Instance Creation

### Description
Creates a new Vue application instance using `createApp` exposed on the global `Vue` object when using a CDN build.

### Method
Global API (CDN)

### Endpoint
N/A

### Parameters
N/A

### Request Example
```javascript
const { createApp } = Vue

const app = createApp({})
```

### Response
N/A
```

--------------------------------

### Vue 2 Application Mounting

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/mount-changes.md

Demonstrates the Vue 2 syntax where the application instance replaces the mounting element. This uses the 'el' property or the '$mount' method.

```javascript
new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  template: `
    <div id="rendered">{{ message }}</div>
  `
})

const app = new Vue({
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  template: `
    <div id="rendered">{{ message }}</div>
  `
})

app.$mount('#app')
```

--------------------------------

### Vue 3 Application Mounting

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/mount-changes.md

Demonstrates the Vue 3 syntax using 'createApp' and 'mount', where the rendered content is injected as a child of the target container.

```javascript
const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    }
  },
  template: `
    <div id="rendered">{{ message }}</div>
  `
})

app.mount('#app')
```

--------------------------------

### Vue 3: `createApp` Replaces `Vue.extend` for Component Mounting

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api.md

Vue 3 removes `Vue.extend`. Component instances should now be created and mounted using the `createApp` global API, which takes component options directly.

```javascript
// before - Vue 2
const Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data() {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
new Profile().$mount('#mount-point')

// after - Vue 3
const Profile = {
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data() {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
}

Vue.createApp(Profile).mount('#mount-point')
```

--------------------------------

### Vue 3 App-Level Provide/Inject with Composition API

Source: https://context7.com/vuejs/v3-migration-guide/llms.txt

Illustrates how to provide values at the application level using `app.provide()` and inject them into components using the `inject` function from the Composition API. This approach offers a more flexible way to manage dependencies.

```javascript
import { inject } from 'vue'

export default {
  setup() {
    const guide = inject('guide')
    const api = inject('apiClient')
    const config = inject('config', { theme: 'light' })

    return { guide, api, config }
  }
}
```

--------------------------------

### Define Async Components in Vue 3

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/async-components.md

Demonstrates how to use the defineAsyncComponent helper to create async components with and without configuration options like loading and error components.

```javascript
import { defineAsyncComponent } from 'vue'
import ErrorComponent from './components/ErrorComponent.vue'
import LoadingComponent from './components/LoadingComponent.vue'

// Async component without options
const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

// Async component with options
const asyncModalWithOptions = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})
```

--------------------------------

### Vue 3 App-Level Provide/Inject with Options API

Source: https://context7.com/vuejs/v3-migration-guide/llms.txt

Demonstrates how to provide values at the application level using `app.provide()` and inject them into child components using the `inject` option in the Options API. This pattern facilitates dependency injection across the entire Vue application.

```javascript
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.provide('guide', 'Vue 3 Guide')
app.provide('apiClient', axios)
app.provide('config', { theme: 'dark' })

app.mount('#app')

// Child component using inject
export default {
  inject: {
    book: {
      from: 'guide'
    },
    api: {
      from: 'apiClient'
    },
    appConfig: {
      from: 'config',
      default: () => ({ theme: 'light' })
    }
  },
  template: `<div>{{ book }}</div>`
}
```

--------------------------------

### Vue 3.x v-model arguments and multiple bindings

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/v-model.md

Shows how to use v-model arguments to replace .sync and support multiple bindings on a single component.

```html
<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

<!-- shorthand for: -->

<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>
```

--------------------------------

### Migrating to Multi-Root Components in Vue 3

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/new/fragments.md

Demonstrates the transition from a single-root wrapper div in Vue 2 to a multi-root structure in Vue 3. Note the use of v-bind='$attrs' to handle attribute inheritance in the new structure.

```html
<!-- Vue 2.x: Requires single root -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>
```

```html
<!-- Vue 3.x: Supports multiple roots -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>
```

--------------------------------

### Vue 3.x v-model syntax

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/v-model.md

Demonstrates the standardized Vue 3.x v-model syntax using modelValue and update:modelValue.

```html
<ChildComponent v-model="pageTitle" />

<!-- shorthand for: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>
```

--------------------------------

### Vue 2 Event Bus Implementation

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/events-api.md

Demonstrates the implementation of an event bus in Vue 2 using a Vue instance. This pattern allowed for global event listeners across the application.

```javascript
const eventBus = new Vue()

export default eventBus
```

```javascript
import eventBus from './eventBus'

export default {
  mounted() {
    eventBus.$on('custom-event', () => {
      console.log('Custom event triggered!')
    })
  },
  beforeDestroy() {
    eventBus.$off('custom-event')
  }
}
```

```javascript
import eventBus from './eventBus'

export default {
  methods: {
    callGlobalCustomEvent() {
      eventBus.$emit('custom-event')
    }
  }
}
```

--------------------------------

### Global API Usage Migration

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api-treeshaking.md

Demonstrates the transition from global Vue object access to named imports for tree-shakeable APIs like nextTick.

```APIDOC
## Usage of nextTick

### Description
In Vue 3, global APIs are no longer attached to the Vue object. Instead, they must be imported as named exports from the 'vue' package to enable tree-shaking.

### Method
N/A (Module Import)

### Parameters
- **callback** (Function) - Optional - A function to be executed after the next DOM update cycle.

### Request Example
// Vue 2.x (Deprecated)
import Vue from 'vue'
Vue.nextTick(() => { /* ... */ })

// Vue 3.x (Recommended)
import { nextTick } from 'vue'
nextTick(() => { /* ... */ })

### Response
- **Promise** (Promise) - If no callback is provided, returns a promise that resolves after the next DOM update.
```

--------------------------------

### Configure Global Compatibility Settings

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/migration-build.md

Demonstrates how to globally disable or enable specific compatibility features using the configureCompat function. This allows developers to toggle Vue 3 behaviors across the entire application.

```javascript
import { configureCompat } from 'vue'

// disable compat for certain features
configureCompat({
  FEATURE_ID_A: false,
  FEATURE_ID_B: false
})

// default everything to Vue 3 behavior, and only enable compat
// for certain features
configureCompat({
  MODE: 3,
  FEATURE_ID_A: true,
  FEATURE_ID_B: true
})
```

--------------------------------

### Defining Async Components

Source: https://context7.com/vuejs/v3-migration-guide/llms.txt

Explains the transition to using the 'defineAsyncComponent' helper function for lazy-loading components. It covers both simple imports and advanced configurations with loading and error states.

```javascript
import { defineAsyncComponent } from 'vue'
import ErrorComponent from './ErrorComponent.vue'
import LoadingComponent from './LoadingComponent.vue'

const asyncModalWithOptions = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
})
```

--------------------------------

### Configure Per-Component Compatibility

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/migration-build.md

Shows how to use the compatConfig option within a component definition to opt-in to Vue 3 behavior or toggle specific features for that component only.

```javascript
export default {
  compatConfig: {
    MODE: 3, // opt-in to Vue 3 behavior for this component only
    FEATURE_ID_A: true // features can also be toggled at component level
  }
}
```

--------------------------------

### Create Local Vue Instance for Testing in Vue 2

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api.md

Illustrates the use of `createLocalVue` from `@vue/test-utils` to create isolated Vue constructors for testing purposes in Vue 2. This is a workaround for global state pollution.

```javascript
import { createLocalVue, mount } from '@vue/test-utils'

// create an extended `Vue` constructor
const localVue = createLocalVue()

// install a plugin “globally” on the “local” Vue constructor
localVue.use(MyPlugin)

// pass the `localVue` to the mount options
mount(Component, { localVue })
```

--------------------------------

### Vue 2 Global API to Vue 3 Instance API Mapping

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api.md

Provides a reference table mapping Vue 2 global APIs to their corresponding Vue 3 app instance APIs.

```APIDOC
## Vue 2 Global API to Vue 3 Instance API Mapping

### Description
This table outlines the migration of Vue 2's global APIs, which mutated global behavior, to their equivalent APIs on the Vue 3 application instance.

### Method
Reference Table

### Endpoint
N/A

### Parameters
N/A

### Request Example
| 2.x Global API             | 3.x Instance API (`app`)                                                                                                        |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
| Vue.config                 | app.config                                                                                                                      |
| Vue.config.productionTip   | _removed_ ([see below](#config-productiontip-removed))                                                                          |
| Vue.config.ignoredElements | app.config.compilerOptions.isCustomElement ([see below](#config-ignoredelements-is-now-config-compileroptions-iscustomelement)) |
| Vue.component              | app.component                                                                                                                   |
| Vue.directive              | app.directive                                                                                                                   |
| Vue.mixin                  | app.mixin                                                                                                                       |
| Vue.use                    | app.use ([see below](#a-note-for-plugin-authors))                                                                               |
| Vue.prototype              | app.config.globalProperties ([see below](#vue-prototype-replaced-by-config-globalproperties))                                   |
| Vue.extend                 | _removed_ ([see below](#vue-extend-removed))                                                                                    |

### Response
N/A
```

--------------------------------

### Functional Components

Source: https://context7.com/vuejs/v3-migration-guide/llms.txt

Describes the transition of functional components from options-based objects to plain functions.

```APIDOC
## Functional Components

### Description
Functional components are now created as plain functions that receive `props` and `context` as arguments, rather than being defined as objects with a `functional: true` property.

### Parameters
- **props** (Object) - Required - The component properties.
- **context** (Object) - Required - Contains attrs, slots, and emit methods.
```

--------------------------------

### Configure Compatibility Features

Source: https://context7.com/vuejs/v3-migration-guide/llms.txt

Explains how to control compatibility features globally or on a per-component basis. This enables developers to opt-in to Vue 3 behaviors incrementally.

```javascript
// Global configuration - disable specific compat features
import { configureCompat } from 'vue'

configureCompat({
  FEATURE_ID_A: false,
  FEATURE_ID_B: false
})

// Global configuration - default to Vue 3 mode, enable specific compat features
import { configureCompat } from 'vue'

configureCompat({
  MODE: 3,
  COMPONENT_V_MODEL: true,
  INSTANCE_EVENT_EMITTER: true
})

// Per-component configuration
export default {
  compatConfig: {
    MODE: 3,
    RENDER_FUNCTION: true
  },
  data() {
    return { count: 0 }
  }
}
```

--------------------------------

### Async Components

Source: https://context7.com/vuejs/v3-migration-guide/llms.txt

Details the requirement to use the defineAsyncComponent helper for loading components asynchronously.

```APIDOC
## defineAsyncComponent

### Description
Async components must now be explicitly defined using the `defineAsyncComponent` helper function. This replaces the simple function-based import syntax used in Vue 2.

### Parameters
- **loader** (Function) - Required - A function returning a Promise that resolves to the component.
- **delay** (Number) - Optional - Delay before showing the loading component.
- **timeout** (Number) - Optional - Time to wait before showing the error component.

### Request Example
import { defineAsyncComponent } from 'vue';
const AsyncComp = defineAsyncComponent(() => import('./MyComponent.vue'));
```

--------------------------------

### v-model Component Binding

Source: https://context7.com/vuejs/v3-migration-guide/llms.txt

Explains the migration of v-model from using 'value'/'input' to 'modelValue'/'update:modelValue' and the introduction of named v-model arguments.

```APIDOC
## v-model Component API

### Description
Vue 3 updates the v-model directive to use `modelValue` as the default prop and `update:modelValue` as the default event. It also introduces named v-model bindings (e.g., `v-model:title`) to replace the deprecated `.sync` modifier.

### Usage
- **Default**: `v-model="data"` maps to `:modelValue` and `@update:modelValue`.
- **Named**: `v-model:arg="data"` maps to `:arg` and `@update:arg`.

### Request Example
<ChildComponent v-model:title="pageTitle" />

### Response
- **modelValue** (any) - The current value of the bound property.
- **update:modelValue** (event) - Emitted when the value changes.
```

--------------------------------

### Migrating Global Filters in Vue 3.x using globalProperties

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/filters.md

Illustrates how to make globally registered filters accessible in all components in Vue 3.x by using `app.config.globalProperties`. This method allows for method-based filters to be called from templates.

```javascript
// main.js
const app = createApp(App)

app.config.globalProperties.$filters = {
  currencyUSD(value) {
    return '$' + value
  }
}
```

```html
<template>
  <h1>Bank Account Balance</h1>
  <p>{{ $filters.currencyUSD(accountBalance) }}</p>
</template>
```

--------------------------------

### Migrate VNode Lifecycle Event Listeners

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/vnode-lifecycle-events.md

Demonstrates the syntax change for listening to component lifecycle events. Vue 2 uses the 'hook:' prefix, while Vue 3 uses the 'vue:' prefix.

```html
<!-- Vue 2 Syntax -->
<child-component @hook:updated="onUpdated">

<!-- Vue 3 Syntax -->
<child-component @vue:updated="onUpdated">
```

--------------------------------

### Migrate Transition as Root Component

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/transition-as-root.md

Demonstrates the Vue 3 migration strategy by moving the conditional rendering logic inside the component using a prop. This ensures the <transition> component reacts to internal state changes rather than external component toggling.

```vue
<template>
  <transition>
    <div v-if="show" class="modal"><slot/></div>
  </transition>
</template>
<script>
export default {
  props: ['show']
}
</script>
```

```html
<!-- usage -->
<modal :show="showModal">hello</modal>
```

--------------------------------

### Vue 2 Global Component Registration

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api.md

Demonstrates how components were registered globally in Vue 2 using `Vue.component`.

```APIDOC
## Vue 2 Global Component Registration

### Description
Registers a global component named 'button-counter' in Vue 2.

### Method
Global API

### Endpoint
N/A

### Parameters
N/A

### Request Example
```javascript
Vue.component('button-counter', {
  data: () => ({
    count: 0
  }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})
```

### Response
N/A
```

--------------------------------

### Vue 2.x v-model and model option syntax

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/v-model.md

Demonstrates the Vue 2.x approach to v-model using the model component option to customize prop and event names.

```html
<ChildComponent v-model="pageTitle" />
```

```javascript
export default {
  model: {
    prop: 'title',
    event: 'change'
  },
  props: {
    value: String,
    title: {
      type: String,
      default: 'Default title'
    }
  }
}
```

--------------------------------

### Implement Tree-shakable Global APIs in Vue 3

Source: https://context7.com/vuejs/v3-migration-guide/llms.txt

Demonstrates the shift from importing the global Vue object to using named exports. This change enables tree-shaking, allowing for smaller bundle sizes by only including the APIs actually used in the application.

```javascript
// Vue 2 - Global API not tree-shakeable
import Vue from 'vue'

Vue.nextTick(() => {
  // DOM manipulation
})

// Vue 3 - Named exports for tree-shaking
import { nextTick, reactive, ref, computed, watch } from 'vue'

nextTick(() => {
  // DOM manipulation
})

// Using reactive APIs
const state = reactive({ count: 0 })
const count = ref(0)
const doubled = computed(() => count.value * 2)

watch(count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`)
})
```

--------------------------------

### Transition Group with Tag Attribute

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/transition-group.md

Demonstrates how to define a root element for transition-group using the tag attribute. This ensures compatibility with existing styling that expects a specific container element.

```html
<transition-group tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</transition-group>
```

```html
<transition-group tag="span">
  <!-- content -->
</transition-group>
```

--------------------------------

### Vue 2 Events API Removal and Vue 3 Alternatives

Source: https://context7.com/vuejs/v3-migration-guide/llms.txt

Demonstrates the removal of the `$on`, `$off`, and `$once` instance methods in Vue 3 and suggests using external event emitter libraries or root component props for event bus patterns.

```javascript
// Vue 2 - Event bus using Vue instance
const eventBus = new Vue()

// ChildComponent.vue
export default {
  mounted() {
    eventBus.$on('custom-event', this.handleEvent)
  },
  beforeDestroy() {
    eventBus.$off('custom-event', this.handleEvent)
  }
}

// ParentComponent.vue
eventBus.$emit('custom-event', data)

// Vue 3 - Use external library like mitt or tiny-emitter
import emitter from 'tiny-emitter/instance'

export const eventBus = {
  $on: (...args) => emitter.on(...args),
  $once: (...args) => emitter.once(...args),
  $off: (...args) => emitter.off(...args),
  $emit: (...args) => emitter.emit(...args)
}

// Vue 3 - Root component events via props
import { createApp } from 'vue'
import App from './App.vue'

createApp(App, {
  onExpand() {
    console.log('expand event received')
  }
})
```

--------------------------------

### Vue 2 KeyCode and Alias Usage

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/keycode-modifiers.md

Demonstrates the legacy approach in Vue 2 where numeric keyCodes and custom aliases defined in config.keyCodes were used as event modifiers.

```html
<!-- keyCode version -->
<input v-on:keyup.13="submit" />

<!-- alias version -->
<input v-on:keyup.enter="submit" />
```

```javascript
Vue.config.keyCodes = {
  f1: 112
};
```

```html
<!-- keyCode version -->
<input v-on:keyup.112="showHelpText" />

<!-- custom alias version -->
<input v-on:keyup.f1="showHelpText" />
```

--------------------------------

### Vue 2 Testing with `createLocalVue`

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api.md

Shows how `createLocalVue` was used in Vue 2 testing utilities to isolate configurations for specific test cases.

```APIDOC
## Vue 2 Testing with `createLocalVue`

### Description
Uses `createLocalVue` from `@vue/test-utils` to create an isolated Vue constructor for testing, allowing plugins to be installed without affecting the global Vue instance.

### Method
Testing Utility

### Endpoint
N/A

### Parameters
N/A

### Request Example
```javascript
import { createLocalVue, mount } from '@vue/test-utils'

// create an extended `Vue` constructor
const localVue = createLocalVue()

// install a plugin "globally" on the "local" Vue constructor
localVue.use(MyPlugin)

// pass the `localVue` to the mount options
mount(Component, { localVue })
```

### Response
N/A
```

--------------------------------

### Vue 3 Functional Component (Function Creation)

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/functional-components.md

Illustrates the Vue 3 syntax for functional components created as plain functions, receiving `props` and `context` arguments. The `h` function needs to be imported.

```javascript
import { h } from 'vue'

const DynamicHeading = (props, context) => {
  return h(`h${props.level}`, context.attrs, context.slots)
}

DynamicHeading.props = ['level']

export default DynamicHeading
```

--------------------------------

### Configure build tools for Vue 3 compatibility mode

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/migration-build.md

Configures various build tools to alias 'vue' to '@vue/compat' and enables compatibility mode (MODE: 2) in the compiler options.

```javascript
// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.resolve.alias.set('vue', '@vue/compat')
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        return {
          ...options,
          compilerOptions: {
            compatConfig: { MODE: 2 }
          }
        }
      })
  }
}
```

```javascript
// webpack.config.js
module.exports = {
  resolve: { alias: { vue: '@vue/compat' } },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          compilerOptions: { compatConfig: { MODE: 2 } }
        }
      }
    ]
  }
}
```

```javascript
// vite.config.js
export default {
  resolve: { alias: { vue: '@vue/compat' } },
  plugins: [
    vue({
      template: {
        compilerOptions: { compatConfig: { MODE: 2 } }
      }
    })
  ]
}
```

--------------------------------

### Register Global Component in Vue 2

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api.md

Demonstrates how to register a global component using the `Vue.component` API in Vue 2. This method mutates the global Vue behavior.

```javascript
Vue.component('button-counter', {
  data: () => ({
    count: 0
  }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})
```

--------------------------------

### Vue 3 Fragments for Multi-root Components

Source: https://context7.com/vuejs/v3-migration-guide/llms.txt

Explains Vue 3's support for components with multiple root nodes (fragments) and demonstrates how to explicitly bind attributes using `v-bind="$attrs"` when multiple roots are present, unlike Vue 2's single root requirement.

```vue
<!-- Vue 2 - Single root required -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

<!-- Vue 3 - Multiple roots supported -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>
```

--------------------------------

### Render Function API

Source: https://context7.com/vuejs/v3-migration-guide/llms.txt

Covers the changes to the render function, including the global h import and the flattening of VNode props.

```APIDOC
## Render Function API

### Description
In Vue 3, the `h` function is imported globally. The VNode data structure has been flattened, meaning attributes, events, and props are no longer nested in specific objects like `attrs` or `on`.

### Usage
- **Props**: Passed directly in the second argument of `h()`.
- **Events**: Prefixed with 'on' (e.g., `onClick`).
```

--------------------------------

### Tree-shakeable internal component rendering

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/global-api-treeshaking.md

Illustrates how the Vue 3 compiler generates code that imports only the necessary components and helpers, such as Transition and vShow, ensuring unused features are excluded from the bundle.

```javascript
import { h, Transition, withDirectives, vShow } from 'vue';

export function render() {
  return h(Transition, [withDirectives(h('div', 'hello'), [[vShow, this.ok]])]);
}
```

--------------------------------

### Vue 2.x Filter Syntax for Text Formatting

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/filters.md

Demonstrates the syntax for using filters in Vue 2.x to apply common text formatting, such as currency conversion. Filters are defined within the component's `filters` option.

```html
<template>
  <h1>Bank Account Balance</h1>
  <p>{{ accountBalance | currencyUSD }}</p>
</template>

<script>
  export default {
    props: {
      accountBalance: {
        type: Number,
        required: true
      }
    },
    filters: {
      currencyUSD(value) {
        return '$' + value
      }
    }
  }
</script>
```

--------------------------------

### Vue 2.x Transition CSS Syntax

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/transition.md

The legacy CSS syntax used in Vue 2.x for transition states. It utilizes 'v-enter' and 'v-leave' for initial states, which was identified as confusing.

```css
.v-enter,
.v-leave-to {
  opacity: 0;
}

.v-leave,
.v-enter-to {
  opacity: 1;
}
```

--------------------------------

### Vue 2.x Data Option Syntax (Object vs. Function)

Source: https://github.com/vuejs/v3-migration-guide/blob/main/src/breaking-changes/data-option.md

Demonstrates the flexibility of the `data` option in Vue 2.x, which allowed both plain object and function declarations. The object declaration was primarily for root instances and could lead to confusion.

```html
<script>
  const app = new Vue({
    data: {
      apiKey: 'a1b2c3'
    }
  })
</script>

<script>
  const app = new Vue({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  })
</script>
```