Usage

Props

component

  • Type: String

The name of the component which should be imported. If the component was initialized with a prefix in @nuxt/components config, it should be loaded as such. Nevertheless it is possible to ommit the prefix to automatically detect the right component (if there are no conflincting names).

Heads up: Starting with version v1.4.0 the prop component` replaces the deprecated prop name. Passing the component name by using name still works through $attrs.name internally. However, this workaround will be removed in the next major version (v.2.0.0+).

hydration

  • Type: String
  • Default: 'WhenIdle'
  • Options: 'WhenIdle', 'WhenVisible', 'OnInteraction', 'Never'

The hydration prop controls when / how the component will be hydrated. The hydration is implemented with vue-lazy-hydration thanks to Markus Oberlehner.

componentRef

  • Type: String or Number
  • Default: null

The componentRef prop adds a reference to the child component.

NuxtDynamic

Use NuxtDynamic to auto import any component which is initialized through @nuxt/components dynamically.

<template>
  <NuxtDynamic component="Logo" />

  <NuxtDynamic
    v-for="(component, i) in ['Logo', 'Grid', 'Nav']"
    :key="i"
    :component="component"
  />
</template>

LazyNuxtDynamic

Use LazyNuxtDynamic if you want the component itself being imported lazily.

<template>
  <LazyNuxtDynamic component="Logo" />
</template>

Assign Ref to child component

Use componentRef to assign a ref to the child component.

<template>
  <NuxtDynamic component="Logo" componentRef="logoChild" ref="logo" />
</template>

This allows you to call methods on the child component or access its data:

this.$refs.logo.$refs.logoChild