https://github.com/blokwise/dynamic
Load components initialized through @nuxt/components dyamically.
https://github.com/blokwise/dynamic
nuxt nuxt-components nuxt-module nuxtjs
Last synced: about 1 month ago
JSON representation
Load components initialized through @nuxt/components dyamically.
- Host: GitHub
- URL: https://github.com/blokwise/dynamic
- Owner: blokwise
- License: mit
- Created: 2020-11-17T21:01:31.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-11-08T11:13:39.000Z (over 2 years ago)
- Last Synced: 2025-04-14T03:14:07.319Z (about 1 month ago)
- Topics: nuxt, nuxt-components, nuxt-module, nuxtjs
- Language: JavaScript
- Homepage: https://dynamic.blokwise.io
- Size: 612 KB
- Stars: 57
- Watchers: 3
- Forks: 8
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @blokwise/dynamic
Read the official [docs](https://dynamic.blokwise.io)
## Installation
Add `@blokwise/dynamic` dependency to your project:
```bash
yarn add @blokwise/dynamic
```
```bash
npm install @blokwise/dynamic
```
Then, add `@blokwise/dynamic` to the `modules` section of `nuxt.config.js`:
```js[nuxt.config.js]
{
modules: [
'@blokwise/dynamic'
],
}
```
## 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](https://github.com/maoberlehner/vue-lazy-hydration).
### `componentRef`
- **Type**: `String` or `Number`
- **Default**: `null`
The componentRef prop adds a reference to the child component.
## Usage
### Use dynamic component
The dynamic component will be loaded as `NuxtDynamic`. The component will be loaded whether 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.
```vue
```
### Load the component lazily
The dynamic component can be loaded lazily as `LazyNuxtDynamic`.
```vue
```