You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Read the official [docs](https://dynamic.blokwise.io)
3
+
Let Nuxt auto-import your dynamic components with a breeze - automagically.
4
+
5
+
- Extends nuxt/component
6
+
- Auto-importing of dynamic components
7
+
- Easily hydrate your dynamic components on the fly
8
+
9
+
Starting with `v2.0.0`, this module only works with `nuxt v3`. To use this module with `nuxt v2` and [`@nuxt/components`](https://www.npmjs.com/package/@nuxt/components) use `v1.5.0` (or lower).
10
+
11
+
Read the official [docs](https://dynamic.blokwise.io).
4
12
5
13
## Installation
6
14
@@ -24,52 +32,115 @@ Then, add `@blokwise/dynamic` to the `modules` section of `nuxt.config.js`:
24
32
}
25
33
```
26
34
35
+
Use a different prefix for your `Dynamic` component if you like (default is `NuxtDynamic`). e.g. if you want to use the component as `HyperDynamic`:
36
+
37
+
```js[nuxt.config.js]
38
+
{
39
+
modules: [
40
+
'@blokwise/dynamic', {
41
+
prefix: 'Hyper'
42
+
}
43
+
],
44
+
}
45
+
```
46
+
27
47
## Props
28
48
29
-
### `component`
49
+
### `isComponent`
30
50
31
51
-**Type**: `String`
32
52
33
-
The name of the component which should be imported.
34
-
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)_.
53
+
The name of the component which should be imported and rendered as registered by nuxt. The component name can be passed in PascalCase, snake_case or kebab-case.
35
54
36
-
_**Heads up**: Starting with version `v1.4.0` the prop `component` replaces the deprecated prop `name`.
37
-
Passing the component name by using `name` still works through `$attrs.name` internally.
38
-
However, this workaround will be removed in the next major version (`v.2.0.0+`)._
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).
62
+
### `whenIdle`
47
63
48
-
### `componentRef`
64
+
-**Type**: `[Booelan, Number]`
65
+
-**Default**: `null`
66
+
67
+
If `true`, component gets hydrated when browser is idle (or after default timeout of 2000ms).
68
+
If `Number` is passed, it'll be used as max timeout to start hydration.
49
69
50
-
-**Type**: `String` or `Number`
70
+
### `whenVisible`
71
+
72
+
-**Type**: `[Number, Object]`
51
73
-**Default**: `null`
52
74
53
-
The componentRef prop adds a reference to the child component.
75
+
If `true`, the component gets hydrated when visible.
76
+
If custom configuration for Intersection Observer API is needed, an `Object` can be passed. The configuration needs to be defined according to [Official Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
54
77
55
-
##Usage
78
+
### `on`
56
79
57
-
### Use dynamic component
80
+
-**Type**: `[Boolean, Array, String]`
81
+
-**Default**: `null`
58
82
59
-
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.
83
+
If `true`, the component gets hydrated on event 'focus'.
84
+
If you want to define custom events pass the event names as `String` or `Array` to hydrate the component when events are triggered.
60
85
61
-
```vue
62
-
<template>
63
-
<NuxtDynamic component="Logo" />
64
-
</template>
65
-
```
86
+
### `hydration`
87
+
88
+
-**Type**: `Object`
89
+
-**Default**: `() => ({})`
66
90
67
-
### Load the component lazily
91
+
The hydration prop controls **when / how the component will be hydrated** and can be assigned dynamically. The object passed:
92
+
- needs to have a property `type` as String (`'never'`, `'whenIdle'`, `'whenVisible'`, `'on'`)
93
+
- and optionally can have a property `options` to define further config as described in the above component props (e.g. if `type` is `whenIdle`, `options` could be used to set the max timeout to `7000`).
68
94
69
-
The dynamic component can be loaded lazily as `LazyNuxtDynamic`.
95
+
## NuxtDynamic
70
96
97
+
Use `NuxtDynamic` to **auto import any component**_dynamically_ which is registered by nuxt. If you want to ommit the hydration and load the component instantly (tho lazily / async), ommit any hydration prop such as `never`, `when-idle`, `when-visible` or `on`.
98
+
99
+
Some example of how to use the component:
71
100
```vue
72
101
<template>
73
-
<LazyNuxtDynamic component="Logo" />
102
+
<NuxtDynamic is-component="Logo" />
103
+
104
+
<NuxtDynamic is-component="Logo">
105
+
<span>using the default slot as expected</span>
106
+
</NuxtDynamic>
107
+
108
+
<NuxtDynamic
109
+
v-for="(componentName, i) in ['Logo', 'Grid', 'Nav']"
All the hydration magic is implemented with `vue3-lazy-hydration` thanks to [freddy38510](https://github.com/freddy38510/vue3-lazy-hydration).
@@ -21,6 +22,8 @@ Let Nuxt auto-import your dynamic components with a breeze - automagically.
21
22
22
23
<list:items="features"></list>
23
24
24
-
This `nuxt.js` module only works with [`@nuxt/components`](https://www.npmjs.com/package/@nuxt/components).
25
+
<alerttype="info">
26
+
Starting with <code>v2.0.0</code>, this module only works with <code>nuxt v3</code>. To use this module with <code>nuxt v2</code> and <ahref="https://www.npmjs.com/package/@nuxt/components"><code>@nuxt/components</code></a> use <code>v1.5.0</code> (or lower).
27
+
</alert>
25
28
26
29
<pclass="flex items-center">Enjoy light and dark mode: <app-color-switcherclass="inline-flex ml-2"></app-color-switcher></p>
Copy file name to clipboardexpand all lines: docs/content/en/setup.md
+12
Original file line number
Diff line number
Diff line change
@@ -36,4 +36,16 @@ Then, add `@blokwise/dynamic` to the `modules` section of `nuxt.config.js`:
36
36
}
37
37
```
38
38
39
+
Use a different prefix for your `Dynamic` component if you like (default is `NuxtDynamic`). e.g. if you want to use the component as `HyperDynamic`:
40
+
41
+
```js[nuxt.config.js]
42
+
{
43
+
modules: [
44
+
'@blokwise/dynamic', {
45
+
prefix: 'Hyper'
46
+
}
47
+
],
48
+
}
49
+
```
50
+
39
51
Check the [Nuxt.js documentation](https://nuxtjs.org/guides/configuration-glossary/configuration-modules) for more information about installing and using modules in Nuxt.js.
Copy file name to clipboardexpand all lines: docs/content/en/usage.md
+77-43
Original file line number
Diff line number
Diff line change
@@ -7,75 +7,109 @@ category: Guide
7
7
8
8
## Props
9
9
10
-
### `component`
10
+
### `isComponent`
11
11
12
-
-**Type**: `String`
12
+
- Type: `String`
13
13
14
-
The name of the component which should be imported.
15
-
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)_.
14
+
The name of the component which should be imported and rendered as registered by nuxt. The component name can be passed in PascalCase, snake_case or kebab-case.
16
15
17
16
<alerttype="info">
18
-
<b>
19
-
<iclass="font-light"><spanclass="font-bold">Heads up</span>: Starting with version <code>v1.4.0</code> the prop <code>component`</code> replaces the deprecated prop <code>name</code>.
20
-
Passing the component name by using <code>name</code> still works through <code>$attrs.name</code> internally.
21
-
However, this workaround will be removed in the next major version (<code>v.2.0.0+</code>).</i>
17
+
<p>
18
+
<iclass="font-light"><spanclass="font-bold">Heads up</span>: Starting with version <code>v2.0.0</code> the prop <code>isComponent`</code> replaces the deprecated prop <code>component</code>.
19
+
Passing the component name by using <code>component</code> still works through <code>$attrs.component</code> internally.
20
+
However, this workaround will be removed in the next major version (<code>v3.0.0+</code>).</i>
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).
29
+
If `true`, the component gets never hydrated.
32
30
33
-
### `componentRef`
31
+
### `whenIdle`
34
32
35
-
-**Type**: `String` or `Number`
36
-
-**Default**: `null`
33
+
- Type: `[Booelan, Number]`
34
+
- Default: `null`
37
35
38
-
The componentRef prop adds a reference to the child component.
36
+
If `true`, component gets hydrated when browser is idle (or after default timeout of 2000ms).
37
+
If `Number` is passed, it'll be used as max timeout to start hydration.
39
38
40
-
##NuxtDynamic
39
+
### `whenVisible`
41
40
42
-
Use `NuxtDynamic` to **auto import any component** which is initialized through `@nuxt/components`_dynamically_.
41
+
- Type: `[Number, Object]`
42
+
- Default: `null`
43
43
44
-
```vue
45
-
<template>
46
-
<NuxtDynamic component="Logo" />
44
+
If `true`, the component gets hydrated when visible.
45
+
If custom configuration for Intersection Observer API is needed, an `Object` can be passed. The configuration needs to be defined according to [Official Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).
47
46
48
-
<NuxtDynamic
49
-
v-for="(component, i) in ['Logo', 'Grid', 'Nav']"
50
-
:key="i"
51
-
:component="component"
52
-
/>
53
-
</template>
54
-
```
47
+
### `on`
55
48
56
-
## LazyNuxtDynamic
49
+
- Type: `[Boolean, Array, String]`
50
+
- Default: `null`
57
51
58
-
Use `LazyNuxtDynamic` if you want the component itself being imported lazily.
52
+
If `true`, the component gets hydrated on event 'focus'.
53
+
If you want to define custom events pass the event names as `String` or `Array` to hydrate the component when events are triggered.
59
54
60
-
```vue
61
-
<template>
62
-
<LazyNuxtDynamic component="Logo" />
63
-
</template>
64
-
```
55
+
### `hydration`
56
+
57
+
- Type: `Object`
58
+
- Default: `() => ({})`
65
59
60
+
The hydration prop controls **when / how the component will be hydrated** and can be assigned dynamically. The object passed:
61
+
- needs to have a property `type` as String (`'never'`, `'whenIdle'`, `'whenVisible'`, `'on'`)
62
+
- and optionally can have a property `options` to define further config as described in the above component props (e.g. if `type` is `whenIdle`, `options` could be used to set the max timeout to `7000`).
66
63
67
-
## Assign Ref to child component
64
+
## NuxtDynamic
68
65
69
-
Use `componentRef` to assign a `ref`to the child component.
66
+
Use `NuxtDynamic` to **auto import any component**_dynamically_ which is registered by nuxt. If you want to ommit the hydration and load the component instantly (tho lazily / async), ommit any hydration prop such as `never`, `when-idle`, `when-visible` or `on`.
This allows you to call methods on the child component or access its data:
113
+
## Credits
78
114
79
-
```js
80
-
this.$refs.logo.$refs.logoChild
81
-
```
115
+
All the hydration magic is implemented with `vue3-lazy-hydration` thanks to [freddy38510](https://github.com/freddy38510/vue3-lazy-hydration).
0 commit comments