Installation
Package manager (only for basic version)
You can install lightbox using your favorite package manager:
$ npm install fslightbox-vue
# or
$ yarn add fslightbox-vue
# or
$ yarn add fslightbox-vue
Tarball
Download .tgz archive from download page . Put it somewhere in your project for example: ./src/lib Then run package manager install command with path to that archive. You need to be in directory where your project package.json file is.
$ npm install ./src/lib/[lightbox archive name]
# or
$ yarn add ./src/lib/[lightbox archive name]
# or
$ yarn add ./src/lib/[lightbox archive name]
Example:
$ npm install ./src/lib/fslightbox-vue-basic-1.0.0.tgz
# or
$ yarn add ./src/lib/fslightbox-vue-basic-1.0.0.tgz
# or
$ yarn add ./src/lib/fslightbox-vue-basic-1.0.0.tgz
UMD
For projects that don't use Node.js there is UMD fslightbox build. Find in the archive file called fslightbox.umd.js. Add it to your website via script tag and display lightbox with global fs-lightbox component.
<div id="app">
<fs-lightbox
...some props
/>
</div>
<script src="https://unpkg.com/vue@2.5.0/dist/vue.min.js"></script>
<script src="fslightbox.umd.js"></script>
<script>
new Vue({
el: '#app'
});
</script>
<fs-lightbox
...some props
/>
</div>
<script src="https://unpkg.com/vue@2.5.0/dist/vue.min.js"></script>
<script src="fslightbox.umd.js"></script>
<script>
new Vue({
el: '#app'
});
</script>
Vue 3
File is called fslightbox.umd.v3.js. In v3 component is not preregistered. Lightbox component is stored in the global FsLightbox variable.
<div id="app">
<fs-lightbox
...some props
/>
</div>
<script src="https://unpkg.com/vue@3.2.0/dist/vue.global.prod.js"></script>
<script src="fslightbox.v3.umd.js"></script>
<script>
const app = Vue.createApp({
components: {
FsLightbox
}
});
app.mount('#app');
</script>
<fs-lightbox
...some props
/>
</div>
<script src="https://unpkg.com/vue@3.2.0/dist/vue.global.prod.js"></script>
<script src="fslightbox.v3.umd.js"></script>
<script>
const app = Vue.createApp({
components: {
FsLightbox
}
});
app.mount('#app');
</script>