### Install and Run Vue Project with Bun

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

Navigates to the project directory, installs dependencies using Bun, and starts the development server.

```sh
$ cd {{'<your-project-name>'}}
$ bun install
$ bun run dev
```

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

### Install and Run Vue Project with Yarn

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

Navigates to the project directory, installs dependencies using Yarn, and starts the development server.

```sh
$ cd {{'<your-project-name>'}}
$ yarn
$ yarn dev
```

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

### Install and Run Vue Project with npm

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

Navigates to the project directory, installs dependencies using npm, and starts the development server.

```sh
$ cd {{'<your-project-name>'}}
$ npm install
$ npm run dev
```

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

### Install and Run Vue Project with pnpm

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

Navigates to the project directory, installs dependencies using pnpm, and starts the development server.

```sh
$ cd {{'<your-project-name>'}}
$ pnpm install
$ pnpm run dev
```

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

### Create Vue Project with Bun

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

Installs and executes the create-vue scaffolding tool using Bun to create a new Vue.js project.

```sh
$ bun create vue@latest
```

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

### Create Vue App with npm

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

Scaffolds a new Vue.js application using npm and Vite. This command initiates the project creation process, guiding the user through setup options.

```shell
$ npm create vue@latest
```

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

### Vue 3 Script Setup Example

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

A Vue 3 example using the `<script setup>` syntax to declare a reactive count and render a button that increments it.

```javascript
import { ref } from 'vue'
const count = ref(0)
```

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

### Create Vue Project with Yarn

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

Installs and executes the create-vue scaffolding tool using Yarn version 4.11 or later to create a new Vue.js project.

```sh
$ yarn dlx create-vue@latest
```

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

### Vue.js Composition API with Import Map

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

Illustrates setting up a Vue.js application with the Composition API, utilizing an import map to specify the location of the Vue module from a CDN. The example includes the HTML structure, import map, and the Vue setup function.

```html
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

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

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>
```

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

### Vue.js: Script Setup Example

Source: https://vuejs.org/guide/essentials/list

Example using `<script setup>` for Composition API, defining reactive variables for list rendering.

```javascript
const parentMessage = 'Parent'
const items = [{ message: 'Foo' }, { message: 'Bar' }]
```

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

### Vue CDN Global Build - Options API

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

Demonstrates using Vue.js from a CDN with the global build and the Options API. This setup is simple and suitable for projects without a build step. It exposes Vue's top-level APIs on the global `Vue` object.

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

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

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
```

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

### Vue.js Options API with Import Map

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

Demonstrates how to set up a Vue.js application using the Options API with an import map to resolve the 'vue' module from a CDN. Includes the HTML structure, the import map configuration, and the Vue instance setup.

```html
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

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

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
```

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

### Install a Vue Plugin

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

Demonstrates the basic syntax for installing a Vue plugin using `app.use()`. It shows how to import the plugin and pass optional configuration options.

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

const app = createApp({})

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

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

### Vue Options API: Inject without Setup

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

Provides an example of calling `inject()` synchronously within the `setup()` function when not using `<script setup>` in Vue.

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

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

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

### Create Vue App with pnpm

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

Scaffolds a new Vue.js application using pnpm and Vite. This command is an alternative to npm for creating a Vue project, offering similar setup functionalities.

```shell
$ pnpm create vue@latest
```

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

### Vue.js Module Splitting - Main HTML

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

This HTML file demonstrates how to import a Vue.js component from a separate JavaScript file (`my-component.js`) using ES modules. It includes the necessary setup to mount the Vue application.

```html
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>
```

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

### Vue.js ESLint Setup

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

Sets up ESLint with `eslint-plugin-vue` for linting Vue Single File Components (SFCs). This includes installation, configuration, IDE integration, and running ESLint during the build process or on commit.

```bash
npm install -D eslint eslint-plugin-vue
# or
yarn add -D eslint eslint-plugin-vue
```

```bash
# Example of running ESLint as part of a build script in package.json
"scripts": {
  "build": "vue-cli-service build && eslint --ext .vue,.js ."
}
```

```bash
# Example of using lint-staged with husky for pre-commit hooks
npx lint-staged
```

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

### Define a Vue Plugin with install() Method

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

Shows how to define a Vue plugin as an object with an `install` method. The `install` method receives the app instance and any options passed during installation.

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

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

### Build Vue Project for Production with Bun

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

Builds the Vue.js application for production using Bun, creating an optimized output in the './dist' directory.

```sh
$ bun run build
```

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

### Vue.js Module Splitting - Composition API Component

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

Demonstrates splitting Vue.js code into modular JavaScript files using the Composition API. This example defines a component in `my-component.js` and imports it into the main HTML file, showcasing the use of `ref`.

```js
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>Count is: {{ count }}</div>`
}
```

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

### Vue Composition API: Basic setup() with reactive state

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

Demonstrates the basic usage of the `setup()` function in Vue.js Composition API. It shows how to declare reactive state using `ref` and expose it to the template by returning an object. The example also illustrates accessing the exposed state within the `mounted` hook.

```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>
```

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

### Vue Composition API with <script setup> Example

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

Defines component logic using imported API functions, typically with <script setup> for less boilerplate. Top-level declarations are directly usable in the template.

```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>
```

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

### Build Vue Project for Production with npm

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

Builds the Vue.js application for production using npm, creating an optimized output in the './dist' directory.

```sh
$ npm run build
```

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

### Vue SSR: Basic Setup Commands

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

These shell commands outline the initial setup for a Vue SSR project. They include creating a directory, initializing npm, enabling ES modules in `package.json`, and installing the 'vue' package.

```shell
npm init -y
echo "\"type\": \"module\"" >> package.json
npm install vue
```

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

### Build Vue Project for Production with pnpm

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

Builds the Vue.js application for production using pnpm, creating an optimized output in the './dist' directory.

```sh
$ pnpm run build
```

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

### Event Validation Example (Composition API)

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

Provides a practical example of event validation using the object syntax with `defineEmits` in Vue.js `<script setup>`. It shows how to define validation logic for specific events.

```vue
<script setup>
const emit = defineEmits({
  // No validation
  click: null,

  // Validate submit event
  submit: ({ email, password }) => {
    if (email && password) {
      return true
    } else {
      console.warn('Invalid submit event payload!')
      return false
    }
  }
})

function submitForm(email, password) {
  emit('submit', { email, password })
}
</script>
```

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

### Vue Composition API Basic Example

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

A fundamental example of a Vue.js component utilizing the Composition API with the `<script setup>` syntax. It demonstrates reactive state management using `ref` and lifecycle hooks like `onMounted`.

```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>
```

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

### Vue.js Module Splitting - Options API Component

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

Shows how to split Vue.js code into separate JavaScript files for better organization. This example defines a component using the Options API in a separate file (`my-component.js`) and imports it into the main HTML file.

```js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>Count is: {{ count }}</div>`
}
```

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

### Build Vue Project for Production with Yarn

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

Builds the Vue.js application for production using Yarn, creating an optimized output in the './dist' directory.

```sh
$ yarn build
```

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

### Install Vitest and Dependencies

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

Installs Vitest, happy-dom for DOM simulation, and @testing-library/vue for Vue component testing. These are development dependencies.

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

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

### Vue SFC - Composition API Example

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

An example of a Vue Single-File Component using the Composition API with `<script setup>`. It demonstrates importing `ref` for reactive state and structuring the component with template and style.

```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>
```

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

### Composition API: Returning Refs in Options API

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

Demonstrates how to return a template ref from the `setup()` function when not using `<script setup>` in Vue's Options API.

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

```

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

### Vue.js: Child and Parent Component Example (defineModel)

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

Illustrates a potential de-synchronization issue between parent and child components when using `defineModel` with a default value and no value provided from the parent. This example highlights the importance of managing default values correctly.

```vue
<script setup>
const model = defineModel({ default: 1 })
</script>
```

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

<template>
  <Child v-model="myRef"></Child>
</template>
```

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

### Use Composables in Vue Options API Setup

Source: https://vuejs.org/guide/reusability/composables

Demonstrates how to call composables like `useMouse` and `useFetch` within the `setup()` function of a Vue component using the Options API. The returned bindings are exposed to the template and `this` context.

```javascript
import { useMouse } from './mouse.js'
import { useFetch } from './fetch.js'

export default {
  setup() {
    const { x, y } = useMouse()
    const { data, error } = useFetch('...')
    return { x, y, data, error }
  },
  mounted() {
    // setup() exposed properties can be accessed on `this`
    console.log(this.x)
  }
  // ...other options
}
```

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

### Declare and Access Props in JavaScript (Options API - setup)

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

This JavaScript example illustrates declaring props using the `props` option and accessing them within the `setup` function in Vue's Options API.

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

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

### Vue Composition API: Accessing props in setup()

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

Illustrates how to access props within the `setup()` function in Vue.js Composition API. It shows direct access to props and highlights the reactivity of props. The example also demonstrates how to maintain reactivity when destructuring props using `toRefs` or `toRef`.

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

```javascript
import { toRefs, toRef } from 'vue'

export default {
  setup(props) {
    // turn `props` into an object of refs, then destructure
    const { title } = toRefs(props)
    // `title` is a ref that tracks `props.title`
    console.log(title.value)

    // OR, turn a single property on `props` into a ref
    const title = toRef(props, 'title')
  }
}
```

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

### Create Vue App with Yarn

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

Scaffolds a new Vue.js application using Yarn and Vite. This snippet covers both Yarn v1+ and Yarn Modern (v2+) for project creation.

```shell
# For Yarn (v1+)
$ yarn create vue

# For Yarn Modern (v2+)
$ yarn create vue@latest
```

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

### Test a Composable Requiring Host Component Setup

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

Demonstrates testing a composable ('useFoo') that requires a host component context using the 'withSetup' helper. It includes mocking provide and asserting results.

```javascript
import { withSetup } from './test-utils'
import { useFoo } from './foo'

test('useFoo', () => {
  const [result, app] = withSetup(() => useFoo(123))
  // mock provide for testing injections
  app.provide(...)
  // run assertions
  expect(result.foo.value).toBe(1)
  // trigger onUnmounted hook if needed
  app.unmount()
})
```

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

### Vue.js Composition API Extends Example

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

Shows how to 'extend' a component using the Composition API by manually calling the base component's `setup()` function within the extending component's `setup()`. This approach is used when direct inheritance of logic is needed in Composition API, though composables are generally preferred.

```javascript
import Base from './Base.js'
export default {
  extends: Base,
  setup(props, ctx) {
    return {
      ...Base.setup(props, ctx),
      // local bindings
    }
  }
}
```

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

### Async Setup Hook in Vue.js

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

Demonstrates how to define an asynchronous setup() hook in a Vue.js Composition API component. This hook fetches data and returns it for use in the component's template. This pattern is suspensible by default.

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

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

### Vue Local Component Registration (Composition API with <script setup>)

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

Shows how to locally use imported components within a Vue Single File Component (SFC) when using the `<script setup>` syntax. Components are implicitly available in the template without explicit registration in a `components` option.

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

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

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

### Vue Local Component Registration (Composition API without <script setup>)

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

Illustrates local component registration for Vue SFCs using the Composition API without the `<script setup>` syntax. Components are imported and then registered within the `components` option of the exported default object.

```javascript
import ComponentA from './ComponentA.js'

export default {
  components: {
    ComponentA
  },
  setup() {
    // ...
  }
}
```

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

### Vue.js v-on Directive with Arguments

Source: https://vuejs.org/guide/essentials/template-syntax

Illustrates the v-on directive for listening to DOM events in Vue.js, showing both the full and shorthand syntax. The 'click' event is used as an example argument.

```vue-html
<a v-on:click="doSomething"> ... </a>

<!-- shorthand -->
<a @click="doSomething"> ... </a>
```

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

### Vue Basic <script setup> Syntax

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

Demonstrates the basic usage of the <script setup> block in a Vue Single-File Component (SFC). Code within this block is compiled into the component's setup() function, executing on each component instance creation.

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

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

### Vue.js Render Function: v-on Example

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

Shows how to handle events using the `v-on` directive equivalent in Vue.js render functions. Event listeners are passed as props starting with `on` followed by an uppercase letter.

```javascript
h(
  'button',
  {
    onClick(event) {
      /* ... */
    }
  },
  'Click Me'
)
```

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

### Vue.js: Organizing Code with Extracted Composables

Source: https://vuejs.org/guide/reusability/composables

Shows a practical example of organizing complex Vue.js components by extracting distinct functionalities into separate composable functions (`useFeatureA`, `useFeatureB`, `useFeatureC`) and composing them within `<script setup>`.

```vue
<script setup>
import { useFeatureA } from './featureA.js'
import { useFeatureB } from './featureB.js'
import { useFeatureC } from './featureC.js'

const { foo, bar } = useFeatureA()
const { baz } = useFeatureB(foo)
const { qux } = useFeatureC(baz)
</script>
```

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

### Vue CDN Global Build - Composition API

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

Shows how to use Vue.js from a CDN with the global build and the Composition API. This method also avoids a build step and utilizes the global `Vue` object for accessing Vue's functionalities.

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

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

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>
```

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

### Vue Composition API: Get Previous Computed Value

Source: https://vuejs.org/guide/essentials/computed

Illustrates how to access the previous value of a computed property in Vue.js using the Composition API with `<script setup>`. The 'previous' argument is passed to the computed getter.

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

const count = ref(2)

// This computed will return the value of count when it's less or equal to 3.
// When count is >=4, the last value that fulfilled our condition will be returned
// instead until count is less or equal to 3
const alwaysSmall = computed((previous) => {
  if (count.value <= 3) {
    return count.value
  }

  return previous
})
</script>
```

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

### Vue: Multiple v-model with Arguments and Modifiers (Composition API)

Source: https://vuejs.org/guide/components/v-model

Illustrates using multiple v-model bindings with different arguments and modifiers in Vue's Composition API with `<script setup>`. It utilizes `defineModel` to get both the value and its modifiers.

```vue-html
<UserName
  v-model:first-name.capitalize="first"
  v-model:last-name.uppercase="last"
/>

```

```javascript
<script setup>
const [firstName, firstNameModifiers] = defineModel('firstName')
const [lastName, lastNameModifiers] = defineModel('lastName')

console.log(firstNameModifiers) // { capitalize: true }
console.log(lastNameModifiers) // { uppercase: true }
</script>

```

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

### Vue CDN ES Module Build - Options API

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

Illustrates using Vue.js from a CDN via native ES modules with the Options API. This approach leverages modern browser support for modules and requires importing Vue from the ES module build URL.

```html
<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
```

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

### Vue.js JSX: v-on Example

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

Illustrates how to handle events using the `v-on` directive equivalent in Vue.js JSX. Event listeners are passed as props starting with `on` followed by an uppercase letter, similar to native DOM event handling.

```jsx
<button
  onClick={(event) => {
    /* ... */
  }}>
  Click Me
</button>
```

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

### Create Vue App Instance

Source: https://vuejs.org/guide/essentials/application

Demonstrates the basic creation of a Vue application instance using the `createApp` function from the 'vue' library. This is the entry point for any Vue application.

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

const app = createApp({
  /* root component options */
})
```

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

### Vue CDN ES Module Build - Composition API

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

Demonstrates using Vue.js from a CDN with ES modules and the Composition API. This method uses native ES module imports and the ES module build of Vue, suitable for modern browsers.

```html
<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>
```

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

### Access Fallthrough Attributes in setup() Context

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

Shows how to access fallthrough attributes via the `ctx.attrs` property within the `setup()` function of a component.

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

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

### Disable Attribute Inheritance in <script setup>

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

Demonstrates how to disable attribute inheritance in Vue 3.3+ using `defineOptions` within `<script setup>`.

```vue
<script setup>
defineOptions({
  inheritAttrs: false
})
// ...setup logic
</script>
```

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

### Vue 3 Composition API Example

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

A minimal Vue 3 example using the Composition API to create a simple counter. It demonstrates using `ref` for reactive state and mounting the application.

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

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

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

### Declare Emitted Events with Setup Function (Options API)

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

Illustrates how to declare emitted events and access the `emit` function when using an explicit `setup` function within the Options API. The `emit` function is available on the `setup` context.

```javascript
export default {
  emits: ['inFocus', 'submit'],
  setup(props, ctx) {
    ctx.emit('submit')
  }
}
```

```javascript
export default {
  emits: ['inFocus', 'submit'],
  setup(props, { emit }) {
    emit('submit')
  }
}
```

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

### Simplified Ref Usage with <script setup>

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

Presents the `<script setup>` syntax in Vue Single-File Components (SFCs) as a more concise alternative to manually exposing state and methods via the `setup()` option. Top-level imports, variables, and functions are automatically available in the template.

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

const count = ref(0)

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

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

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

### Vue.js Directive Binding Object Example

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

Demonstrates the structure of the `binding` object passed to a Vue.js directive hook, based on a directive usage example with arguments and modifiers.

```vue-html
<div v-example:foo.bar="baz">

```

```js
{
  arg: 'foo',
  modifiers: { bar: true },
  value: /* value of `baz` */,
  oldValue: /* value of `baz` from previous update */
}

```

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

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

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

Encapsulates component logic using imported API functions and the <script setup> syntax for reduced boilerplate in a single *.vue file.

```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>
```

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

### Vue <script setup> Using Components

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

Demonstrates how to import and use components directly as variables within the <script setup> block. Components can be referenced by their imported name or by their kebab-case equivalent in the template.

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

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

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

### Vue <script setup> Dynamic Components

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

Explains how to use dynamic components with the `:is` binding in <script setup>. Components can be switched based on conditions or variables, similar to JSX's mental model.

```vue
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>
```

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

### Event Validation Example (Options API)

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

Demonstrates event validation using the object syntax with the `emits` option in Vue.js Options API. It includes an example of a validation function and how to trigger the event from a method.

```javascript
export default {
  emits: {
    // No validation
    click: null,

    // Validate submit event
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Invalid submit event payload!')
        return false
      }
    }
  },
  methods: {
    submitForm(email, password) {
      this.$emit('submit', { email, password })
    }
  }
}
```

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

### Async Setup with Top-Level Await in Vue.js

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

Shows how a Vue.js component using `<script setup>` becomes an async dependency when it includes top-level await expressions. This automatically makes the component suspensible by Suspense.

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

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

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

### Vue 3 Options API Example

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

A minimal Vue 3 example using the Options API to create a simple counter. It demonstrates data management and mounting the application to the DOM.

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

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

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

### Vue SFC: Element Order - Bad Examples

Source: https://vuejs.org/style-guide/rules-recommended

Presents incorrect ordering of `<script>`, `<template>`, and `<style>` tags within Vue Single-File Components (SFCs). These examples violate the recommended structure for maintainability.

```vue-html
<style>/* ... */</style>
<script>/* ... */</script>
<template>...</template>
```

```vue-html
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>
```

```vue-html
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>
```

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

### Helper for Testing Composables with Host Components

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

Provides a utility function 'withSetup' to wrap composables that rely on lifecycle hooks or provide/inject in a host Vue component for testing purposes.

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

export function withSetup(composable) {
  let result
  const app = createApp({
    setup() {
      result = composable()
      // suppress missing template warning
      return () => {}
    }
  })
  app.mount(document.createElement('div'))
  // return the result and the app instance
  // for testing provide/unmount
  return [result, app]
}
```

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

### Integrating Composition API in Options API Component

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

Illustrates how to leverage Composition API features within an existing Options API component by utilizing the `setup()` option. This is recommended for integrating new features or libraries into legacy codebases.

```Vue.js
import { ref } from 'vue'

export default {
  // Options API
  setup() {
    // Composition API
    const count = ref(0)

    function increment() {
      count.value++
    }

    return {
      count,
      increment
    }
  }
}
```

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

### Create Vue App with Root Component

Source: https://vuejs.org/guide/essentials/application

Shows how to create a Vue application instance by importing and passing a root component (e.g., from a Single-File Component) to the `createApp` function.

```js
import { createApp } from 'vue'
// import the root component App from a single-file component.
import App from './App.vue'

const app = createApp(App)
```

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

### Vue.js Composition API: Render Function

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

Demonstrates how to declare a render function within the setup() hook of a Vue.js component using the Composition API. The setup function returns the render function, which generates the VNode structure.

```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)
  }
}
```

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

### Vue.js Advanced CSS Transition Example

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

An advanced example showcasing a named transition 'slide-fade' in Vue.js. It includes a conditional rendering of a paragraph element and demonstrates different transition durations and easing curves for enter and leave states.

```vue-html
<Transition name="slide-fade">
  <p v-if="show">hello</p>
</Transition>
```

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

### Vue.js Mouse Tracker Renderless Component Example

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

This example demonstrates a renderless component that tracks mouse position. It uses scoped slots to pass the current X and Y coordinates to the parent component for rendering. The parent component then displays the mouse coordinates.

```vue-html
<MouseTracker v-slot="{ x, y }">
  Mouse is at: {{ x }}, {{ y }}
</MouseTracker>
```

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

### Vue.js Setup with Render Function

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

Demonstrates a Vue.js setup function that returns a render function, directly utilizing reactive state. This is useful for simple component rendering.

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

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

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

### Vue.js computed() - Writable Example

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

Shows how to create a writable computed property by providing an object with `get` and `set` functions to `computed()`. The `get` function retrieves the computed value, and the `set` function updates the underlying reactive source.

```javascript
const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  }
})

plusOne.value = 1
console.log(count.value) // 0
```

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

### Vue.js defineProps & defineEmits Runtime Declaration

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

Demonstrates the basic usage of `defineProps` and `defineEmits` within a Vue.js `<script setup>` block for runtime prop and emit declarations. These are compiler macros that don't require imports and are compiled away.

```vue
<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>
```

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

### Vue.js Setup with Render Function and Exposed Methods

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

Shows how to use Vue.js's `expose()` function within a setup function that returns a render function. This allows exposing component methods like 'increment' to parent components via template refs.

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

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

    expose({
      increment
    })

    return () => h('div', count.value)
  }
}
```

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

### Vue.js Slot Render Scope Example

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

Demonstrates how slot content accesses the parent component's data scope. The example shows a message being rendered both directly in a span and within a custom FancyButton component, illustrating that both instances display the same data from the parent.

```vue-html
<span>{{ message }}</span>
<FancyButton>{{ message }}</FancyButton>
```

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

### Vue Local Async Component (Composition API)

Source: https://vuejs.org/guide/components/async

Shows how to define an async component locally within a Vue component using the Composition API's `<script setup>` syntax. The `defineAsyncComponent` function is called directly within the script setup.

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

const AdminPage = defineAsyncComponent(() =>
  import('./components/AdminPageComponent.vue')
)
</script>

<template>
  <AdminPage />
</template>
```

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

### Vue <script setup> Reactivity with ref

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

Shows how to manage reactive state within <script setup> using Vue's ref API. The ref value is automatically unwrapped when accessed in the template, simplifying state updates.

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

const count = ref(0)
</script>

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

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

### Vue.js Reactive Props Destructure Example

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

Illustrates reactive props destructuring in Vue 3.5+, where destructured props variables automatically access the latest prop values. The example shows how the compiler transforms direct access to destructured variables into `props.variable`.

```javascript
const { foo } = defineProps(['foo'])

watchEffect(() => {
  // runs only once before 3.5
  // re-runs when the "foo" prop changes in 3.5+
  console.log(foo)
})
```

```javascript
const props = defineProps(['foo'])

watchEffect(() => {
  // `foo` transformed to `props.foo` by the compiler
  console.log(props.foo)
})
```

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

### Vue CSS Modules with Composition API

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

Demonstrates using the `useCssModule` composable function in Vue 3's Composition API to access CSS Modules classes within `<script setup>` or `setup()`. It shows examples for default and custom injection names.

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

// inside setup() scope...
// default, returns classes for <style module>
useCssModule()

// named, returns classes for <style module="classes">
useCssModule('classes')
```

```vue
<script setup lang="ts">
import { useCssModule } from 'vue'

const classes = useCssModule()
</script>

<template>
  <p :class="classes.red">red</p>
</template>

<style module>
.red {
  color: red;
}
</style>
```

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

### Combining Script Setup with Normal Script

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

Vue components can use both `<script setup>` and a normal `<script>` block. A normal `<script>` is useful for declaring options not supported in `<script setup>` (like `inheritAttrs`, though `defineOptions` can now handle this), declaring named exports, or running one-time side effects. Mixing APIs is discouraged, and complex cases might require switching to an explicit `setup()` function.

```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>
```

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

### Vue Composition API: Exposing public properties with expose()

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

Demonstrates how to use the `expose` function from the setup context in Vue.js Composition API to control which properties are exposed to parent components via template refs. It shows how to expose nothing or selectively expose local state.

```javascript
export default {
  setup(props, { expose }) {
    // make the instance "closed" - 
    // i.e. do not expose anything to the parent
    expose()

    const publicCount = ref(0)
    const privateCount = ref(0)
    // selectively expose local state
    expose({ count: publicCount })
  }
}
```

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

### Vue.js Import Statements with Aliases

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

Demonstrates how to import components in Vue.js using ECMAScript module specifications and various alias configurations (build tool, '~', '@').

```Vue
<script setup>
import { ref } from 'vue'
import { componentA } from './Components'
import { componentB } from '@/Components'
import { componentC } from '~/Components'
</script>
```

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

### Vue Composition API: Bundle Efficiency

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

Explains how Vue's Composition API, particularly with `<script setup>`, leads to more efficient and minification-friendly production bundles. The template code directly accesses variables within the same scope, eliminating the need for instance proxies and enabling safer variable shortening.

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

const count = ref(0);

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

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

<!-- Compiled output is more efficient due to direct access to 'count' -->
```