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).
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:
StringorNumber - 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