• 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 $ internally. However, this workaround will be removed in the next major version (v.2.0.0+).


  • 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.


  • Type: String or Number
  • Default: null

The componentRef prop adds a reference to the child component.


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

  <NuxtDynamic component="Logo" />

    v-for="(component, i) in ['Logo', 'Grid', 'Nav']"


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

  <LazyNuxtDynamic component="Logo" />

Assign Ref to child component

Use componentRef to assign a ref to the child component.

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

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