# API Global

Si está utilizando una compilación de CDN, luego las funciones de la API global son disponibles mediante el objeto global Vue. p. ej.:

const { createApp, h, nextTick } = Vue

Si está utilizando módulos ES, luego pueden ser importados directamente:

import { createApp, h, nextTick } from 'vue'

Las funciones globales que se encargan de la reactividad, como reactive y ref, son documentadas por separado. Vea API de Reactividad para estas funciones.

# createApp

Retorna una instancia de aplicación que proporciona un contexto de aplicación. El árbol completo de componentes montado por la instancia de aplicación comparte el mismo contexto.

const app = createApp({})

Puede encadenar otros métodos después de createApp, los cuales se pueden encontrar en API de Aplicación

# Argumentos

La función recibe un objeto de opciones de componente raíz como el primer parámetro:

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

1
2
3
4
5
6
7
8
9
10

Con el segundo parámetro, podemos pasar props raíz a la aplicación:

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

1
2
3
4
5
6

<div id="app">
  <!-- se mostrará 'Evan' -->
  {{ username }}
</div>

1
2
3
4

Las props raíz son props crudas, muy similar a esos pasados a h para crear un VNode. Además de props de componente, pueden también incluir atributos y escuchadores de evento que se van a aplicar al componente raíz.

# Tipar

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

Retorna un "nodo virtual", usualmente abreviado a VNode: un objeto plano que contiene información describiendo a Vue qué tipo de nodo se debe renderizar en la página, incluyendo descripciones de cualquier nodo hijo. Es destinado para funciones de render escritos manualmente:

render() {
  return h('h1', {}, 'Algún título')
}

1
2
3

# Argumentos

Acepta tres argumentos: type, props y children

# type

Tipo: String | Object | Function
Detalles:

Un nombre de etiqueta HTML, un componente, un componente asíncrono, o un componente funcional. Se renderizaría un comentario al utilizar una función que retorne null. Este parámetro es requerido

# props

Tipo: Object
Detalles:

Un objeto correspondiente a los atributos, props y eventos que podríamos utilizar en una plantilla. Opcional

# children

Tipo: String | Array | Object

Detalles:

VNodes hijos, construidos utilizando h(), o cadenas de caracteres para obtener "VNodes de texto" o un objeto con slots. Opcional

h('div', {}, [
  'Se va algún texto primero.',
  h('h1', 'Un titular'),
  h(MyComponent, {
    someProp: 'foobar'
  })
])

1
2
3
4
5
6
7

# defineComponent

Cuando se trate de la implementación, defineComponent no nace nada sino retorna el objeto pasado a el. Sin embargo, en términos de tipar, el valor retornado tiene un constructor de tipo sintético para función manual de render, TSX y soporte de herramienta de IDE.

# Argumentos

Un objeto con opciones de componente

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

O una función setup, el nombre de la función será utilizado como nombre de componente

import { defineComponent, ref } from 'vue'

const HelloWorld = defineComponent(function HelloWorld() {
  const count = ref(0)
  return { count }
})

1
2
3
4
5
6

# defineAsyncComponent

Crea un componente asíncrono que se va a cargar solo cuando sea necesario.

# Argumentos

Para uso básico, defineAsyncComponent puede aceptar una función de fábrica que retorne un Promise. El callback resolve del Promise será llamado cuando haya recuperado su definición de componente desde el servidor. Puede también llamar reject(reason) para indicar que la carga haya fallado.

import { defineAsyncComponent } from 'vue'

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

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

1
2
3
4
5
6
7

Cuando utiliza registración local, puede también proporcionar directamente una función que retorne u Promise:

import { createApp, defineAsyncComponent } from 'vue'

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

1
2
3
4
5
6
7
8
9
10

Para uso avanzado, defineAsyncComponent puede aceptar un objeto del formato siguiente:

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent({
  // La función de fábrica
  loader: () => import('./Foo.vue'),
  // Un componente para utilizar mientras se carga el componente asíncrono
  loadingComponent: LoadingComponent,
  // Un componente para utilizar si la carga falla
  errorComponent: ErrorComponent,
  // La demora antes de mostrar el componente de cargamente. Por defecto: 200ms.
  delay: 200,
  // El componente de error será mostrado si un tiempo fuera sea
  // proporcionado y excedido. Por defector: Infinity.
  timeout: 3000,
  // Definir si el componente soporta suspenderse (suspensible). Por defecto: true.
  suspensible: false,
  /**
   *
   * @param {*} error Objeto de mensaje de error
   * @param {*} retry Una función que indica si el componente asíncrono deba reintentar cuando el _promise_ de cargador rechace
   * @param {*} fail  Terminar de fallo
   * @param {*} attempts El tiempo máximo permitido para reintentar
   */
  onError(error, retry, fail, attempts) {
    if (error.message.match(/fetch/) && attempts <= 3) {
      // reintentar cuando se produce un fallo de recuperar, al máximo 3 intentos
      retry()
    } else {
      // Note que retry/fail se comportan como resolve/reject de un promise:
      // uno de ellos debe ser llamado para continuar la manipulación de errores
      fail()
    }
  },
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

Vea también: Componentes Dinámicos & Asíncronos

# defineCustomElement 3.2+

Este método acepta el mismo argumento como defineComponent, pero en cambio retorna un Elemento Personalizado (opens new window) nativo que pueda ser utilizado dentro de cualquier framework, o sin frameworks por completo.

Ejemplo de uso:

<my-vue-element></my-vue-element>

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // opciones normales de componente Vue aquí
  props: {},
  emits: {},
  template: `...`,

  // sólo para defineCustomElement: el CSS para ser inyectado en raíz de _shadow_
  styles: [`/* css alineado */`]
})

// Registrar el elemento personalizado.
// Después de la registración, todas etiquetas `<my-vue-element>` en la página serán actualizadas.
customElements.define('my-vue-element', MyVueElement)

// Puede también programáticamente instanciar el elemento:
// (solo puede hacerlo después de la registración)
document.body.appendChild(
  new MyVueElement({
    // props iniciales (opcional)
  })
)

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

Para más detalles sobre construir componentes web con Vue, especialmente con componentes de un solo archivo, vea Vue y Componentes Web.

# resolveComponent

WARNING

resolveComponent solo puede ser utilizado dentro de funciones render o setup.

Permite resolver un componente por su nombre, si es disponible en la instancia actual de aplicación.

Retorna un componente o el argumento name si no se encuentra uno.

const app = createApp({})
app.component('MyComponent', {
  /* ... */
})

1
2
3
4

import { resolveComponent } from 'vue'
render() {
  const MyComponent = resolveComponent('MyComponent')
}

1
2
3
4

# Argumentos

Acepta un argumento: name

# name

Tipo: String
Detalles:

El nombre de un componente cargado.

# resolveDynamicComponent

WARNING

resolveDynamicComponent solo puede ser utilizado dentro de funciones render o setup.

Permite resolver un componente por el mismo mecanismo utilizado por <component :is="">.

Retorna un componente resuelto o un VNode recién creado con el nombre del componente como la etiqueta del nodo. Lanzará una advertencia si no se encuentra el componente.

import { resolveDynamicComponent } from 'vue'
render () {
  const MyComponent = resolveDynamicComponent('MyComponent')
}

1
2
3
4

# Argumentos

Acepta un argumento: component

# component

Tipo: String | Object (el objeto de opciones del componente)
Detalles:

Para más detalles, refiérase a la documentación sobre Componentes Dinámicos & Asíncronos.

# resolveDirective

WARNING

resolveDirective solo puede ser utilizado dentro de funciones render o setup.

Permite resolver una directiva por su nombre, si es disponible en la instancia actual de aplicación.

Retorna una directiva o undefined cuando no se encuentra una.

const app = createApp({})
app.directive('highlight', {})

1
2

import { resolveDirective } from 'vue'
render () {
  const highlightDirective = resolveDirective('highlight')
}

1
2
3
4

# Argumentos

Acepta un argumento: name

# name

Tipo: String
Detalles:

El nombre de la directiva cargada.

# withDirectives

WARNING

withDirectives solo puede ser utilizado dentro de funciones render o setup.

Permite aplicar directivas a un VNode. Retorna un VNode con las directivas aplicadas.

import { withDirectives, resolveDirective } from 'vue'
const foo = resolveDirective('foo')
const bar = resolveDirective('bar')

return withDirectives(h('div'), [
  [foo, this.x],
  [bar, this.y]
])

1
2
3
4
5
6
7
8

# Argumentos

Acepta dos argumentos: vnode y directives.

# vnode

Tipo: vnode
Detalles:

Un nodo virtual, usualmente creado por h().

# directives

Tipo: Array

Detalles:

Una matriz de directivas.

Cada directiva es en sí mismo una matriz, lo cual permite un máximo de 4 índices definidos como se ve en el ejemplo siguiente.

[directive] - La directiva por sí mismo. Requerida.

const MyDirective = resolveDirective('MyDirective')
const nodeWithDirectives = withDirectives(h('div'), [[MyDirective]])

1
2

[directive, value] - como se describe arriba, más un valor de tipo any para ser asignado a la directiva

const MyDirective = resolveDirective('MyDirective')
const nodeWithDirectives = withDirectives(h('div'), [[MyDirective, 100]])

1
2

[directive, value, arg] - como se describe arriba, más un argumento String, p. ej. click en v-on:click

const MyDirective = resolveDirective('MyDirective')
const nodeWithDirectives = withDirectives(h('div'), [
  [MyDirective, 100, 'click']
])

1
2
3
4

[directive, value, arg, modifiers] - como se describe arriba, más un Object con pares key: value para definir cualquieres modificadores.

const MyDirective = resolveDirective('MyDirective')
const nodeWithDirectives = withDirectives(h('div'), [
  [MyDirective, 100, 'click', { prevent: true }]
])

1
2
3
4

# createRenderer

La función createRenderer acepta dos argumentos genéricos: HostNode y HostElement, correspondiente a tipos Node y Element en el entorno de acogida.

Por ejemplo, para runtime-dom, HostNode sería la interfaz Node de DOM y HostElement sería la interfaz Element de DOM.

Se puede pasar tipos específicos de la plataforma a renderizadores personalizados como esto:

import { createRenderer } from 'vue'
const { render, createApp } = createRenderer<Node, Element>({
  patchProp,
  ...nodeOps
})

1
2
3
4
5

# Argumentos

Acepta dos argumentos: HostNode y HostElement

# HostNode

Tipo: Node
Detalles:

El nodo en el entorno de acogida.

# HostElement

Tipo: Element
Detalles:

El elemento en el entorno de acogida.

# nextTick

Diferir la ejecución del callback hasta después el proximo ciclo de actualización de DOM. Utilícelo inmediatamente después de que haya cambiado algún dato para esperar a la actualización de DOM.

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

Vea también: el método de instancia $nextTick

# mergeProps

Toma múltiples objetos que contienen props de VNode y fundirlos en un solo objeto. Retorna un objeto recién creado, los objetos pasados como argumentos no se modifican.

Cualquier número de objetos pueden ser pasados, con las propiedades que previenen de argumentos posteriores toman precedencia. Los escuchadores de evento son manejados especialmente, así como class y style, siendo los valores de estas propiedades fundidos en vez de sobreescritos.

import { h, mergeProps } from 'vue'

export default {
  inheritAttrs: false,

  render() {
    const props = mergeProps(
      {
        // La clase será fundida con cualquier clase proviene de $attrs
        class: 'active'
      },
      this.$attrs
    )

    return h('div', props)
  }
}

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

# useCssModule

WARNING

useCssModule solo puede ser utilizado dentro de funciones render o setup.

Permite que los módulos CSS puedan ser accesados dentro de la función setup de un componente de un solo archivo:

<script>
import { h, useCssModule } from 'vue'

export default {
  setup() {
    const style = useCssModule()

    return () =>
      h(
        'div',
        {
          class: style.success
        },
        'Task complete!'
      )
  }
}
</script>

<style module>
.success {
  color: #090;
}
</style>

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

Para más información sobre utilizar módulos CSS, vea Característica de Estilos de SFC: <style module>.

# Argumentos

Acepta un argumento: name

# name

Tipo: String
Detalles:

El nombre del módulo CSS, por defecto '$style'.

# version

Proporciona el vesión de Vue instalado como una cadena de caracteres.

const version = Number(Vue.version.split('.')[0])

if (version === 3) {
  // Vue 3
} else if (version === 2) {
  // Vue 2
} else {
  // versiones de Vue no soportados
}

1
2
3
4
5
6
7
8
9

Vea también: API de Aplicación - versión

← API de Aplicación Dato →