Vue.js

https://vuejs.org
Admin
Vue.js is an approachable, performant, and versatile progressive JavaScript framework for building...
Tokens:278,085
Snippets:3,553
Trust Score:10
Update:1 day ago
Show doc for...
Tokens:
Raw
### Install dependencies and start dev server with bun

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

After creating the project, navigate into the project directory, install dependencies, and start the development server using bun.

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

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

### Install dependencies and start dev server with npm

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

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

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

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

### Install dependencies and start dev server with pnpm

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

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

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

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

### Install dependencies and start dev server with Yarn

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

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

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

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

### Vue Global Build with Composition API setup() Example

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

Full example using the global build with Composition API. Uses setup() and ref to create a reactive message.

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

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

### resolveComponent Example in setup()

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

JavaScript example showing resolveComponent used inside setup() to resolve a component named 'ButtonCounter' and render it with h().

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

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

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

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

### app.use() example with MyPlugin

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

Shows how to import and install a plugin using app.use(). The plugin is installed only once even if app.use() is called multiple times.

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

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

app.use(MyPlugin)
```

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

### provide() example with static, reactive, and Symbol keys

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

Shows how to provide a static value, a reactive ref, and use a Symbol key. Must be called synchronously in setup().

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

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

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

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

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

### Install ESLint and eslint-plugin-vue

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

Recommended first step for linting in a Vite-based setup. Run this command to add ESLint and the Vue plugin as dev dependencies, then follow eslint-plugin-vue's configuration guide.

```shell
npm install -D eslint eslint-plugin-vue
```

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

### Return the ref from setup() when not using <script setup>

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

If not using <script setup>, make sure to return the ref from setup() so it is exposed to the template.

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

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

### Minimal Vue Example with Composition API

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

Creates a Vue app using the Composition API with a setup function returning a ref count. Mounts to the element with id 'app'.

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

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

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

### Vue ES Module Build with Composition API setup() Example

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

Uses native ES modules to import Vue from CDN with Composition API. Imports createApp and ref from the ES module build.

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

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

### Expose ref via setup()

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

Declare a ref in setup() and return it to make it available in the template.

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

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

### Provide a value with provide() in setup()

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

When not using <script setup>, call provide() synchronously inside setup(). The arguments are the same: injection key and value.

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

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

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

### Use <script setup> for concise Composition API

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

With <script setup>, top-level bindings are automatically exposed to the template, eliminating the need for setup().

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

const count = ref(0)

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

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

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

### Use useCssModule in <script setup> with CSS Modules

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

Example of using `useCssModule` in `<script setup>` to access CSS Modules classes and bind them in the template.

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

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

### Call useMouse and useFetch inside setup() in Options API

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

In the Options API, composables must be called inside setup() and their returned bindings returned from setup() so they are exposed to this and the template. Properties exposed by setup() can then be accessed on this, as shown in mounted().

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

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

### useModel() example in non-SFC component

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

Shows how to use useModel() in a raw setup() function. You must declare props and emits yourself, unlike with defineModel().

```javascript
export default {
  props: ['count'],
  emits: ['update:count'],
  setup(props) {
    const msg = useModel(props, 'count')
    msg.value = 1
  }
}
```

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

### Basic <script setup> syntax

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

Add the setup attribute to the <script> block to enable the syntax. The code inside is compiled as the component's setup() function and executes every time an instance is created.

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

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

### Async setup() in Options API

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

Shows an async setup() hook that fetches data and returns posts. The component becomes an async dependency for <Suspense>.

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

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

### Return a string from setup() render function

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

A render function returned from setup() can return a string instead of a vnode.

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

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

### Use TypeScript with script setup

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

lang="ts" can also be used with <script setup>. The example shows a ref with type checking and auto-completion in the template.

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

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

### Inject with inject() in setup() option

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

When not using <script setup>, call inject() synchronously inside setup() and return the injected value to expose it to the template.

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

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

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

### Return a render function from setup

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

Use this pattern when you want setup to return a render function that uses reactive state declared in the same scope. Returning a render function prevents returning anything else from setup.

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

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

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

### Access emit via setup context (Options API)

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

When not using <script setup>, declare emitted events with the emits option and access the emit function as a property of the setup context (second argument to setup()).

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

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

### Return an array of vnodes from setup() render function

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

A render function returned from setup() can return an array of vnodes to render multiple root nodes.

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

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

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

### app.use()

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

Installs a Vue.js plugin. The plugin can be an object with an install method or a function.

```APIDOC
## app.use()

### Description
Installs a Vue.js plugin. The plugin can be an object with an install method or a function.

### Method
Method on app instance

### Endpoint
N/A (SDK method)

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

### Response
Returns the app instance.

### Example
```js
const app = createApp(App)
app.use(MyPlugin, { someOption: true })
```
```

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

### useAttrs()

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

Returns the attrs object from the Setup Context, including fallthrough attributes of the current component. Intended for use in <script setup> where the setup context is not available.

```APIDOC
## useAttrs()

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

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

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

### Access fallthrough attributes via setup() context

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

When not using <script setup>, fallthrough attributes are exposed as ctx.attrs in the setup() function.

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

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

### Use top-level await in <script setup>

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

Top-level await is allowed inside <script setup> and compiles to async setup(). The component must be used with Suspense, which is experimental.

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

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

### Define say method in script setup

Source: https://vuejs.org/guide/essentials/event-handling

Defines a say function that shows an alert with the provided message. Use this in <script setup> to call from inline handlers.

```javascript
function say(message) {
  alert(message)
}
```

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

### Implement v-model in setup() render function

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

Provide modelValue and onUpdate:modelValue props manually to implement v-model in a render function using setup().

```javascript
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    return () =>
      h(SomeComponent, {
        modelValue: props.modelValue,
        'onUpdate:modelValue': (value) => emit('update:modelValue', value)
      })
  }
}
```

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

### JSX equivalent for accessing slots in setup()

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

JSX syntax for rendering default and named slots using the slots object from setup().

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

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

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

### Using extends with Composition API setup

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

When extending a component that uses Composition API, call the base component's setup() in the extending component's setup() to merge bindings.

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

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

### Destructure emit from setup context

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

The emit function can be safely destructured from the setup context.

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

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

### Teleport Defer Target Resolution Example

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

Example of using the `defer` prop (3.5+) to delay target resolution until after mount.

```html
<Teleport defer to="#late-div">...</Teleport>

<!-- somewhere later in the template -->
<div id="late-div"></div>
```

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

### Access slots in setup() render function

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

Use the slots object from setup() context to render default and named slots. Each slot is a function returning an array of vnodes.

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

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

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

### Declare emits in setup function with ctx.emit

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

When using an explicit setup function, declare events with the emits option and call ctx.emit to emit events.

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

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

### Declare props with object syntax in <script setup>

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

In <script setup>, use defineProps() with an object to specify prop types for validation.

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

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

### useSlots()

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

Returns the slots object from the Setup Context, which includes parent passed slots as callable functions that return Virtual DOM nodes. Intended for use in <script setup> where the setup context is not available.

```APIDOC
## useSlots()

### Description
Returns the `slots` object from the Setup Context, which includes parent passed slots as callable functions that return Virtual DOM nodes. This is intended to be used in `<script setup>` where the setup context object is not available.

If using TypeScript, `defineSlots()` should be preferred instead.

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

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

### Install Vitest and Testing Dependencies

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

Run this command in a Vite-based Vue project to install Vitest, happy-dom, and @testing-library/vue as dev dependencies.

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

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

### Declare render function in setup()

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

When using the Composition API, you can return a render function from setup(). The render function has access to props and reactive state declared in the same scope.

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

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

### setup()

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

The setup() function is the entry point for using the Composition API in a component. It is called before the component is created and serves as the place to define reactive state, computed properties, watchers, and lifecycle hooks.

```APIDOC
## setup()

### Description
The `setup()` function is the entry point for using the Composition API in a component. It is called before the component is created and serves as the place to define reactive state, computed properties, watchers, and lifecycle hooks.

### Method
Function

### Endpoint
`setup(props, context)`

### Parameters
- **props** (object) - The component's props.
- **context** (object) - The setup context containing `attrs`, `slots`, `emit`, and `expose`.

### Usage
- Basic Usage
- Accessing Props
- Setup Context
- Usage with Render Functions

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

export default {
  setup(props) {
    const count = ref(0)
    return { count }
  }
}
```
```

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

### Infer setup props with defineComponent

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

defineComponent also infers the types of props passed to setup() when using the Composition API without <script setup>. The example shows props.message typed as string | undefined.

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

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

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

### Basic setup() usage with ref and template

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

Declare reactive state with ref and expose it to the template by returning an object from setup(). The returned properties are also available on the component instance, as shown in 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>
```

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

### Disable attribute inheritance with defineOptions in <script setup>

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

Example using the `defineOptions` macro in `<script setup>` to set `inheritAttrs: false` and manually bind `$attrs`.

```vue
<script setup>
defineProps(['label', 'value'])
defineEmits(['input'])
defineOptions({
  inheritAttrs: false
})
</script>

<template>
  <label>
    {{ label }}
    <input
      v-bind="$attrs"
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    />
  </label>
</template>
```

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

### Use defineEmits to get emit function

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

defineEmits() returns an emit function equivalent to $emit, which can be used in <script setup>.

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

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

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

### Register components locally with the components option

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

Example showing how to register components locally, including shorthand and renaming.

```javascript
import Foo from './Foo.vue'
import Bar from './Bar.vue'

export default {
  components: {
    // shorthand
    Foo,
    // register under a different name
    RenamedBar: Bar
  }
}
```

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

### Use defineEmits to get emit function

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

defineEmits returns an emit function equivalent to $emit, allowing you to emit events from <script setup> where $emit is not directly accessible.

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

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

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

### v-on render function

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

Render function for event handling: props starting with 'on' followed by an uppercase letter are treated as event listeners. For example, onClick is equivalent to @click.

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

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

### Render a Vue App to String with renderToString

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

This example runs in Node.js on the server. It creates a Vue app with createSSRApp and uses renderToString from vue/server-renderer to get the HTML string, which is then logged to the console.

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

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

### Define author data in Options API

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

Defines a component's data with an author object containing a name and an array of books. Used as a starting point for the computed property example.

```javascript
export default {
  data() {
    return {
      author: {
        name: 'John Doe',
        books: [
          'Vue 2 - Advanced Guide',
          'Vue 3 - Basic Guide',
          'Vue 4 - The Mystery'
        ]
      }
    }
  }
}
```

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

### Define author reactive object in Composition API

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

Creates a reactive object with author data using the reactive() function. Used as a starting point for the computed property example in Composition API.

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

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

### Template type error without cast

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

When using <script setup lang="ts">, template expressions are type-checked. This example shows an error because x could be a string, so toFixed is not available.

```vue
<script setup lang="ts">
let x: string | number = 1
</script>

<template>
  <!-- error because x could be a string -->
  {{ x.toFixed(2) }}
</template>
```

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

### Set up a Vue plugin file (plugins/i18n.js)

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

Create a separate file for the plugin and export an object with an install function. This keeps plugin logic contained.

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

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

### useSSRContext Example in Vue SFC

Source: https://vuejs.org/api/ssr

Shows how to call useSSRContext inside a <script setup> block, guarded by import.meta.env.SSR to ensure it only runs during server-side rendering. The retrieved context can be used to attach information needed for rendering the final HTML, such as head metadata.

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

// make sure to only call it during SSR
// https://vite.dev/guide/ssr.html#conditional-logic
if (import.meta.env.SSR) {
  const ctx = useSSRContext()
  // ...attach properties to the context
}
</script>
```

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

### Render components by definition (Composition API with <script setup>)

Source: https://vuejs.org/api/built-in-special-elements

Uses <script setup> to import Foo and Bar, then binds is to a conditional expression that randomly selects one of the component definitions.

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

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

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

### Run the SSR Example with Node.js

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

Execute the example.js file using Node.js. This command runs the server-side rendering script.

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

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

### Access props in setup() when not using <script setup>

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

When not using <script setup>, declare props with the props option; the props object is passed to setup() as the first argument.

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

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

### inject() example with various default options

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

Demonstrates injecting static and reactive values, using Symbol keys, and providing default values or factories. Assumes a parent component has provided values as in the provide() example.

```vue
<script setup>
import { inject } from 'vue'
import { countSymbol } from './injectionSymbols'

// inject static value without default
const path = inject('path')

// inject reactive value
const count = inject('count')

// inject with Symbol keys
const count2 = inject(countSymbol)

// inject with default value
const bar = inject('path', '/default-path')

// inject with function default value
const fn = inject('function', () => {})

// inject with default value factory
const baz = inject('factory', () => new ExpensiveObject(), true)
</script>
```

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

### app.component() JavaScript example

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

Shows how to register a global component with an options object and retrieve it by name using app.component().

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

const app = createApp({})

// register an options object
app.component('MyComponent', {
  /* ... */
})

// retrieve a registered component
const MyComponent = app.component('MyComponent')
```

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

### Import a child component with script setup

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

With <script setup>, imported components are automatically available in the template without explicit registration. Use this for simpler, more concise component code.

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

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

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

### Client entry mounts the app in client.js

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

Imports the shared createApp and mounts the app to the #app element. This is the client-side entry point.

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

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

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

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

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

A Vue Single-File Component using the Composition API with `<script setup>`. It uses `ref` to create a reactive `greeting` variable and renders it with the same styling.

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

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

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

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

### Provide a value with provide() in <script setup>

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

Use the provide() function to make a value available to descendant components. The first argument is the injection key, and the second is the value.

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

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

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

### useAttrs() type signature

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

Returns the attrs object from the setup context, including fallthrough attributes. Intended for use in <script setup> where the setup context is not available.

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

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

### beforeCreate

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

Called immediately when the instance is initialized and props are resolved. The setup() hook of Composition API is called before any Options API hooks, even beforeCreate().

```APIDOC
## beforeCreate

### Description
Called when the instance is initialized. Called immediately when the instance is initialized and props are resolved. Then the props will be defined as reactive properties and the state such as `data()` or `computed` will be set up. Note that the `setup()` hook of Composition API is called before any Options API hooks, even `beforeCreate()`.

### Method
Lifecycle Hook

### Endpoint
`beforeCreate`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
Not applicable

### Response
#### Success Response (200)
Not applicable

#### Response Example
Not applicable
```

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

### Declare emitted events with defineEmits (script setup)

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

Use the defineEmits macro in <script setup> to declare the enlarge-text event. defineEmits is only usable in <script setup> and does not need to be imported.

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

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

### Basic renderToString Example

Source: https://vuejs.org/api/ssr

Creates an SSR app with a simple template and renders it to an HTML string using renderToString. The resulting HTML is logged to the console.

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

const app = createSSRApp({
  data: () => ({ msg: 'hello' }),
  template: `<div>{{ msg }}</div>`
})

;(async () => {
  const html = await renderToString(app)
  console.log(html)
})()
```

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

### createApp()

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

Creates an application instance. The first argument is the root component, and the second optional argument is the props to be passed to the root component.

```APIDOC
## createApp()

### Description
Creates an application instance. The first argument is the root component, and the second optional argument is the props to be passed to the root component.

### Method
Function

### Endpoint
`createApp(rootComponent: Component, rootProps?: object): App`

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

### Response
Returns an `App` instance.

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

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

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

const app = createApp(App)
```
```

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

### Props type inference with defineComponent without <script setup>

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

Use defineComponent to enable props type inference when not using <script setup>. The type of the props object passed to setup() is inferred from the props option.

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

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

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

### Declare props with props option array syntax in non-<script setup>

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

In components not using <script setup>, declare props using the props option as an array. 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)
  }
}
```

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

### Build for production with bun

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

Run this command to create a production-ready build of your Vue app using bun. The output will be placed in the ./dist directory.

```sh
$ bun run build
```

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

### Teleport Target Container Examples

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

Examples of specifying the target container for <Teleport> using a selector or element.

```html
<Teleport to="#some-id" />
<Teleport to=".some-class" />
<Teleport to="[data-teleport]" />
```
Tokens:
Raw