How to use vue-pure-lightbox in Nuxt Content body

8.06.2022 г.

Adding Vue Plugin vue-pure-lightbox [ ] in Nuxt Conten markdown file

• Nuxt Content is a git files based headless CMS that allows you to create a blog or documentation site from Markdown, JSON, YAML, XML, and CSV files.
• vue-pure-lightbox is very simple lightbox plugin (without any dependencies) for Vuejs and can be installed on Nuxt Aplication

Installation:

npm i vue-pure-lightbox

or 

yarn add vue-pure-lightbox

Usage:

• First of all, we need to create a component in the /components directory and a folder named global.

This way our component can be used in the body of the markdown file.

• Create a component named ArticleImage.vue in the folder /components/global folder.

/components
    /global/ArticleImage.vue

• We write the HTML code for the template

<template>
    <VuePureLightbox
        :thumbnail="thumb"
        :images="[src]"
        :alternate-text="alt"
    />
</template>

• In the script section we import the plugin and define three props - thumb, src and alt: thumb is for the thumbnail, src is for the images and alt is for the alt of the image

<script>
    import VuePureLightbox from 'vue-pure-lightbox'
    export default {
        components: {
            VuePureLightbox
        },
        props: {
            thumb:
            {
                type: String,
                required: true
            },
            src: {
                type: Array,
                required: true
            },
            alt: {
                type: String,
                required: true
            }
        },
    }
</script>

Now it remains to enter the css file in one of two ways:

<style src="vue-pure-lightbox/dist/VuePureLightbox.css">

</style>

or

<style>
@import url("./../../node_modules/vue-pure-lightbox/dist/VuePureLightbox.css");

</style>

Usage in Markdown file

We can now use our component in the markdown file as follows:

<article-image 
  thumb="/path/to/thumbnail.jpg"
  src="['/path/to/image1.jpg', '/path/to/image1.jpg']"
  alt="Some Alt Text"
/></article-image>

You can style LightBox elements with the following classes:

<style>
    .lightbox{}
    .lightbox__close{}
    .lightbox__element{}
    .lightbox__image{}
    .lightbox__arrow{}
    .lightbox__arrow--left{}
</style>

I hope I have been useful to you! Happy coding …