Vue.js

https://vuejs.org/guide/
Admin
Vue.js is a JavaScript framework for building user interfaces with a declarative, component-based...
Tokens:88,904
Snippets:729
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install a plugin with app.use()

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

Shows how to install a plugin by passing it to app.use() with optional options. The app instance is created with createApp() and the plugin is installed globally.

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

const app = createApp({})

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

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

### Provide data with provide() in setup()

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

When not using <script setup>, call provide() synchronously inside setup().

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

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

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

### Install i18n plugin with options

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

Passes the translation object to the plugin during installation via additional parameters to app.use(). The example provides a greetings.hello translation.

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

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

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

### Declare props with props option and setup() function

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

When not using <script setup>, declare props with the props option and receive them as the first argument of setup(). This example logs the title prop inside setup().

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

```

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

### Define a plugin with install() method

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

A plugin can be an object with an install() method or a function. The install function receives the app instance and optional options passed to app.use().

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

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

### Expose a ref from setup()

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

Shows how to declare a ref in the setup() hook and return it to make it available in the template. The template then displays the ref without needing .value.

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

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

### Local registration with <script setup>

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

When using SFC with <script setup>, imported components can be locally used without registration.

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

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

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

### Local registration with components option (non-<script setup>)

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

In non-<script setup>, you need to use the components option to register components locally.

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

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

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

### async setup() hook

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

Shows a Composition API component with an async `setup()` hook that fetches data and returns posts. This makes the component an async dependency for `<Suspense>`.

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

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

### script setup with top-level await

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

Shows a `<script setup>` component with top-level `await` expressions, which automatically makes it an async dependency for `<Suspense>`.

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

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

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

### Use <script setup> for reactive state

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

Shows the simplified syntax using <script setup> in Single-File Components. Top-level imports, 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>
```

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

### Create a plugin object in separate file (plugins/i18n.js)

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

Recommended to create the plugin in a separate file and export it. This is the initial setup for the i18n plugin example.

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

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

### Declare props with object syntax in script setup

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

In `<script setup>`, pass an object to `defineProps()` to declare props with type constructors.

```js
// in <script setup>
defineProps({
  title: String,
  likes: Number
})
```

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

### Provide data with provide() in script setup

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

Use the provide() function inside <script setup> to provide data to descendants. The first argument is the injection key (string or Symbol), the second is the value.

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

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

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

### defineComponent() with setup()

Source: https://vuejs.org/guide/typescript/overview

Use defineComponent() to infer props passed to setup() when using Composition API without <script setup>. The example shows props.message inferred as string | undefined.

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

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

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

### Declare props with props option in non-script setup

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

In non-`<script setup>` components, use the `props` option. The `setup()` function receives props as its first argument.

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

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

### Import a child component with script setup

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

Shows how to import a child component in a `<script setup>` block. Imported components are automatically available to the template without explicit registration.

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

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

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

### Synchronous vs async watcher creation in setup()

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

Watchers created synchronously in setup() or <script setup> are automatically stopped on unmount, but watchers created in async callbacks are not bound to the component and must be stopped manually to avoid memory leaks.

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

// this one will be automatically stopped
watchEffect(() => {})

// ...this one will not!
setTimeout(() => {
  watchEffect(() => {})
}, 100)
</script>
```

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

### Define a post object for v-bind example

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

Example object used to demonstrate binding multiple properties with v-bind. Shown for both Options API and Composition API.

```javascript
export default {
  data() {
    return {
      post: {
        id: 1,
        title: 'My Journey with Vue'
      }
    }
  }
}
```

```javascript
const post = {
  id: 1,
  title: 'My Journey with Vue'
}
```

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

### Emit events using setup context

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

Declares emitted events with the emits option and accesses the emit function via the setup context's ctx property.

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

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

### Declare props with object syntax in non-script setup

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

In non-`<script setup>`, use the `props` option with an object to declare props with type constructors.

```js
// in non-<script setup>
export default {
  props: {
    title: String,
    likes: Number
  }
}
```

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

### inject() in setup()

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

When not using <script setup>, call inject() synchronously inside setup(). The injected value is returned from setup to be used in the component.

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

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

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

### Placeholder example with v-for

Source: https://vuejs.org/guide/best-practices/accessibility.html

Shows a form using placeholders. The example demonstrates that placeholders can be confused with pre-populated data, especially when contrast is fixed.

```HTML
<form
  class="demo"
  action="/dataCollectionLocation"
  method="post"
  autocomplete="on"
>
  <div v-for="item in formItems" :key="item.id" class="form-item">
    <label :for="item.id">{{ item.label }}: </label>
    <input
      type="text"
      :id="item.id"
      :name="item.id"
      v-model="item.value"
      :placeholder="item.placeholder"
    />
  </div>
  <button type="submit">Submit</button>
</form>
```

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

### Define a component with <script setup> in a .vue SFC

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

Use this Single-File Component (SFC) with the .vue extension when using a build step. It uses the Composition API with <script setup> and a ref for the count.

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

const count = ref(0)
</script>

<template>
  <button @click="count++">You clicked me {{ count }} times.</button>
</template>

```

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

### Access fallthrough attributes via ctx.attrs in setup()

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

When not using <script setup>, fallthrough attributes are exposed as ctx.attrs in the setup() function. The attrs object is not reactive, so use a prop or onUpdated() for reactivity.

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

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

### Inject i18n in script setup

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

Shows how to inject the plugin options into a component using the i18n key in a <script setup> block. The injected object is logged to the console.

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

const i18n = inject('i18n')

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

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

### Declare props with defineProps() in script setup

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

Use the `defineProps()` macro in `<script setup>` to declare props as an array of strings. The returned object exposes the props, accessible via `props.foo`.

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

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

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

### Component hierarchy with Suspense

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

Shows a component tree with nested async dependencies that `<Suspense>` waits on, including a component with async setup() and two async components.

```text
<Suspense>
└─ <Dashboard>
   ├─ <Profile>
   │  └─ <FriendStatus> (component with async setup())
   └─ <Content>
      ├─ <ActivityFeed> (async component)
      └─ <Stats> (async component)
```

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

### Example component tree for a Todo application

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

Shows a typical nested component tree structure for a Todo app, with a root component and its children. This illustrates how real applications are organized.

```text
App (root component)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics
```

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

### watchEffect() example

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

Uses watchEffect() to load a remote resource whenever the `todoId` ref changes. The callback runs immediately and tracks reactive dependencies automatically.

```javascript
const todoId = ref(1)
const data = ref(null)

watch(
  todoId,
  async () => {
    const response = await fetch(
      `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
    )
    data.value = await response.json()
  },
  { immediate: true }
)

```

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

### Composition API: watch function with question/answer example

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

Uses the `watch` function from Vue to trigger a callback when a ref changes. The example watches `question` and performs an async fetch when it contains a question mark. Includes the template.

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

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

### State-driven Animation: Template and CSS

Source: https://vuejs.org/guide/extras/animation.html

Template and CSS for the state-driven animation example. The template binds the background color to the x value and the CSS defines a transition on background-color.

```HTML
<div
  @mousemove="onMousemove"
  :style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }"
  class="movearea"
>
  <p>Move your mouse across this div...</p>
  <p>x: {{ x }}</p>
</div>
```

```CSS
.movearea {
  transition: 0.3s background-color ease;
}
```

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

### State-driven Animation: Options API (onMousemove)

Source: https://vuejs.org/guide/extras/animation.html

Options API version of the state-driven animation example. Uses data property 'x' and a method 'onMousemove' that updates it with the clientX coordinate.

```JavaScript
export default {
  data() {
    return {
      x: 0
    }
  },
  methods: {
    onMousemove(e) {
      this.x = e.clientX
    }
  }
}
```

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

### SFC with <script setup lang="ts">

Source: https://vuejs.org/guide/typescript/overview

Use <script setup lang="ts"> to enable TypeScript in Composition API SFCs. Template expressions also get type checking, as shown with count.toFixed(2).

```Vue
<script setup lang="ts">
// TypeScript enabled
import { ref } from 'vue'

const count = ref(1)
</script>

<template>
  <!-- type checking and auto-completion enabled -->
  {{ count.toFixed(2) }}
</template>
```

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

### useId() for unique IDs in reusable components

Source: https://vuejs.org/guide/best-practices/accessibility.html

When using `aria-labelledby` inside a reusable component, generate IDs with `useId()` to keep them unique per instance. This example shows a Vue SFC with `<script setup>` and `<template>`.

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

const sectionId = useId()
const nameId = useId()
</script>

<template>
  <section class="form-section">
    <h2 :id="sectionId">Billing</h2>

    <label :id="nameId" :for="`${nameId}-input`">Name: </label>
    <input
      :id="`${nameId}-input`"
      type="text"
      name="name"
      :aria-labelledby="`${sectionId} ${nameId}`"
    />
  </section>
</template>
```

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

### Client entry imports createApp and mounts

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

Imports the shared createApp function and mounts the app to '#app'.

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

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

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

### Basic Transition usage with template and CSS

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

Shows the minimal setup for a fade transition using `<Transition>` with `v-if` and the associated CSS classes. The template toggles a paragraph's visibility, and the CSS defines the enter/leave transition and opacity states.

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

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

### Create a Vue application instance with createApp

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

Starts a new Vue application by passing a root component options object to createApp. The returned app instance is used for configuration and mounting.

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

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

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

### Minimal Vue SSR example with renderToString

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

Runs on the server. Imports createSSRApp from 'vue' and renderToString from 'vue/server-renderer'. Creates an app with a template and renders it to HTML, logging the result. Outputs '<button>1</button>'.

```javascript
// this runs in Node.js on the server.
import { createSSRApp } from 'vue'
// Vue's server-rendering API is exposed under `vue/server-renderer`.
import { renderToString } from 'vue/server-renderer'

const app = createSSRApp({
  data: () => ({ count: 1 }),
  template: `<button @click="count++">{{ count }}</button>`
})

renderToString(app).then((html) => {
  console.log(html)
})
```

```shell
> node example.js
```

```html
<button>1</button>
```

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

### Create multiple application instances

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

Shows how to create and mount multiple Vue applications on the same page, each with its own scope. Useful for enhancing server-rendered HTML.

```javascript
const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')
```

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

### Using Prop as Initial Value (Composition API)

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

Shows the correct way to use a prop as an initial value for local data in the Composition API. The local ref is disconnected from future prop updates.

```js
const props = defineProps(['initialCounter'])

// counter only uses props.initialCounter as the initial value;
// it is disconnected from future prop updates.
const counter = ref(props.initialCounter)
```

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

### Per-request store creation and provide

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

Create a new app and store instance per request, provide the store at the app level, and expose both for hydration. This pattern is essential for SSR to avoid shared state across requests.

```javascript
// called on each request
export function createApp() {
  const app = createSSRApp(/* ... */)
  // create new instance of store per request
  const store = createStore(/* ... */)
  // provide store at the app level
  app.provide('store', store)
  // also expose store for hydration purposes
  return { app, store }
}
```

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

### inject() in <script setup>

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

Use the inject() function inside <script setup> to access data provided by an ancestor component. The key 'message' must match a provide key in the parent chain.

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

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

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

### Client hydration with createSSRApp and app.mount

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

Runs in the browser. Uses createSSRApp to create the same app as on the server and mounts it to '#app'. The mount performs hydration instead of creating new DOM nodes.

```javascript
// this runs in the browser.
import { createSSRApp } from 'vue'

const app = createSSRApp({
  // ...same app as on server
})

// mounting an SSR app on the client assumes
// the HTML was pre-rendered and will perform
// hydration instead of mounting new DOM nodes.
app.mount('#app')
```

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

### Template for minimal Vue app

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

HTML template used with the minimal Vue examples. It includes a button that increments the count and displays it using interpolation. This template is paired with the JavaScript examples to form a complete app.

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

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

### Access fallthrough attributes with useAttrs() in <script setup>

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

Use the useAttrs() API inside <script setup> to access fallthrough attributes. The returned attrs object always reflects the latest attributes but is not reactive, so watchers cannot observe changes.

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

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

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

### Options API: watch option with question/answer example

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

Uses the `watch` option to trigger a function when a reactive property changes. The example watches `question` and calls `getAnswer()` when it contains a question mark. Includes a template with an input bound via `v-model` and a paragraph displaying the answer.

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

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

### Pass static prop value

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

Example of passing a static string value to a prop.

```html
<BlogPost title="My journey with Vue" />
```

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

### Using Prop as Initial Value (Options API)

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

Shows the correct way to use a prop as an initial value for local data in the Options API. The local data property is disconnected from future prop updates.

```js
export default {
  props: ['initialCounter'],
  data() {
    return {
      // counter only uses this.initialCounter as the initial value;
      // it is disconnected from future prop updates.
      counter: this.initialCounter
    }
  }
}
```

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

### Hydrate on Media Query with hydrateOnMediaQuery

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

Hydrates when the specified media query matches. The example uses a max-width of 500px.

```javascript
import { defineAsyncComponent, hydrateOnMediaQuery } from 'vue'

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  hydrate: hydrateOnMediaQuery('(max-width:500px)')
})
```

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

### Minimal Vue app with Composition API

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

Creates a Vue app using the Composition API with a ref for reactive state. The app mounts to an element with id 'app'. This is the second minimal example, showing an alternative to the Options API.

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

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

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

### Define a component as a plain JavaScript object with Composition API

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

Use this when not using a build step. It uses the setup() function with a ref and returns the count. The template is inlined as a JavaScript string, and you can also target an in-DOM template via an ID selector.

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

export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
  // Can also target an in-DOM template:
  // template: '#my-template-element'
}

```

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

### Disabling attribute inheritance with defineOptions

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

Uses defineOptions in <script setup> to set inheritAttrs: false, preventing automatic attribute inheritance.

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

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

### Use emit function from defineEmits

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

Uses the emit function returned by defineEmits to emit events in <script setup>, where $emit is not directly accessible.

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

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

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

### App-level provide with app.provide()

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

Provide data at the app level so it is available to all components in the app. Useful for plugins.

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

const app = createApp({})

app.provide(/* key */ 'message', /* value */ 'hello!')
```

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

### Imperative watcher with this.$watch()

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

Shows how to create a watcher imperatively using the $watch() instance method, useful for conditionally setting up a watcher or watching in response to user interaction. It also allows stopping the watcher early.

```javascript
export default {
  created() {
    this.$watch('question', (newQuestion) => {
      // ...
    })
  }
}
```

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

### Browser-corrected DOM structure

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

The DOM structure the browser parses from the invalid HTML example, showing how the <p> is terminated and the <div> becomes a sibling.

```html
<p></p>
<div>hi</div>
<p></p>
```

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

### Declare props with TypeScript type annotations

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

When using TypeScript with `<script setup>`, you can declare props using pure type annotations with `defineProps<{ ... }>()`.

```vue
<script setup lang="ts">
defineProps<{
  title?: string
  likes?: number
}>()
</script>
```

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

### Declare emits with defineEmits macro

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

Declares the 'enlarge-text' event using the defineEmits macro in <script setup>. It returns an emit function equivalent to $emit.

```vue
<script setup>
defineProps(['title'])
defineEmits(['enlarge-text'])
</script>
```

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

### Provide options with app.provide()

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

Uses provide to give plugin users access to the options parameter. The plugin provides the options object under the key 'i18n'.

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

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

### Template: Inline expression for book count

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

Shows the cluttered template expression that checks if the author has books. This is the example that motivates using a computed property.

```template
<p>Has published books:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
```

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

### Import and create a ref with ref()

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

Shows the basic usage of ref() to create reactive state. The ref() function wraps the argument in an object with a .value property.

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

const count = ref(0)
```

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

### Provide per-instance state with provide() function

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

Use a function for provide to access this and provide per-instance data. Note this does not make the injection reactive.

```js
export default {
  data() {
    return {
      message: 'hello!'
    }
  },
  provide() {
    // use function syntax so that we can access `this`
    return {
      message: this.message
    }
  }
}
```

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

### Composition API: Reactive author object

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

Creates a reactive author object using the reactive() function. This is the data used in the Composition API example.

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

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

### Provide reactive state with provide()

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

Provide a ref as the value to establish a reactive connection with descendant components.

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

const count = ref(0)
provide('key', count)
```

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

### Declare props with props option and created hook

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

In non-`<script setup>` components, props are exposed on `this` when using the Options API, as shown in the `created` hook.

```js
export default {
  props: ['foo'],
  created() {
    // props are exposed on `this`
    console.log(this.foo)
  }
}
```
Tokens:
Raw