Skip to content

Commit fd614e3

Browse files
committed
Updated readme
1 parent 017941a commit fd614e3

File tree

1 file changed

+36
-6
lines changed

1 file changed

+36
-6
lines changed

README.md

Lines changed: 36 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
* [With a CDN](#with-a-cdn)
1111
* [Usage](#usage)
1212
* [With an ES6 bundler (via NPM)](#with-an-es6-bundler-via-npm)
13+
* [Importing a component](importing-a-component)
14+
* [Importing CSS styles](importing-css-styles)
15+
* [Via an import](via-an-import)
16+
* [Via a <style> tag](via-a-style-tag)
1317
* [With a CDN](#with-a-cdn)
1418
* [Simple example](#simple-example)
1519
* [Simple example with content slot](#simple-example-with-content-slot)
@@ -38,20 +42,42 @@ npm i vue-pure-lightbox --save
3842

3943
## Usage
4044
### With an ES6 bundler (via NPM)
41-
In your index file
45+
46+
#### Importing a component
4247
```js
4348
import VuePureLightbox from 'vue-pure-lightbox'
44-
Vue.use(VuePureLightbox)
49+
50+
/* @vue/component */
51+
export default {
52+
components: {
53+
// ...
54+
VuePureLightbox,
55+
},
56+
}
57+
```
58+
59+
#### Importing CSS styles
60+
61+
If you are using an ES6 bundler, you will need to manually import the styles.
62+
63+
##### Via an import
64+
```js
65+
import styles from 'vue-pure-lightbox/dist/VuePureLightbox.css'
66+
```
67+
68+
##### Via a <style> tag
69+
```vue
70+
<style src="vue-pure-lightbox/dist/VuePureLightbox.css"></style>
4571
```
4672

4773
### With a CDN
4874
```html
4975
<script>
50-
Vue.use(VuePureLightbox)
51-
5276
new Vue({
53-
// ...
54-
})
77+
components: {
78+
'vue-pure-lightbox': window.VuePureLightbox,
79+
}
80+
}).$mount('#app')
5581
</script>
5682
```
5783

@@ -66,6 +92,8 @@ Vue.use(VuePureLightbox)
6692
/>
6793
```
6894

95+
> **Note:** if you are not using a vue-loader (e.g. you are using a CDN), you have to use the kebab-case'ing for the component i.e. `<vue-pure-lightbox>` instead of `<VuePureLightbox>`.
96+
6997
### Example using content slot and custom loader
7098

7199
```vue
@@ -83,6 +111,8 @@ Vue.use(VuePureLightbox)
83111
</VuePureLightbox>
84112
```
85113

114+
> **Note:** if you are not using a vue-loader (e.g. you are using a CDN), you have to use the kebab-case'ing for the component i.e. `<vue-pure-lightbox>` instead of `<VuePureLightbox>`.
115+
86116
---
87117

88118
### Available props:

0 commit comments

Comments
 (0)