### Navigate, Install Dependencies, and Run Dev Server

Source: https://github.com/vuejs/docs/blob/main/src/guide/quick-start.md

After scaffolding a new Vue project, navigate into the project directory, install the necessary dependencies, and then start the local development server. This allows you to view and test your application during development. Instructions are provided for npm, pnpm, Yarn, and Bun.

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

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

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

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

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

### Create Vue 3 App with Global Build and Options API

Source: https://github.com/vuejs/docs/blob/main/src/guide/quick-start.md

This example illustrates how to set up a basic Vue 3 application using the global build from a CDN, leveraging the Options API. It initializes a Vue app, defines reactive data, and mounts it to an HTML element, showcasing a simple 'Hello Vue!' message.

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

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

### Returning Template Ref from `setup()` in Vue Composition API (without `<script setup>`)

Source: https://github.com/vuejs/docs/blob/main/src/guide/essentials/template-refs.md

This example demonstrates how to expose a template ref from the `setup()` function when not using `<script setup>` syntax in Vue's Composition API. The ref must be explicitly returned from `setup()` to be accessible in the template.

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

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

### Implement Basic Client-Side Routing with Vue (Composition and Options API)

Source: https://github.com/vuejs/docs/blob/main/src/guide/scaling-up/routing.md

This example demonstrates a minimal client-side routing setup using dynamic components and the browser's hashchange event. It provides a simple way to switch views based on URL hash changes without a dedicated routing library.

```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 Vue 3 App with Global Build and Composition API

Source: https://github.com/vuejs/docs/blob/main/src/guide/quick-start.md

This snippet demonstrates building a Vue 3 application using the global build from a CDN, employing the Composition API with the setup() option. It shows how to declare reactive state using ref and expose it to the template, mounting the application to an HTML element.

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

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

### Configure Vue Import Map and Initialize App (Composition API)

Source: https://github.com/vuejs/docs/blob/main/src/guide/quick-start.md

This HTML snippet demonstrates configuring an import map for the 'vue' module from a CDN. It then initializes a basic Vue application using the Composition API with a `setup()` function, mounting it to a div with id 'app' and displaying a reactive message.

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

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

### Create Vue 3 App with ES Module Build and Composition API

Source: https://github.com/vuejs/docs/blob/main/src/guide/quick-start.md

This snippet demonstrates building a Vue 3 application using the ES module build from a CDN, implementing the Composition API with setup(). It uses <script type="module"> to import createApp and ref, defining reactive state and mounting the application to an HTML element.

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

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

### Vue Composition API: useCssModule in Script Setup Example

Source: https://github.com/vuejs/docs/blob/main/src/api/sfc-css-features.md

Provides a complete example of using `useCssModule` within a `<script setup>` block in a Vue SFC. It shows how to import `useCssModule`, retrieve the default CSS Module classes, and then apply them to an element in the component's template, integrating CSS Modules seamlessly with the Composition API.

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

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

### Vue Script Setup with Async Component Import

Source: https://github.com/vuejs/docs/blob/main/src/examples/index.md

Demonstrates the complete script section of a Vue component that registers an async component with lazy loading. Uses defineAsyncComponent to defer loading of ExampleRepl.vue and provides visual feedback during the loading phase with a ReplLoading component.

```vue
<script>
import { defineAsyncComponent } from 'vue'
import ReplLoading from '@theme/components/ReplLoading.vue'

export default {
  components: {
    ExampleRepl: defineAsyncComponent({
      loader: () => import('./ExampleRepl.vue'),
      loadingComponent: ReplLoading
    })
  }
}
</script>
```

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

### Create Vue 3 App with ES Module Build and Options API

Source: https://github.com/vuejs/docs/blob/main/src/guide/quick-start.md

This example shows how to create a Vue 3 application using the ES module build from a CDN, utilizing the Options API. It employs <script type="module"> for native ES module support, allowing direct import of createApp to define reactive data and mount the application.

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

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

### Define Vue Component with TypeScript and Composition API `setup`

Source: https://github.com/vuejs/docs/blob/main/src/guide/typescript/overview.md

This example illustrates how `defineComponent()` facilitates type inference for props when using the Composition API with a `setup` function, specifically without `<script setup>`. It shows how to define a prop and access it within the `setup` function, ensuring correct type checking for the `props` object.

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

export default defineComponent({
  // type inference enabled
  props: {
    message: String
  },
  setup(props) {
    props.message // type: string | undefined
  }
})
```

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

### Main HTML File Importing a Vue Component Module

Source: https://github.com/vuejs/docs/blob/main/src/guide/quick-start.md

This HTML snippet defines the main application entry point. It imports `createApp` from Vue and a custom component (`MyComponent`) from a local JavaScript file, then mounts the component to the DOM. This setup requires a local HTTP server to function correctly due to ES module security restrictions.

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

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

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

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

### Call Composables in Options API setup() Method

Source: https://github.com/vuejs/docs/blob/main/src/guide/reusability/composables.md

Demonstrates how to use composables within the Options API by calling them inside the setup() function and returning their bindings. The returned properties are exposed to the component instance via 'this' and are accessible in the template. This example imports two composables (useMouse and useFetch) and exposes their returned values.

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

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

### Scaffold Vue Application using create-vue with npm, pnpm, or yarn

Source: https://github.com/vuejs/docs/blob/main/src/guide/quick-start.md

This command-line snippet demonstrates how to initialize a new Vue.js Single Page Application (SPA) on your local machine. It utilizes `create-vue` to set up a project with a build configuration based on Vite, enabling the use of Vue Single-File Components (SFCs). Ensure Node.js version `^20.19.0 || >=22.12.0` is installed before running.

```sh
$ npm create vue@latest
```

```sh
$ pnpm create vue@latest
```

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

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

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

### Basic setup() with Reactive State in Vue

Source: https://github.com/vuejs/docs/blob/main/src/api/composition-api-setup.md

Demonstrates declaring reactive state using ref() and exposing it to the template by returning an object from setup(). The returned properties are available in the template and other Options API hooks. Refs are automatically unwrapped in templates.

```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.js Script Setup: Declaring Basic Generic Type Parameters

Source: https://github.com/vuejs/docs/blob/main/src/api/sfc-script-setup.md

This example illustrates how to declare generic type parameters using the `generic` attribute on the `<script setup>` tag in Vue.js. It defines a component that accepts props with a generic type `T` for an array of items and a selected item, similar to TypeScript's generic syntax.

```vue
<script setup lang="ts" generic="T">
defineProps<{
  items: T[]
  selected: T
}>()
</script>
```

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

### Composition API Component with Lifecycle Hooks

Source: https://github.com/vuejs/docs/blob/main/src/guide/introduction.md

A comprehensive Composition API example using `<script setup>` with imported functions for reactive state and lifecycle management. Shows how `ref()` creates reactive state, functions mutate state, and `onMounted()` handles lifecycle events with cleaner syntax and less boilerplate.

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

const count = ref(0)

function increment() {
  count.value++
}

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

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

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

### Basic <script setup> Syntax in Vue

Source: https://github.com/vuejs/docs/blob/main/src/api/sfc-script-setup.md

Demonstrates the fundamental <script setup> syntax by adding the setup attribute to a script block. Code inside executes every time a component instance is created, unlike normal script blocks which execute once on import.

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

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

### Destructure Setup Context Parameters

Source: https://github.com/vuejs/docs/blob/main/src/api/composition-api-setup.md

Demonstrates destructuring the setup context object to directly access attrs, slots, emit, and expose. Since the context is non-reactive, destructuring is safe and recommended for cleaner code.

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

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

### Declare Type-Only Props and Emits in Vue 3 Script Setup (TypeScript)

Source: https://github.com/vuejs/docs/blob/main/src/api/sfc-script-setup.md

This example illustrates how to declare props and emits using a pure-type syntax with `defineProps` and `defineEmits` in Vue 3's `<script setup>`. By passing a literal type argument, the compiler automatically generates the equivalent runtime declarations, ensuring type safety and reducing boilerplate. It also shows the succinct named tuple syntax for emits (Vue 3.3+).

```ts
const props = defineProps<{
  foo: string
  bar?: number
}>()

const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

// 3.3+: alternative, more succinct syntax
const emit = defineEmits<{
  change: [id: number] // named tuple syntax
  update: [value: string]
}>()
```

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

### Top-level await in <script setup>

Source: https://github.com/vuejs/docs/blob/main/src/api/sfc-script-setup.md

Perform asynchronous operations directly at the top level of `<script setup>`. The resulting code is compiled as `async setup()` and preserves the current component instance context after the `await`. Requires `Suspense`.

```APIDOC
## Top-level `await`

### Description
Perform asynchronous operations directly at the top level of `<script setup>`. The resulting code is compiled as `async setup()` and preserves the current component instance context after the `await`. Requires `Suspense`.

### Method
Language Feature

### Endpoint
N/A

### Parameters
N/A

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

### Response
#### Success Response (N/A)
The variable will hold the resolved value of the awaited expression.

#### Response Example
```javascript
const post = { id: 1, title: "My fetched post" }
```
```

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

### Access Setup Context Object in setup() Function

Source: https://github.com/vuejs/docs/blob/main/src/api/composition-api-setup.md

Shows how to access the setup context object passed as the second argument to setup(). The context provides attrs, slots, emit, and expose properties. The context object is non-reactive and can be safely destructured.

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

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

### Extend Component with Composition API Setup

Source: https://github.com/vuejs/docs/blob/main/src/api/options-composition.md

Shows how to extend a component using Composition API by manually calling the base component's setup() function within the extending component's setup(). This workaround merges logic from both components while using Composition API.

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

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

### Expose Methods with Render Function in Vue 3 setup

Source: https://github.com/vuejs/docs/blob/main/src/api/composition-api-setup.md

This snippet shows how to expose methods to a parent component when returning a render function from Vue 3's `setup`. By utilizing the `expose` function provided in the setup context, methods like `increment` can be made available via template refs, even while `setup` returns a render function for component rendering.

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

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

### Install Vue.js Plugin with app.use()

Source: https://github.com/vuejs/docs/blob/main/src/guide/reusability/plugins.md

Demonstrates the basic syntax for installing a plugin into a Vue application. The app.use() method accepts a plugin and optional configuration options that are passed to the plugin's install function.

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

const app = createApp({})

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

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

### Import and Use Components in Vue <script setup>

Source: https://github.com/vuejs/docs/blob/main/src/api/sfc-script-setup.md

Demonstrates importing and using custom components within <script setup>. Imported components are treated as variables and can be used directly as custom component tags in the template without registration.

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

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

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

### Inject data in Composition API setup function

Source: https://github.com/vuejs/docs/blob/main/src/guide/components/provide-inject.md

Use the inject() function inside the setup() function to receive provided data. This approach is used when not using script setup syntax. The inject() call must be made synchronously within setup().

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

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

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

### Return Render Function from Vue 3 setup

Source: https://github.com/vuejs/docs/blob/main/src/api/composition-api-setup.md

This snippet demonstrates how to return a render function directly from Vue 3's `setup` function. It uses the `h` function to create a `div` element that displays a reactive `count` value. This approach is useful for highly dynamic rendering but prevents returning other properties or methods directly from `setup`.

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

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

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

### Import Helper Functions in Vue <script setup>

Source: https://github.com/vuejs/docs/blob/main/src/api/sfc-script-setup.md

Demonstrates importing and using helper functions directly in template expressions within <script setup>. Imported functions are automatically exposed to the template without requiring the methods option.

```vue
<script setup>
import { capitalize } from './helpers'
</script>

<template>
  <div>{{ capitalize('hello') }}</div>
</template>
```

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

### Expose Refs in Component setup() Function

Source: https://github.com/vuejs/docs/blob/main/src/guide/essentials/reactivity-fundamentals.md

Demonstrates how to declare refs in a component's setup() function and return them to make them accessible in the component's template. The setup() hook is the entry point for Composition API in Vue components.

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

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

    return {
      count
    }
  }
}
```

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

### Declare Props with Array Syntax in non-script setup Composition API

Source: https://github.com/vuejs/docs/blob/main/src/guide/components/props.md

In non-`<script setup>` components, declare props using the `props` option with an array of strings. The `setup()` function receives the props object as its first argument.

```js
export default {
  props: ['foo'],
  setup(props) {
    // setup() receives props as the first argument.
    console.log(props.foo)
  }
}
```

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

### Install Vue Plugins with app.use()

Source: https://github.com/vuejs/docs/blob/main/src/api/application.md

The `app.use()` method installs a Vue plugin into the application instance, extending its functionality. It expects the plugin as the first argument, which can be an object with an `install()` method or a function, and optional plugin options as subsequent arguments. Plugins are installed only once, even if `app.use()` is called multiple times with the same plugin.

```typescript
interface App {
  use(plugin: Plugin, ...options: any[]): this
}
```

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

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

app.use(MyPlugin)
```

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

### Utilize Top-Level Await in Vue 3 Script Setup

Source: https://github.com/vuejs/docs/blob/main/src/api/sfc-script-setup.md

`<script setup>` supports top-level `await`, allowing asynchronous operations directly within the setup block without an explicit `async` function. The compiler transforms this into `async setup()`, preserving the component instance context. This feature requires the use of Vue's experimental `Suspense` component for proper handling of asynchronous component loading.

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

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

### Define Vue.js Plugin with Install Method

Source: https://github.com/vuejs/docs/blob/main/src/guide/reusability/plugins.md

Shows the standard plugin structure as an object with an install() method. The install function receives the app instance and any additional options passed during plugin registration.

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

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

### Provide Data in Vue Composition API setup function

Source: https://github.com/vuejs/docs/blob/main/src/guide/components/provide-inject.md

Illustrates how to use the `provide()` function when not utilizing `<script setup>`, ensuring it is called synchronously inside the `setup()` function. This method allows components to provide data to their descendants using a specified key.

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

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

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

### Accessing Props in setup() Function

Source: https://github.com/vuejs/docs/blob/main/src/api/composition-api-setup.md

Shows how to access props passed to a component within the setup() function. Props are reactive and update when new values are passed. Destructuring props loses reactivity, so direct access via props.xxx is recommended.

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

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

### Use defineEmits to Get Emit Function in Script Setup (Vue.js)

Source: https://github.com/vuejs/docs/blob/main/src/guide/essentials/component-basics.md

When using `<script setup>`, `defineEmits` returns an `emit` function that can be used to programmatically trigger events within the script block. This example demonstrates how to declare an event and then use the returned `emit` function.

```vue
<script setup>
const emit = defineEmits(['enlarge-text'])

emit('enlarge-text')
</script>
```

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

### Create Reactive State with ref in Vue <script setup>

Source: https://github.com/vuejs/docs/blob/main/src/api/sfc-script-setup.md

Shows how to create reactive state using the ref() function from Vue's Reactivity API within <script setup>. Refs are automatically unwrapped when referenced in templates, allowing direct increment operations.

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

const count = ref(0)
</script>

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

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

### Import Demo Component for Vue KeepAlive Examples

Source: https://github.com/vuejs/docs/blob/main/src/guide/built-ins/keep-alive.md

This snippet imports `SwitchComponent.vue` using `<script setup>` syntax. This component is utilized in the accompanying examples to demonstrate the behavior of dynamic components with and without `<KeepAlive>`, effectively showcasing state preservation.

```vue
<script setup>
import SwitchComponent from './keep-alive-demos/SwitchComponent.vue'
</script>
```

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

### Execute Server-Side Rendering Script

Source: https://github.com/vuejs/docs/blob/main/src/guide/scaling-up/ssr.md

Run the `example.js` file to execute the server-side rendering process and print the resulting HTML to the console.

```sh
> node example.js
```

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

### Configure isCustomElement in Vue CLI

Source: https://github.com/vuejs/docs/blob/main/src/guide/extras/web-components.md

Use this vue.config.js setup with Vue CLI to specify that tags starting with 'ion-' should be recognized as custom elements, preventing Vue from attempting to resolve them as Vue components.

```js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => ({
        ...options,
        compilerOptions: {
          // treat any tag that starts with ion- as custom elements
          isCustomElement: (tag) => tag.startsWith('ion-')
        }
      }))
  }
}
```

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

### Define Event Handler in Vue Composition API

Source: https://github.com/vuejs/docs/blob/main/src/tutorial/src/step-4/description.md

This example demonstrates how to define an event handler function (`increment`) using Vue's Composition API. It shows two common patterns: directly within `<script setup>` where it updates a `ref`, and within the `setup()` function where the `ref` and `increment` function are returned for template access.

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

const count = ref(0)

function increment() {
  // update component state
  count.value++
}
</script>
```

```js
setup() {
  const count = ref(0)

  function increment(e) {
    // update component state
    count.value++
  }

  return {
    count,
    increment
  }
}
```

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

### Initialize todos data (Options API)

Source: https://github.com/vuejs/docs/blob/main/src/style-guide/rules-essential.md

Example data structure for demonstrating v-for and key usage with a list of todo items.

```js
data() {
  return {
    todos: [
      {
        id: 1,
        text: 'Learn to use v-for'
      },
      {
        id: 2,
        text: 'Learn to use key'
      }
    ]
  }
}
```

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

### Implement read-only and writable computed properties in Vue.js

Source: https://github.com/vuejs/docs/blob/main/src/api/options-state.md

Practical example demonstrating both read-only and writable computed properties in a Vue.js component. Shows how to define a simple computed getter (aDouble) and a writable computed property with both get and set methods (aPlus). The example includes lifecycle hook usage to demonstrate computed property behavior.

```javascript
export default {
  data() {
    return { a: 1 }
  },
  computed: {
    // readonly
    aDouble() {
      return this.a * 2
    },
    // writable
    aPlus: {
      get() {
        return this.a + 1
      },
      set(v) {
        this.a = v - 1
      }
    }
  },
  created() {
    console.log(this.aDouble) // => 2
    console.log(this.aPlus) // => 2

    this.aPlus = 3
    console.log(this.a) // => 2
    console.log(this.aDouble) // => 4
  }
}
```

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

### Build Vue Application for Production Deployment

Source: https://github.com/vuejs/docs/blob/main/src/guide/quick-start.md

Generate a production-ready build of your Vue application. This command compiles and optimizes your project's assets, placing the output in the `./dist` directory, ready for deployment to a web server. This process is supported across npm, pnpm, Yarn, and Bun.

```npm
$ npm run build
```

```pnpm
$ pnpm run build
```

```yarn
$ yarn build
```

```bun
$ bun run build
```

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

### Implement Computed Property for Conditional Logic in Vue Composition API

Source: https://github.com/vuejs/docs/blob/main/src/guide/essentials/computed.md

This example demonstrates creating a reactive computed property using Vue's Composition API with '<script setup>'. The 'publishedBooksMessage' computed ref automatically updates based on the 'author.books' array, providing a clean and reactive way to handle derived state and integrate it into the template.

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

const author = reactive({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

// a computed ref
const publishedBooksMessage = computed(() => {
  return author.books.length > 0 ? 'Yes' : 'No'
})
</script>

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>
```

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

### Simplify Composition API with script setup Syntax

Source: https://github.com/vuejs/docs/blob/main/src/guide/essentials/reactivity-fundamentals.md

Shows the modern <script setup> syntax for Single-File Components (SFCs) which eliminates the need to manually expose state and methods. Top-level variables and functions are automatically available in the template.

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

const count = ref(0)

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

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

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

### Define Custom Directive with Composition API

Source: https://github.com/vuejs/docs/blob/main/src/guide/reusability/custom-directives.md

Creates a custom directive using the Composition API with <script setup>. The vHighlight directive adds a CSS class to an element when mounted. Variables starting with 'v' prefix are automatically available as directives in templates.

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

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

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

### Setup Composition API - Conditional Rendering State

Source: https://github.com/vuejs/docs/blob/main/src/guide/essentials/conditional.md

Example of initializing reactive state using Vue's Composition API with the ref function. This state can be used with conditional rendering directives like v-if and v-show to control element visibility.

```javascript
import { ref } from 'vue'
const awesome = ref(true)
```

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

### Access v-model Modifiers with defineModel()

Source: https://github.com/vuejs/docs/blob/main/src/api/sfc-script-setup.md

Destructure the return value of defineModel() to access modifiers used with the v-model directive. Use get and set transformer options to transform values when reading or syncing back to the parent, such as applying the trim modifier.

```javascript
const [modelValue, modelModifiers] = defineModel()

// corresponds to v-model.trim
if (modelModifiers.trim) {
  // ...
}

const [modelValue, modelModifiers] = defineModel({
  // get() omitted as it is not needed here
  set(value) {
    // if the .trim modifier is used, return trimmed value
    if (modelModifiers.trim) {
      return value.trim()
    }
    // otherwise, return the value as-is
    return value
  }
})
```

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

### Access Previous Value in Computed Property - Composition API

Source: https://github.com/vuejs/docs/blob/main/src/guide/essentials/computed.md

Shows how to access the previous value of a computed property using Vue's Composition API with the `<script setup>` syntax. The first argument of the computed getter function provides access to the previous value.

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

const count = ref(2)

const alwaysSmall = computed((previous) => {
  if (count.value <= 3) {
    return count.value
  }
  return previous
})
</script>
```

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

### Scaffold a New Vue Project with create-vue

Source: https://github.com/vuejs/docs/blob/main/src/guide/quick-start.md

Use the official `create-vue` tool to initialize a new Vue.js project. This command executes the scaffolding tool, which then prompts the user for various optional features like TypeScript, JSX, routing, state management, testing, ESLint, and Prettier. This snippet demonstrates usage with Yarn and Bun package managers.

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

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

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

### Create a Minimal Vue.js Application (Options API, Composition API, and Template)

Source: https://github.com/vuejs/docs/blob/main/src/guide/introduction.md

This example demonstrates how to set up a basic Vue.js application using both the Options API and the Composition API, along with the corresponding HTML template. It showcases declarative rendering and reactivity by displaying a clickable button that increments a counter. The application mounts to an HTML element with the ID 'app'.

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

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

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

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

```vue-html
<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>
```

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

### Configure Vite Alias for Vue in HTML-mode

Source: https://github.com/vuejs/docs/blob/main/src/tutorial/src/step-1/description.md

This JavaScript configuration snippet for `vite.config.js` shows how to set up a resolve alias for Vue. It directs the 'vue' import to the `vue.esm-bundler.js` file, which is crucial for ensuring proper Vue resolution when working in HTML-mode without a build step in a Vite project.

```javascript
export default {
  resolve: {
    alias: {
      vue: 'vue/dist/vue.esm-bundler.js'
    }
  }
}
```

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

### Client Entry Point (client.js)

Source: https://github.com/vuejs/docs/blob/main/src/guide/scaling-up/ssr.md

Imports the universal app creation logic and mounts the Vue application to the DOM on the client side.

```js
import { createApp } from './app.js'

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

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

### Vue Single-File Component with Composition API

Source: https://github.com/vuejs/docs/blob/main/src/guide/introduction.md

A complete Single-File Component using the Composition API style with `<script setup>`. Demonstrates reactive state using `ref()`, function definitions, and lifecycle hooks with less boilerplate. The component provides the same counter functionality as the Options API example.

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

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

### Configure Vue Import Map and Initialize App (Options API)

Source: https://github.com/vuejs/docs/blob/main/src/guide/quick-start.md

This HTML snippet shows how to define an import map within a script tag to resolve the 'vue' module from a CDN URL. It then initializes a basic Vue application using the Options API, mounting it to a div with id 'app' and displaying a reactive message.

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

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

### Handle Event Listeners with v-on in Render Functions

Source: https://github.com/vuejs/docs/blob/main/src/guide/extras/render-function.md

Props starting with 'on' followed by an uppercase letter are treated as event listeners in render functions. The onClick prop is equivalent to @click in templates. Demonstrates basic event listener setup in both h() function and JSX syntax.

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

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

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

### Using $ref for Reactive Variables in Vue Composition API

Source: https://github.com/vuejs/docs/blob/main/src/guide/extras/reactivity-transform.md

This example demonstrates the use of the `$ref` compile-time macro within a Vue `<script setup>` block. It allows defining a reactive variable that can be accessed and modified like a normal JavaScript variable, abstracting away the need for `.value` access.

```vue
<script setup>
let count = $ref(0)

console.log(count)

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

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

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

### Include Vue 3 Global Build from CDN

Source: https://github.com/vuejs/docs/blob/main/src/guide/quick-start.md

This snippet demonstrates how to include the Vue 3 global build directly into an HTML page using a <script> tag. It fetches the Vue library from a CDN like unpkg, making it available globally as Vue for immediate use without a build step.

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

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

### Dynamic Components with :is Binding in Vue

Source: https://github.com/vuejs/docs/blob/main/src/api/sfc-script-setup.md

Shows how to use dynamic components with the :is binding in <script setup>. Components are referenced as variables and can be used in conditional expressions for dynamic component selection.

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

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

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

### Expose Public Properties from Component Instance

Source: https://github.com/vuejs/docs/blob/main/src/api/composition-api-setup.md

Shows how to use the expose() function to explicitly control which properties are accessible to parent components via template refs. This allows limiting the public API of a component by selectively exposing only certain properties.

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

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

### Render dynamic components by definition in Vue Composition API

Source: https://github.com/vuejs/docs/blob/main/src/api/built-in-special-elements.md

This Vue Composition API example, utilizing `<script setup>`, illustrates how to render components dynamically by directly binding the `is` prop to component definitions. It shows a conditional rendering of either `Foo` or `Bar` components based on a random condition.

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

<template>
  <component :is="Math.random() > 0.5 ? Foo : Bar" />
</template>
```

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

### Import Vue ES Module for HTML-mode without Build Step

Source: https://github.com/vuejs/docs/blob/main/src/tutorial/src/step-1/description.md

This JavaScript import statement demonstrates how to directly import Vue's ES module bundler distribution. This approach is necessary when using Vue in HTML-mode without a build step, ensuring the browser can correctly resolve the Vue library.

```javascript
import { ... } from 'vue/dist/vue.esm-bundler.js'
```

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

### Vue Component Definition (Composition API) for Module Splitting

Source: https://github.com/vuejs/docs/blob/main/src/guide/quick-start.md

This JavaScript file defines a reusable Vue component using the Composition API. It exports a default object with a `setup()` function that uses `ref` for reactive state and a `template` string for its structure. This component is designed to be imported as a module into a main application file.

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

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

### Initialize todos data (Composition API)

Source: https://github.com/vuejs/docs/blob/main/src/style-guide/rules-essential.md

Example reactive data structure for demonstrating v-for and key usage with a list of todo items.

```js
const todos = ref([
  {
    id: 1,
    text: 'Learn to use v-for'
  },
  {
    id: 2,
    text: 'Learn to use key'
  }
])
```

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

### Define and Consume Shared Reactive Store in Vue

Source: https://github.com/vuejs/docs/blob/main/src/guide/scaling-up/state-management.md

This snippet demonstrates how to create a globally shared reactive store using Vue's `reactive()` API and consume it in different components. It shows examples for both Composition API (`<script setup>`) and Options API, illustrating how components can access and display the shared state.

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

export const store = reactive({
  count: 0
})
```

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

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

export default {
  data() {
    return {
      store
    }
  }
}
</script>

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

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

export default {
  data() {
    return {
      store
    }
  }
}
</script>

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

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

### Access Props in Setup Function without Script Setup

Source: https://github.com/vuejs/docs/blob/main/src/guide/essentials/component-basics.md

Shows how to access props in the setup() function when not using <script setup>. The props object is passed as the first argument to setup(), allowing access to declared props in the component's JavaScript logic.

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

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

### Importing CSS from npm Packages using `src` in Vue

Source: https://github.com/vuejs/docs/blob/main/src/api/sfc-spec.md

This example illustrates how to import resources, specifically a CSS file, directly from an installed npm package into a Vue component's style block using the `src` attribute. This allows components to leverage styles provided by third-party libraries without manual copying or complex build configurations.

```vue
<!-- import a file from the installed "todomvc-app-css" npm package -->
<style src="todomvc-app-css/index.css" />
```

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

### Provide Data in Vue Composition API with script setup

Source: https://github.com/vuejs/docs/blob/main/src/guide/components/provide-inject.md

Demonstrates how to use the `provide()` function within a `<script setup>` block. It accepts an injection key (string or Symbol) and a value, making the value available to all descendant components without prop drilling.

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

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

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

### Access Fallthrough Attributes in Composition API setup() Context

Source: https://github.com/vuejs/docs/blob/main/src/guide/components/attrs.md

Accesses fallthrough attributes via the `ctx.attrs` property in the `setup()` function context parameter. Provides access to all fallthrough attributes in the setup function without using `<script setup>` syntax.

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

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

### Exporting Vue Custom Elements from a Library

Source: https://github.com/vuejs/docs/blob/main/src/guide/extras/web-components.md

This example shows how to create an entry point for a custom elements library. It exports individual custom element constructors and a convenience function to register all elements at once.

```js
import { defineCustomElement } from 'vue'
import Foo from './MyFoo.ce.vue'
import Bar from './MyBar.ce.vue'

const MyFoo = defineCustomElement(Foo)
const MyBar = defineCustomElement(Bar)

// export individual elements
export { MyFoo, MyBar }

export function register() {
  customElements.define('my-foo', MyFoo)
  customElements.define('my-bar', MyBar)
}
```