Package manager (the basic version only)
Install the plug-in with your preferred package manager:
$ npm install fslightbox-vue
# or
$ yarn add fslightbox-vueInstallation
Tarball
Download the .tgz archive from the download page. Put it somewhere in your project, for example, "./src/lib". Then run the package manager's install command with the path of that archive. The command have to be run from the directory where your project's "package.json" file is.
$ npm install src/lib/[lightbox archive name]
# or
$ yarn add src/lib/[lightbox archive name]For example:
$ npm install src/lib/fslightbox-vue-basic-1.0.0.tgz
# or
$ yarn add src/lib/fslightbox-vue-basic-1.0.0.tgzIf the pro version was installed after removing the basic version, cleaning the package manager's cache may be needed to reflect the change.
UMD
For projects that don't use Node.js there is a UMD build. Find in the archive the file called "fslightbox.umd.js". Add it to the website through a <script> element. Create the lightbox with a global "fs-lightbox" component.
<div id=app>
<fs-lightbox
...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
The file is called "fslightbox.umd.v3.js". In v3, the lightbox component is not preregistered. The component is stored in the global "FsLightbox" variable.
<div id=app>
<fs-lightbox
...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>