Skip to content

Commit 0a18180

Browse files
authored
docs: adding nuxt 3 usage guide
Adding how to use the lib with Nuxt 3 in the doc
1 parent 0f2e362 commit 0a18180

File tree

1 file changed

+24
-0
lines changed

1 file changed

+24
-0
lines changed

packages/vue-virtual-scroller/README.md

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,30 @@ app.component('RecycleScroller', RecycleScroller)
5151
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
5252
```
5353

54+
## Nuxt 3
55+
56+
In order to use with Nuxt 3 you can use a Nuxt plugin to do so.
57+
58+
Create a ``plugins/`` folder and a file for the plugin, then paste the code below:
59+
60+
```js
61+
// virtualScroller.ts
62+
import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
63+
import {
64+
DynamicScroller,
65+
DynamicScrollerItem,
66+
RecycleScroller,
67+
} from "vue-virtual-scroller";
68+
69+
export default defineNuxtPlugin((nuxtApp) => {
70+
nuxtApp.vueApp.component("RecycleScroller", RecycleScroller);
71+
nuxtApp.vueApp.component("DynamicScroller", DynamicScroller);
72+
nuxtApp.vueApp.component("DynamicScrollerItem", DynamicScrollerItem);
73+
});
74+
```
75+
76+
Make sure to import only the components that you want in the plugin file (there's no need to import them in anywhere because Nuxt already does it for us).
77+
5478
## Browser
5579

5680
```html

0 commit comments

Comments
 (0)