# Global API

# createApp

Returns an application instance which provides an application context. The entire component tree mounted by the application instance share the same context.

const app = Vue.createApp({})

You can chain other methods after createApp, they can be found in Application API

# Arguments

The function receives a root component options object as a first parameter:

const app = Vue.createApp({
  data() {
    return {
      ...
    }
  },
  methods: {...},
  computed: {...}
  ...
})

1
2
3
4
5
6
7
8
9
10

With the second parameter, we can pass root props to the application:

const app = Vue.createApp(
  {
    props: ['username']
  },
  { username: 'Evan' }
)

1
2
3
4
5
6

<div id="app">
  <!-- Will display 'Evan' -->
  {{ username }}
</div>

1
2
3
4

# Typing

interface Data {
  [key: string]: unknown
}

export type CreateAppFunction<HostElement> = (
  rootComponent: PublicAPIComponent,
  rootProps?: Data | null
) => App<HostElement>

1
2
3
4
5
6
7
8

# h

Returns a returns "virtual node", usually abbreviated to VNode: a plain object which contains information describing to Vue what kind of node it should render on the page, including descriptions of any child nodes. It is intended for manually written render functions:

render() {
  return Vue.h('h1', {}, 'Some title')
}

1
2
3

# Arguments

Accepts three arguments: tag, props and children

# tag

Type: String | Object | Function | null
Details:

An HTML tag name, a component, an async component or null. Using null would render a comment. This parameter is required

# props

Type: Object
Details:

An object corresponding to the attributes, props and events we would use in a template. Optional

# children

Type: String | Array | Object

Details:

Children VNodes, built using h(), or using strings to get "text VNodes" or an object with slots. Optional

h('div', {}, [
  'Some text comes first.',
  h('h1', 'A headline'),
  h(MyComponent, {
    someProp: 'foobar'
  })
])

1
2
3
4
5
6
7

# defineComponent

Implementation-wise defineComponent does nothing but return the object passed to it. However, in terms of typing, the returned value has a synthetic type of a constructor for manual render function, TSX and IDE tooling support.

# Arguments

An object with component options

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  data() {
    return { count: 1 }
  },
  methods: {
    increment() {
      this.count++
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12

# defineAsyncComponent

Creates an async component that will be loaded only when it's necessary.

# Arguments

For basic usage, defineAsyncComponent can accept a a factory function returning a Promise. Promise's resolve callback should be called when you have retrieved your component definition from the server. You can also call reject(reason) to indicate the load has failed.

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
)

app.component('async-component', AsyncComp)

1
2
3
4
5
6
7

When using local registration, you can also directly provide a function that returns a Promise:

import { createApp, defineAsyncComponent } from 'vue'

createApp({
  // ...
  components: {
    AsyncComponent: defineAsyncComponent(() =>
      import('./components/AsyncComponent.vue')
    )
  }
})

1
2
3
4
5
6
7
8
9
10

For advanced usage, defineAsyncComponent can accept an object:

The defineAsyncComponent method can also return an object of the following format:

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent({
  // The factory function
  loader: () => import('./Foo.vue')
  // A component to use while the async component is loading
  loadingComponent: LoadingComponent,
  // A component to use if the load fails
  errorComponent: ErrorComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000,
  // A function that returns a boolean indicating whether the async component should retry when the loader promise rejects
  retryWhen: error => error.code !== 404,
  // Maximum allowed retries number
  maxRetries: 3,
  // Defining if component is suspensible
  suspensible: false
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

See also: Dynamic and Async components

# nextTick

Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.

import { createApp, nextTick } from 'vue'

const app = createApp({
  setup() {
    const message = ref('Hello!')
    const changeMessage = async newMessage => {
      message.value = newMessage
      await nextTick()
      console.log('Now DOM is updated')
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12

See also: $nextTick instance method

← Application API Data→