### Install Dependencies and Run Dev Server with Bun

Source: https://vuejs.org/guide/quick-start.html

After creating a Vue project, navigate to the project directory, install dependencies using Bun, and start the development server.

```bash
$ cd <your-project-name>
$ bun install
$ bun run dev
```

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

### Configuration Guides

Source: https://vuejs.org/api/compile-time-flags.html

Examples of how to configure compile-time flags using different build tools.

```APIDOC
### Vite 
`@vitejs/plugin-vue` automatically provides default values for these flags. To change the default values, use Vite's `define` config option:

```javascript
// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    // enable hydration mismatch details in production build
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
  }
})
```

### vue-cli 
`@vue/cli-service` automatically provides default values for some of these flags. To configure /change the values:

```javascript
// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.plugin('define').tap((definitions) => {
      Object.assign(definitions[0], {
        __VUE_OPTIONS_API__: 'true',
        __VUE_PROD_DEVTOOLS__: 'false',
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
      })
      return definitions
    })
  }
}
```

### webpack 
Flags should be defined using webpack's DefinePlugin:

```javascript
// webpack.config.js
module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: 'true',
      __VUE_PROD_DEVTOOLS__: 'false',
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
    })
  ]
}
```

### Rollup 
Flags should be defined using @rollup/plugin-replace:

```javascript
// rollup.config.js
import replace from '@rollup/plugin-replace'

export default {
  plugins: [
    replace({
      __VUE_OPTIONS_API__: 'true',
      __VUE_PROD_DEVTOOLS__: 'false',
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
    })
  ]
}
```
```

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

### Install Dependencies and Run Dev Server with npm

Source: https://vuejs.org/guide/quick-start.html

After creating a Vue project, navigate to the project directory, install dependencies using npm, and start the development server.

```bash
$ cd <your-project-name>
$ npm install
$ npm run dev
```

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

### Install Dependencies and Run Dev Server with pnpm

Source: https://vuejs.org/guide/quick-start.html

After creating a Vue project, navigate to the project directory, install dependencies using pnpm, and start the development server.

```bash
$ cd <your-project-name>
$ pnpm install
$ pnpm run dev
```

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

### Install Dependencies and Run Dev Server with Yarn

Source: https://vuejs.org/guide/quick-start.html

After creating a Vue project, navigate to the project directory, install dependencies using Yarn, and start the development server.

```bash
$ cd <your-project-name>
$ yarn
$ yarn dev
```

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

### Basic <script setup> Usage

Source: https://vuejs.org/api/sfc-script-setup.html

Enable the <script setup> syntax by adding the 'setup' attribute to the script tag. Code within this block executes on component instance creation.

```vue
<script setup>
console.log('hello script setup')
</script>
```

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

### Vue SFC with Composition API and <script setup>

Source: https://vuejs.org/guide/scaling-up/sfc

An example of a Vue Single-File Component using the Composition API with the `<script setup>` syntax, offering a more concise way to write component logic.

```vue
<script setup>
import { ref } from 'vue'
const greeting = ref('Hello World!')
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>
```

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

### Provide + Inject Example with Reactivity

Source: https://vuejs.org/guide/components/provide-inject.html

Illustrates a full example of provide and inject, emphasizing how to maintain reactivity.

```APIDOC
## Full Provide + Inject Example with Reactivity

### Description
This example demonstrates how to use `provide` and `inject` together, ensuring that reactivity is maintained.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
// Parent Component
import { provide, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    provide('count', count) // Provide the ref itself
  }
}

// Child Component
import { inject } from 'vue'

export default {
  setup() {
    const count = inject('count') // Injects the ref
    // count.value can be accessed and modified here
    return { count }
  }
}
```

### Response
#### Success Response (200)
- **count** (Ref) - The reactive count ref provided by the ancestor.

#### Response Example
```json
{
  "count": 0 
}
```
```

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

### Provide data in setup function

Source: https://vuejs.org/guide/components/provide-inject.html

Call provide synchronously inside the setup function when not using script setup.

```js
import { provide } from 'vue'

export default {
  setup() {
    provide(/* key */ 'message', /* value */ 'hello!')
  }
}
```

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

### Install a Vue.js Plugin

Source: https://vuejs.org/guide/reusability/plugins.html

Demonstrates the basic syntax for installing a plugin using `app.use()`. The plugin can optionally accept configuration options.

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

const app = createApp({})

app.use(myPlugin, {
  /* optional options */
})
```

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

### Define a component with Composition API

Source: https://vuejs.org/guide/extras/composition-api-faq.html

A basic example demonstrating reactive state, mutation functions, and lifecycle hooks using the <script setup> syntax.

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

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>
```

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

### Return a render function from setup()

Source: https://vuejs.org/api/composition-api-setup.html

Use this pattern to define component output directly from the setup scope using reactive state.

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

export default {
  setup() {
    const count = ref(0)
    return () => h('div', count.value)
  }
}
```

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

### Vue Modal Component (Before Teleport)

Source: https://vuejs.org/guide/built-ins/teleport.html

This script setup example shows a basic modal component implementation without using Teleport. It includes logic for opening and closing the modal and basic scoped CSS for styling.

```vue
<script setup>
import { ref } from 'vue'

const open = ref(false)
</script>

<template>
  <button @click="open = true">Open Modal</button>

  <div v-if="open" class="modal">
    <p>Hello from the modal!</p>
    <button @click="open = false">Close</button>
  </div>
</template>

<style scoped>
.modal {
  position: fixed;
  z-index: 999;
  top: 20%;
  left: 50%;
  width: 300px;
  margin-left: -150px;
}
</style>
```

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

### Accessing `emit` in `setup()` Context

Source: https://vuejs.org/guide/essentials/component-basics.html

When not using `<script setup>`, access the `emit` function via the `setup` context's `ctx.emit` property.

```js
export default {
  emits: ['enlarge-text'],
  setup(props, ctx) {
    ctx.emit('enlarge-text')
  }
}
```

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

### Install Vue Plugin

Source: https://vuejs.org/api/application.html

Installs a Vue plugin using `app.use()`. The plugin can be an object with an `install` method or a function. Optional options can be passed.

```javascript
import { createApp } from 'vue'
import MyPlugin from './plugins/MyPlugin'

const app = createApp({
  /* ... */
})

app.use(MyPlugin)
```

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

### Basic Inject with `<script setup>`

Source: https://vuejs.org/guide/components/provide-inject.html

Demonstrates how to inject data provided by an ancestor component using the `inject()` function within `<script setup>`.

```APIDOC
## Inject with `<script setup>`

### Description
To inject data provided by an ancestor component, use the `inject()` function.

### Method
`inject(key, [defaultValue])`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>
```

### Response
#### Success Response (200)
- **message** (any) - The injected value.

#### Response Example
```json
{
  "message": "Injected Value"
}
```
```

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

### Install Vitest and Dependencies

Source: https://vuejs.org/guide/scaling-up/testing.html

Install Vitest, happy-dom, and @testing-library/vue as development dependencies.

```sh
> npm install -D vitest happy-dom @testing-library/vue
```

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

### useAttrs()

Source: https://vuejs.org/api/composition-api-helpers.html

Returns the attrs object from the Setup Context, including fallthrough attributes. Intended for use in `<script setup>`.

```APIDOC
## useAttrs()

### Description
Returns the `attrs` object from the Setup Context, which includes the fallthrough attributes of the current component. This is intended to be used in `<script setup>` where the setup context object is not available.

### Type
```typescript
function useAttrs(): Record<string, unknown>
```
```

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

### Inject Data in setup() Function

Source: https://vuejs.org/guide/components/provide-inject.html

When not using <script setup>, call inject() synchronously inside the setup() function. The injected value is returned.

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

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
```

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

### Basic setup() usage

Source: https://vuejs.org/api/composition-api-setup.html

Demonstrates declaring reactive state with ref and exposing it to the template and Options API hooks.

```vue
<script>
import { ref } from 'vue'

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

    // expose to template and other options API hooks
    return {
      count
    }
  },

  mounted() {
    console.log(this.count) // 0
  }
}
</script>

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

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

### Use components locally with script setup

Source: https://vuejs.org/guide/components/registration.html

In SFCs using <script setup>, imported components are automatically available for local use.

```vue
<script setup>
import ComponentA from './ComponentA.vue'
</script>

<template>
  <ComponentA />
</template>
```

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

### Basic Transition Example

Source: https://vuejs.org/api/built-in-components.html

A simple example demonstrating the use of the `<Transition>` component to apply animated transition effects to a single div element that is conditionally rendered.

```html
<Transition>
  <div v-if="ok">toggled content</div>
</Transition>
```

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

### Declare Render Functions in setup()

Source: https://vuejs.org/guide/extras/render-function.html

Render functions can be returned directly from the setup() hook to access props and reactive state.

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

export default {
  props: {
    /* ... */
  },
  setup(props) {
    const count = ref(1)

    // return the render function
    return () => h('div', props.msg + count.value)
  }
}
```

```javascript
export default {
  setup() {
    return () => 'hello world!'
  }
}
```

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

export default {
  setup() {
    // use an array to return multiple root nodes
    return () => [
      h('div'),
      h('div'),
      h('div')
    ]
  }
}
```

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

### Inject with Options API (`setup()` function)

Source: https://vuejs.org/guide/components/provide-inject.html

Shows how to use the `inject()` function within the `setup()` function in Vue's Options API.

```APIDOC
## Inject with Options API (`setup()`)

### Description
If not using `<script setup>`, `inject()` should only be called synchronously inside `setup()`.

### Method
`inject(key, [defaultValue])`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

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

export default {
  setup() {
    const message = inject('message')
    return { message }
  }
}
```

### Response
#### Success Response (200)
- **message** (any) - The injected value.

#### Response Example
```json
{
  "message": "Injected Value"
}
```
```

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

### Using Setup Context

Source: https://vuejs.org/api/composition-api-setup.html

Accesses context properties like attrs, slots, emit, and expose.

```javascript
export default {
  setup(props, context) {
    // Attributes (Non-reactive object, equivalent to $attrs)
    console.log(context.attrs)

    // Slots (Non-reactive object, equivalent to $slots)
    console.log(context.slots)

    // Emit events (Function, equivalent to $emit)
    console.log(context.emit)

    // Expose public properties (Function)
    console.log(context.expose)
  }
}
```

```javascript
export default {
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}
```

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

### Running the SSR Example

Source: https://vuejs.org/guide/scaling-up/ssr.html

Command to execute the Node.js script for server-side rendering.

```bash
> node example.js
```

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

### Access props in setup function

Source: https://vuejs.org/guide/essentials/component-basics.html

When not using <script setup>, props are passed as the first argument to the setup function.

```javascript
export default {
  props: ['title'],
  setup(props) {
    console.log(props.title)
  }
}
```

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

### Vue SFC with <script setup>

Source: https://vuejs.org/guide/essentials/reactivity-fundamentals.html

Use `<script setup>` in Single-File Components to automatically expose top-level imports, variables, and functions to the template. This simplifies state and method management.

```vue
<script setup>
import { ref } from 'vue'

const count = ref(0)

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

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>
```

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

### app.use()

Source: https://vuejs.org/api/application.html

Installs a Vue plugin.

```APIDOC
## app.use()

### Description
Installs a plugin. When called on the same plugin multiple times, the plugin will be installed only once.

### Parameters
- **plugin** (Plugin) - Required - The plugin to install.
- **options** (...any[]) - Optional - Options passed to the plugin's install method.

### Request Example
```javascript
app.use(MyPlugin)
```
```

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

### Provide data in script setup

Source: https://vuejs.org/guide/components/provide-inject.html

Use the provide function within script setup to share data with descendant components.

```vue
<script setup>
import { provide } from 'vue'

provide(/* key */ 'message', /* value */ 'hello!')
</script>
```

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

### Import Child Component with `<script setup>`

Source: https://vuejs.org/guide/essentials/component-basics.html

When using `<script setup>`, imported components are automatically available in the template without explicit registration. This simplifies component usage.

```vue
<script setup>
import ButtonCounter from './ButtonCounter.vue'
</script>

<template>
  <h1>Here is a child component!</h1>
  <ButtonCounter />
</template>
```

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

### Define an async setup hook

Source: https://vuejs.org/guide/built-ins/suspense.html

Use an async setup function in a standard Vue component to handle asynchronous data fetching.

```js
export default {
  async setup() {
    const res = await fetch(...)
    const posts = await res.json()
    return {
      posts
    }
  }
}
```

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

### Listening to Transition Events

Source: https://vuejs.org/api/built-in-components.html

An example of how to listen for transition events emitted by the `<Transition>` component. This specific example listens for the `@after-enter` event to execute a function when the enter transition is complete.

```html
<Transition @after-enter="onTransitionComplete">
  <div v-show="ok">toggled content</div>
</Transition>
```

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

### Combine script setup with normal script

Source: https://vuejs.org/api/sfc-script-setup.html

Use a normal script block alongside script setup for module-scope side effects or declaring options that cannot be expressed in script setup.

```vue
<script>
// normal <script>, executed in module scope (only once)
runSideEffectOnce()

// declare additional options
export default {
  inheritAttrs: false,
  customOptions: {}
}
</script>

<script setup>
// executed in setup() scope (for each instance)
</script>
```

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

### Consume Store in Script Setup Components

Source: https://vuejs.org/guide/scaling-up/state-management.html

Import and use the reactive store within components using the script setup syntax.

```vue
<script setup>
import { store } from './store.js'
</script>

<template>From A: {{ store.count }}</template>
```

```vue
<script setup>
import { store } from './store.js'
</script>

<template>From B: {{ store.count }}</template>
```

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

### Use top-level await

Source: https://vuejs.org/api/sfc-script-setup.html

Top-level await is supported inside script setup and compiles to an async setup function.

```vue
<script setup>
const post = await fetch(`/api/post/1`).then((r) => r.json())
</script>
```

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

### Inject Provided Options in Setup Script

Source: https://vuejs.org/guide/reusability/plugins.html

Illustrates how to inject provided data, such as plugin options, into a component's setup script using the `inject` function. The injected data can then be used within the component.

```vue
<script setup>
import { inject } from 'vue'

const i18n = inject('i18n')

console.log(i18n.greetings.hello)
</script>
```

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

### Use top-level await in script setup

Source: https://vuejs.org/guide/built-ins/suspense.html

Components using script setup with top-level await expressions are automatically treated as async dependencies.

```vue
<script setup>
const res = await fetch(...)
const posts = await res.json()
</script>

<template>
  {{ posts }}
</template>
```

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

### Resolve Component in Setup

Source: https://vuejs.org/api/render-function.html

Manually resolve a registered component by name within the `setup()` function. If the component is not found, a runtime warning is emitted and the name string is returned.

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

export default {
  setup() {
    const ButtonCounter = resolveComponent('ButtonCounter')

    return () => {
      return h(ButtonCounter)
    }
  }
}
```

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

### Example Component with Custom Option

Source: https://vuejs.org/guide/typescript/options-api.html

This example demonstrates how to use a custom component option like `beforeRouteEnter` after the `ComponentCustomOptions` interface has been augmented.

```typescript
import { defineComponent } from 'vue'

export default defineComponent({
  beforeRouteEnter(to, from, next) {
    // ...
  }
})
```

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

### Vue SFC with Composition API and <script setup>

Source: https://vuejs.org/guide/introduction.html

Encapsulates component logic, template, and styles in a single .vue file using the Composition API with the <script setup> syntax for less boilerplate.

```vue
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>
```

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

### Inject Data with <script setup>

Source: https://vuejs.org/guide/components/provide-inject.html

Use the inject() function within <script setup> to access data provided by an ancestor component. Ensure 'vue' is imported.

```vue
<script setup>
import { inject } from 'vue'

const message = inject('message')
</script>
```

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

### Provide values in a component

Source: https://vuejs.org/api/options-composition.html

Examples of providing static values and per-component state via the provide option.

```javascript
const s = Symbol()

export default {
  provide: {
    foo: 'foo',
    [s]: 'bar'
  }
}
```

```javascript
export default {
  data() {
    return {
      msg: 'foo'
    }
  }
  provide() {
    return {
      msg: this.msg
    }
  }
}
```

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

### Accessing component props

Source: https://vuejs.org/api/composition-api-setup.html

Shows how to access reactive props within the setup function.

```javascript
export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}
```

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

### TransitionGroup List Example

Source: https://vuejs.org/api/built-in-components.html

An example of using `<TransitionGroup>` to apply transition effects to a list of items. It renders as a `<ul>` element, uses a 'slide' transition name, and keys each list item by its `id`.

```html
<TransitionGroup tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</TransitionGroup>
```

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

### Create Vue App with Imported Component

Source: https://vuejs.org/api/application.html

Example of creating a Vue application instance with an imported root component.

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

const app = createApp(App)
```

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

### Get Component Fallthrough Attributes with useAttrs

Source: https://vuejs.org/api/composition-api-helpers.html

Returns the `attrs` object from the Setup Context, including fallthrough attributes. Intended for use in `<script setup>` where the context object is unavailable.

```typescript
function useAttrs(): Record<string, unknown>
```

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

### customRef() Usage in Component

Source: https://vuejs.org/api/reactivity-advanced.html

Example of using the custom debounced ref hook within a Vue component's script setup.

```vue
<script setup>
import { useDebouncedRef } from './debouncedRef'
const text = useDebouncedRef('hello')
</script>

<template>
  <input v-model="text" />
</template>
```

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

### Initialize a Vue Application

Source: https://vuejs.org/guide/introduction.html

Demonstrates the basic setup of a Vue application instance using the Options API or Composition API.

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

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')
```

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

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')
```

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

### Get Parent Passed Slots with useSlots

Source: https://vuejs.org/api/composition-api-helpers.html

Returns the `slots` object from the Setup Context, providing parent-passed slots as callable functions. Preferred over `defineSlots()` in TypeScript.

```typescript
function useSlots(): Record<string, (...args: any[]) => VNode[]>
```

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

### Implement Simple Routing from Scratch

Source: https://vuejs.org/guide/scaling-up/routing.html

Demonstrates manual client-side routing using dynamic components and the hashchange event. Choose between Composition API and Options API implementations based on your project structure.

```vue
<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'

const routes = {
  '/': Home,
  '/about': About
}

const currentPath = ref(window.location.hash)

window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
})

const currentView = computed(() => {
  return routes[currentPath.value.slice(1) || '/'] || NotFound
})
</script>

<template>
  <a href="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>
```

```vue
<script>
import Home from './Home.vue'
import About from './About.vue'
import NotFound from './NotFound.vue'

const routes = {
  '/': Home,
  '/about': About
}

export default {
  data() {
    return {
      currentPath: window.location.hash
    }
  },
  computed: {
    currentView() {
      return routes[this.currentPath.slice(1) || '/'] || NotFound
    }
  },
  mounted() {
    window.addEventListener('hashchange', () => {
		  this.currentPath = window.location.hash
		})
  }
}
</script>

<template>
  <a href="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/non-existent-path">Broken Link</a>
  <component :is="currentView" />
</template>
```

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

### Create a Simple i18n Plugin

Source: https://vuejs.org/guide/reusability/plugins.html

Sets up a basic internationalization plugin by defining an `install` function. This function injects a global `$translate` method into the app's configuration.

```javascript
export default {
  install: (app, options) => {
    // Plugin code goes here
  }
}
```

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

### Use Keyed v-for Example

Source: https://vuejs.org/style-guide/rules-essential.html

Demonstrates the correct usage of a unique key with v-for to ensure predictable DOM updates and state management.

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

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

### Define Props without script setup

Source: https://vuejs.org/guide/typescript/composition-api.html

Uses defineComponent to enable prop type inference when not using script setup.

```ts
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    message: String
  },
  setup(props) {
    props.message // <-- type: string
  }
})
```

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

### Basic `<Transition>` Usage

Source: https://vuejs.org/guide/built-ins/transition.html

This example demonstrates the fundamental usage of the `<Transition>` component with `v-if` for conditional rendering. It requires corresponding CSS classes for the transition effects.

```html
<button @click="show = !show">Toggle</button>
<Transition>
  <p v-if="show">hello</p>
</Transition>
```

```css
/* we will explain what these classes do next! */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

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

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

### Declare props in script setup

Source: https://vuejs.org/guide/components/props.html

Use the defineProps macro within a script setup block to declare component props.

```vue
<script setup>
const props = defineProps(['foo'])

console.log(props.foo)
</script>
```

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

### Accessing Slots in Vue.js JSX (setup)

Source: https://vuejs.org/guide/extras/render-function.html

Slots can be accessed directly from the `slots` object within JSX when using the `setup()` context.

```jsx
// default
<div>{slots.default()}</div>

// named
<div>{slots.footer({ text: props.message })}</div>
```

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

### Extends with Composition API

Source: https://vuejs.org/api/options-composition.html

The 'extends' option is not recommended for the Composition API as it does not merge the 'setup()' hook. For logic reuse in Composition API, prefer Composables. If inheritance is strictly needed, manually call the base component's 'setup()' within the extending component's 'setup()'.

```APIDOC
## Extends with Composition API

### Description
While 'extends' is designed for the Options API, it can be used with the Composition API by manually merging the `setup()` hook. However, using Composables for logic reuse is the recommended approach.

### Method
Composition API

### Endpoint
N/A (Component Option)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
import Base from './Base.js'

export default {
  extends: Base,
  setup(props, ctx) {
    // Call the base component's setup and merge its return values
    const baseSetup = Base.setup ? Base.setup(props, ctx) : {};
    return {
      ...baseSetup,
      // local bindings
      // ...
    }
  }
}
```

### Response
N/A (Component Option)

### Error Handling
N/A
```

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

### Dynamic Component Transition with Mode and Appear

Source: https://vuejs.org/api/built-in-components.html

Demonstrates using `<Transition>` with a dynamic component, applying a 'fade' transition, using 'out-in' mode, and enabling transitions on initial render ('appear').

```html
<Transition name="fade" mode="out-in" appear>
  <component :is="view"></component>
</Transition>
```

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

### Create Vue Project with npm

Source: https://vuejs.org/guide/quick-start.html

Use npm to execute the create-vue scaffolding tool. This command installs and runs the official Vue project scaffolding tool, prompting for optional features.

```bash
$ npm create vue@latest
```

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

### Create Vue Project with Bun

Source: https://vuejs.org/guide/quick-start.html

Use Bun to execute the create-vue scaffolding tool. This command installs and runs the official Vue project scaffolding tool, prompting for optional features.

```bash
$ bun create vue@latest
```

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

### Define a Vue.js Plugin Object

Source: https://vuejs.org/guide/reusability/plugins.html

A plugin is defined as an object with an `install` method. This method receives the app instance and any options passed during installation.

```javascript
const myPlugin = {
  install(app, options) {
    // configure the app
  }
}
```

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

### Provide Static and Reactive Values in Vue.js

Source: https://vuejs.org/api/composition-api-dependency-injection.html

Use provide() during the setup phase to make values available to descendant components. It accepts a key (string or Symbol) and a value. Reactive values can be provided by passing a ref.

```vue
<script setup>
import { ref, provide } from 'vue'
import { countSymbol } from './injectionSymbols'

// provide static value
provide('path', '/project/')

// provide reactive value
const count = ref(0)
provide('count', count)

// provide with Symbol keys
provide(countSymbol, count)
</script>
```

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

### Accessing Slots in Vue.js Render Functions (setup)

Source: https://vuejs.org/guide/extras/render-function.html

Slots are accessible via the `slots` object in the `setup()` context. Each slot is a function returning an array of vnodes.

```javascript
export default {
  props: ['message'],
  setup(props, { slots }) {
    return () => [
      // default slot:
      // <div><slot /></div>
      h('div', slots.default()),

      // named slot:
      // <div><slot name="footer" :text="message" /></div>
      h(
        'div',
        slots.footer({
          text: props.message
        })
      )
    ]
  }
}
```

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

### Using onServerPrefetch for Data Fetching

Source: https://vuejs.org/api/composition-api-lifecycle.html

Example demonstrating how to use onServerPrefetch for server-side data fetching alongside onMounted for client-side fallback.

```vue
<script setup>
import { ref, onServerPrefetch, onMounted } from 'vue'

const data = ref(null)

onServerPrefetch(async () => {
  // component is rendered as part of the initial request
  // pre-fetch data on server as it is faster than on the client
  data.value = await fetchOnServer(/* ... */)
})

onMounted(async () => {
  if (!data.value) {
    // if data is null on mount, it means the component
    // is dynamically rendered on the client. Perform a
    // client-side fetch instead.
    data.value = await fetchOnClient(/* ... */)
  }
})
</script>
```

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

### Solid Signals API Example

Source: https://vuejs.org/guide/extras/reactivity-in-depth.html

Demonstrates Solid's createSignal API for read/write segregation. Access values with `getter()` and update with `setter(newValue)`.

```javascript
const [count, setCount] = createSignal(0)

count() // access the value
setCount(1) // update the value
```

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

### Expose Component Members with defineExpose()

Source: https://vuejs.org/api/sfc-script-setup.html

Use `defineExpose` to explicitly expose properties from a `<script setup>` component. By default, bindings in `<script setup>` are not exposed to the parent component.

```vue
<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>
```

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

### Creating a Custom Renderer Instance

Source: https://vuejs.org/api/custom-renderer.html

Demonstrates how to use the `createRenderer` function to instantiate a custom renderer. This involves providing an object with platform-specific DOM manipulation functions.

```javascript
import { createRenderer } from '@vue/runtime-core'

const { render, createApp } = createRenderer({
  patchProp,
  insert,
  remove,
  createElement
  // ...
})

// `render` is the low-level API
// `createApp` returns an app instance
export { render, createApp }

// re-export Vue core APIs
export * from '@vue/runtime-core'
```

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

### Using Custom Components

Source: https://vuejs.org/api/sfc-script-setup.html

Components imported within <script setup> can be used directly as custom element tags in the template. PascalCase is recommended for consistency.

```vue
<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
  <MyComponent />
</template>
```

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

### Project Scaffolding Prompts

Source: https://vuejs.org/guide/quick-start.html

Example prompts shown by the create-vue scaffolding tool. Choose options like TypeScript, Vue Router, Pinia, testing, ESLint, Prettier, and DevTools.

```text
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.
```

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

### Local Custom Directive with <script setup>

Source: https://vuejs.org/guide/reusability/custom-directives.html

Defines a local custom directive `v-highlight` using `<script setup>`. The directive adds the 'is-highlight' class to the bound element when it's mounted.

```vue
<script setup>
// enables v-highlight in templates
const vHighlight = {
  mounted: (el) => {
    el.classList.add('is-highlight')
  }
}
</script>

<template>
  <p v-highlight>This sentence is important!</p>
</template>
```

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

### Transition with Dynamic Key

Source: https://vuejs.org/api/built-in-components.html

This example shows how to force a transition on an element by dynamically changing its `key` attribute. This is useful when the element's content changes but its tag remains the same.

```html
<Transition>
  <div :key="text">{{ text }}</div>
</Transition>
```

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

### Define Component Options in `<script setup>`

Source: https://vuejs.org/guide/extras/composition-api-faq.html

Use `defineOptions` within `<script setup>` to directly set component name or `inheritAttrs` property. This feature is available since Vue 3.3.

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

defineOptions({
  name: 'MyComponent',
  inheritAttrs: false
})
```

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

### Access Fallthrough Attributes in Options API Setup

Source: https://vuejs.org/guide/components/attrs.html

In the Options API, fallthrough attributes are available via `ctx.attrs` within the `setup()` function. This object reflects the latest attributes but is not reactive.

```javascript
export default {
  setup(props, ctx) {
    // fallthrough attributes are exposed as ctx.attrs
    console.log(ctx.attrs)
  }
}
```

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

### Declare Emitted Events with defineEmits

Source: https://vuejs.org/guide/components/events.html

Use the defineEmits macro within script setup to declare events. The macro must be placed directly in the script setup block and cannot be used inside functions.

```vue
<script setup>
defineEmits(['inFocus', 'submit'])
</script>
```

```vue
<script setup>
const emit = defineEmits(['inFocus', 'submit'])

function buttonClick() {
  emit('submit')
}
</script>
```

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

### Use Scoped Styling - Bad Example

Source: https://vuejs.org/style-guide/rules-essential.html

Avoid using global styles for component-specific elements. This example shows a global style that could unintentionally affect other components using the same class names.

```html
<template>
  <button class="btn btn-close">×</button>
</template>

<style>
.btn-close {
  background-color: red;
}
</style>
```

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

### Provide Plugin Options via `app.provide`

Source: https://vuejs.org/guide/reusability/plugins.html

Demonstrates how a plugin can use `app.provide` to make its options accessible to child components. This allows components to inject and use the provided data.

```javascript
export default {
  install: (app, options) => {
    app.provide('i18n', options)
  }
}
```

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

### Options API Watcher Example

Source: https://vuejs.org/guide/essentials/watchers.html

Use the `watch` option to trigger a function when a reactive property changes. This example watches the `question` property and calls `getAnswer` if the question contains a question mark.

```javascript
export default {
  data() {
    return {
      question: '',
      answer: 'Questions usually contain a question mark. ;-)',
      loading: false
    }
  },
  watch: {
    // whenever question changes, this function will run
    question(newQuestion, oldQuestion) {
      if (newQuestion.includes('?')) {
        this.getAnswer()
      }
    }
  },
  methods: {
    async getAnswer() {
      this.loading = true
      this.answer = 'Thinking...'
      try {
        const res = await fetch('https://yesno.wtf/api')
        this.answer = (await res.json()).answer
      } catch (error) {
        this.answer = 'Error! Could not reach the API. ' + error
      } finally {
        this.loading = false
      }
    }
  }
}
```

```html
<p>
  Ask a yes/no question:
  <input v-model="question" :disabled="loading" />
</p>
<p>{{ answer }}</p>
```

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

### created

Source: https://vuejs.org/api/options-lifecycle.html

Called after the instance has finished processing all state-related options. Reactive data, computed properties, methods, and watchers are set up, but the mounting phase has not started.

```APIDOC
## created

### Description
Called after the instance has finished processing all state-related options. When this hook is called, the following have been set up: reactive data, computed properties, methods, and watchers. However, the mounting phase has not been started, and the `$el` property will not be available yet.

### Type
ts
```typescript
interface ComponentOptions {
  created?(this: ComponentPublicInstance): void
}
```
```

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

### createApp()

Source: https://vuejs.org/api/application.html

Creates a new Vue application instance.

```APIDOC
## createApp()

### Description
Creates an application instance.

### Parameters
- **rootComponent** (Component) - Required - The root component.
- **rootProps** (object) - Optional - Props to be passed to the root component.

### Request Example
```javascript
import { createApp } from 'vue'
const app = createApp({ /* root component options */ })
```
```

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

### Expose `ref()` to Template (Composition API)

Source: https://vuejs.org/guide/essentials/reactivity-fundamentals.html

Declare and return refs from the `setup()` function to make them accessible in the component's template. Refs are automatically unwrapped in templates.

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

export default {
  // `setup` is a special hook dedicated for the Composition API.
  setup() {
    const count = ref(0)

    // expose the ref to the template
    return {
      count
    }
  }
}
```

```html
<div>{{ count }}</div>
```

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

### Express Server for Vue SSR

Source: https://vuejs.org/guide/scaling-up/ssr.html

An Express.js server handler that renders a Vue app on each request and embeds the HTML within a full page structure. Ensure `express` is installed (`npm install express`).

```javascript
import express from 'express'
import { createSSRApp } from 'vue'
import { renderToString } from 'vue/server-renderer'

const server = express()

server.get('/', (req, res) => {
  const app = createSSRApp({
    data: () => ({ count: 1 }),
    template: `<button @click="count++">{{ count }}</button>`
  })

  renderToString(app).then((html) => {
    res.send(
      "<!DOCTYPE html>\n<html>\n  <head>\n    <title>Vue SSR Example</title>\n  </head>\n  <body>\n    <div id=\"app\">${html}</div>\n  </body>\n</html>"
    )
  })
})

server.listen(3000, () => {
  console.log('ready')
})
```

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

### Server Entry Point for Universal App

Source: https://vuejs.org/guide/scaling-up/ssr.html

The server-side entry file that uses the universal `createApp` function to create a Vue app instance for server-side rendering. Assumes `renderToString` is imported and used elsewhere in the handler.

```javascript
// (irrelevant code omitted)
import { createApp } from './app.js'

server.get('/', (req, res) => {
  const app = createApp()
  renderToString(app).then(html => {
    // ...
  })
})
```

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

### Access Fallthrough Attributes in Script Setup

Source: https://vuejs.org/guide/components/attrs.html

Import and use the `useAttrs()` composable function within `<script setup>` to access a component's fallthrough attributes in JavaScript. Note that the returned `attrs` object is not reactive.

```vue
<script setup>
import { useAttrs } from 'vue'

const attrs = useAttrs()
</script>
```

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

### Accessing Custom Component Options

Source: https://vuejs.org/api/component-instance.html

Demonstrates how to access custom component options defined in the app. Use this to support custom component options.

```javascript
const app = createApp({
  customOption: 'foo',
  created() {
    console.log(this.$options.customOption) // => 'foo'
  }
})
```

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

### Composition API Watcher Example

Source: https://vuejs.org/guide/essentials/watchers.html

Use the `watch` function from Vue's Composition API to trigger a callback when a reactive ref changes. This example mirrors the Options API functionality for watching a question ref.

```vue
<script setup>
import { ref, watch } from 'vue'

const question = ref('')
const answer = ref('Questions usually contain a question mark. ;-)')
const loading = ref(false)

// watch works directly on a ref
watch(question, async (newQuestion, oldQuestion) => {
  if (newQuestion.includes('?')) {
    loading.value = true
    answer.value = 'Thinking...'
    try {
      const res = await fetch('https://yesno.wtf/api')
      answer.value = (await res.json()).answer
    } catch (error) {
      answer.value = 'Error! Could not reach the API. ' + error
    } finally {
      loading.value = false
    }
  }
})
</script>

<template>
  <p>
    Ask a yes/no question:
    <input v-model="question" :disabled="loading" />
  </p>
  <p>{{ answer }}</p>
</template>
```

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

### Bind JavaScript Expressions to CSS in Vue SFC with Script Setup

Source: https://vuejs.org/api/sfc-css-features.html

When using `<script setup>`, you can bind JavaScript expressions within `v-bind()` by wrapping them in quotes. The expression will be compiled into a hashed CSS custom property and applied reactively.

```vue
<script setup>
import { ref } from 'vue'
const theme = ref({
    color: 'red',
})
</script>

<template>
  <p>hello</p>
</template>

<style scoped>
p {
  color: v-bind('theme.color');
}
</style>
```

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

### Provide Translation Options to Plugin

Source: https://vuejs.org/guide/reusability/plugins.html

Shows how to pass configuration options, specifically a translation object, to the i18n plugin during installation using `app.use()`.

```javascript
import i18nPlugin from './plugins/i18n'

app.use(i18nPlugin, {
  greetings: {
    hello: 'Bonjour!'
  }
})
```

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

### Scoped Slot as a Function (Render Function Example)

Source: https://vuejs.org/guide/components/slots.html

This JavaScript example demonstrates the internal mechanism of scoped slots, showing how a slot can be treated as a function that the child component calls with props. This is useful for understanding manual render functions.

```javascript
MyComponent({
  // passing the default slot, but as a function
  default: (slotProps) => {
    return `${slotProps.text} ${slotProps.count}`
  }
})

function MyComponent(slots) {
  const greetingMessage = 'hello'
  return `<div>${ 
    // call the slot function with props!
    slots.default({ text: greetingMessage, count: 1 })
  }</div>`
}
```

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

### Accessing Template Refs with Composition API (Before Vue 3.5)

Source: https://vuejs.org/guide/essentials/template-refs.html

Before `useTemplateRef`, declare a `ref` with a name matching the template ref attribute. This ref will hold the element reference after the component is mounted. If not using `<script setup>`, return the ref from `setup()`.

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

// declare a ref to hold the element reference
// the name must match template ref value
const input = ref(null)

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

<template>
  <input ref="input" />
</template>

```

```javascript
export default {
  setup() {
    const input = ref(null)
    // ...
    return {
      input
    }
  }
}

```

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

### Configuring Flush Timing and Debugging

Source: https://vuejs.org/api/reactivity-core.html

Illustrates using watch() options to set the flush timing to 'post' and enable debugging with onTrack and onTrigger callbacks.

```javascript
watch(source, callback, {
  flush: 'post',
  onTrack(e) {
    debugger
  },
  onTrigger(e) {
    debugger
  }
})
```