Skip to content

Commit a599e2f

Browse files
committed
Better installation notes
1 parent be7dea0 commit a599e2f

File tree

1 file changed

+74
-4
lines changed

1 file changed

+74
-4
lines changed

README.md

Lines changed: 74 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,93 @@ Smooth scroll with any amount of data ([demo](https://akryum.github.io/vue-virtu
1010
```
1111
npm install --save vue-virtual-scroller
1212
```
13+
## Default import
1314

14-
Use the component in your app. For example, register it as a global component:
15+
Install all the components:
1516

1617
```javascript
18+
import Vue from 'vue'
19+
import VueVirtualScroller from 'vue-virtual-scroller'
20+
21+
Vue.use(VueVirtualScroller)
22+
```
23+
24+
Use specific components:
25+
26+
```javascript
27+
import Vue from 'vue'
1728
import { VirtualScroller } from 'vue-virtual-scroller'
1829

1930
Vue.component('virtual-scroller', VirtualScroller)
2031
```
2132

22-
Or install it as a plugin:
33+
**⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.**
34+
35+
## Distribution import
36+
37+
Install all the components:
38+
39+
```javascript
40+
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
41+
import VueVirtualScroller from 'vue-virtual-scroller/dist/vue-virtual-scroller'
42+
43+
Vue.use(VueVirtualScroller)
44+
```
45+
46+
Use specific components:
47+
48+
```javascript
49+
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
50+
import { VirtualScroller } from 'vue-virtual-scroller/dist/vue-virtual-scroller'
51+
52+
Vue.component('virtual-scroller', VirtualScroller)
53+
```
54+
55+
**⚠️ You may have to setup your bundler to embed the css file in your page.**
56+
57+
## Browser
58+
59+
```html
60+
<link rel="stylesheet" href="vue-virtual-scroller/dist/vue-virtual-scroller.css"/>
61+
62+
<script src="vue.js"></script>
63+
<script src="vue-virtual-scroller/dist/vue-virtual-scroller.js"></script>
64+
```
65+
66+
Install all the components:
67+
68+
```javascript
69+
Vue.use(VueVirtualScroller)
70+
```
71+
72+
Use specific components:
73+
74+
```javascript
75+
Vue.component('virtual-scroller', VueVirtualScroller.VirtualScroller)
76+
```
77+
78+
## Source import
79+
80+
Install all the components:
81+
82+
```javascript
83+
import Vue from 'vue'
84+
import VueVirtualScroller from 'vue-virtual-scroller/src'
85+
86+
Vue.use(VueVirtualScroller)
87+
```
88+
89+
Use specific components:
2390

2491
```javascript
25-
import VirtualScroller from 'vue-virtual-scroller'
92+
import Vue from 'vue'
93+
import { VirtualScroller } from 'vue-virtual-scroller/src'
2694

27-
Vue.use(VirtualScroller)
95+
Vue.component('virtual-scroller', VirtualScroller)
2896
```
2997

98+
**⚠️ You need to configure your bundler to compile `.vue` files.** More info [in the official documentation](https://vuejs.org/v2/guide/single-file-components.html).
99+
30100
# Usage
31101

32102
The virtual scroller has three required props:

0 commit comments

Comments
 (0)