Read the official docs
Add @blokwise/dynamic
dependency to your project:
yarn add @blokwise/dynamic
npm install @blokwise/dynamic
Then, add @blokwise/dynamic
to the modules
section of nuxt.config.js
:
{
modules: [
'@blokwise/dynamic'
],
}
The dynamic component will be loaded as NuxtDynamic
. The component will be loaded wheter you pass the name prefix or not. So in the following case it could load a component called Logo
without prefix or a component called BlokwiseLogo
which is prefixed with Blokwise
according to @nuxt/components
configuration of your project / third party libraries.
<template>
<NuxtDynamic name="Logo" />
</template>
The dynamic component can be loaded lazily as LazyNuxtDynamic
.
<template>
<LazyNuxtDynamic name="Logo" />
</template>