How to use lightgallery.js with Vue

[ymyang]

[QuentinPotgieter]

Hi, I am also very keen to using lightgallery.js on a Vue application. Please provide support for Vue.

[usb248]

In your vue app directory :
install via with npm install lightgallery.js
import js+css with @ import/import/require in index.js or main.js or directly in your html file and use mounted event :

mounted () {
      lightGallery(document.getElementById('your-id')); 
},

[tTakia88]

I need to learn java from the very beginning can you suggest me how can I learn faster and from where shall i start java

[rickycheers]

@tTakia88 If what you mean is to start learning JavaScript, then I suggest you start here https://www.javascript.com/

[volkanciloglu]

I use $npm install lightgallery.js

./node_modules/lightgallery.js/dist/fonts/lg.ttf?n1z373
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.

[PanJiaChen]

<template>
  <div class="app-container">
    <div id="lightgallery">
      <a href="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/image-6-lg.jpg">
        <img src="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/thumb-6.jpg" >
      </a>
      <a href="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/image-12-lg.jpg">
        <img src="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/thumb-12.jpg" >
      </a>
    </div>
  </div>
</template>

import 'lightgallery.js'
import 'lightgallery.js/dist/css/lightgallery.css'

export default {
  name: 'IssueDetail',
  data() {
    return {
      imageList: []
    }
  },
  mounted() {
    const el = document.getElementById('lightgallery')
    window.lightGallery(el)
  }
}

[sensoeurn]

I met the same problem. now I can use it.
Thank PanJiaChen

[dodanex]

Hello, how can I use this with Nuxt? I got an error window not defined
Can someone provide an code example, maybe using ref ?

[avblink]

Instructions for NUXT:

Install lightgallery.js and whatever relevant plugins:

yarn add lightgallery.js lg-videos.js

in 'plugins' folde create lightgallery.client.js
Make sure you include .client. in the file name. This tells NUXT to render the module only on client side. Otherwise you will get 'window not defined' error.

In the file add the following:

import Vue from 'vue'
import lightgallery from 'lightgallery.js'
import 'lightgallery.js/dist/css/lightgallery.min.css'
import 'lg-video.js'

Vue.use(lightgallery)

Now in nuxt.config.js add this:

  plugins: [
    { src: '~/plugins/lightgallery.client.js' }
  ],

And in your component (vue) file this:

export default {
  mounted() {
    const el = document.getElementById('lightgallery')
    window.lightGallery(el)
  }
}
</script>

Your gallery should now work

[afs2015]

Any suggestions for Vuepress 0.x? My main struggle is dealing with the similar error that dodanex posted.

[catman85]

Hello! I am trying to use this on nuxt.js and I have the same problem as @dodanex . @avblink Do you have any suggetsions?
It probably has something to do with Server Side Rendering

[catman85]

Ok guys I figured this out! @dodanex @avblink @afs2015
you need to set ssr to false in the plugins section of "nuxt.config.js"
Now it works!

[afs2015]

Thanks @catman85 unfortunately this only helps with setting this up in nuxt and not Vuepress.

[flyingL123]

@VCodepp I am having the same issue that you mentioned. How did you get it working? Is there some special loader I am missing from webpack? I am importing css files from other packages fine.

I am simply doing:

import gallery from 'lightgallery.js';
import 'lightgallery.js/dist/css/lightgallery.css';

But I get the error you mentioned:

index.js:116 Uncaught Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleParseError: Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.

[flyingL123]

I got it working by adding this to my webpack module.rules:

{
              test: /\.(ttf|eot|svg|png|jpg|gif|ico|woff)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
              loader: 'file-loader'
},