How do I integrate vue-gallery with NuxtJS?

[rlam3]

How do I integrate vue-gallery with NuxtJS as a Plugin? Does it require SSR or no?

[RobinCK]

Sorry, I'm not competent in this issue, I did not work with nuxt.js

[lomholdt]

@rlam3
There are issues using this component when SSR is enabled. It works without any problems though if you disable SSR for this plugin only. Heres how:

• Make sure you have installed the plugin using npm
• Add a new vue-gallery.js file to your nuxt plugins folder containing the following:

import Vue from 'vue'
import VueGallery from 'vue-gallery'

Vue.component('gallery', VueGallery)

• In your nuxt.config.js add { src: '~/plugins/vue-gallery.js', ssr: false } to the plugins array. The ssr: false part is where all the magic happens, since the file is included only on the client-side (https://nuxtjs.org/api/configuration-plugins)

And that's it! vue-gallery will work like this, even when using SSR

[rlam3]

@lomholdt it's strange because it works but cannot find the widget container

Any idea on why this may be? Thanks!

blueimp Gallery: Widget container not found. #blueimp-gallery

[RobinCK]

@rlam3 what version of the library?

[rlam3]

@RobinCK I'm using the latest version. Thanks.

[RobinCK]

I want to note that this error was in v1.2.0 version in v1.2.1 fixed

[rlam3]

I think I found my problem. tags need to be implemented between gallery
I've also created a step where other NuxtJS users are able to see in the README.md file as well.

[rlam3]

Are there plans to also integrate a textfield in the gallery mode? It would be nice to have something to describe the images inside the gallery. Thanks!

[rlam3]

@RobinCK I took a look at blueimp and saw that they have a way to integrate a description for each image. Would it be possible that you can turn this feature on with vue-gallery? If so, how? Thanks! Really appreciate your help here.
https://github.com/blueimp/Gallery

[JonasJW]

Thanks @lomholdt this worked but when I do it like this I get:

vue.runtime.esm.js:587 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

Any Idea what this is or how to solve it?

[scottyzen]

Still can't seem to get this to work.
When my page loads I get this error GET https://mysite.netlify.com/gallery/[object%20Object] 404 and when I click on an image this error blueimp Gallery: Widget container not found. #blueimp-gallery

Anyone have any ideas?

[scottyzen]

Still can't seem to get this to work.
When my page loads I get this error GET https://mysite.netlify.com/gallery/[object%20Object] 404 and when I click on an image this error blueimp Gallery: Widget container not found. #blueimp-gallery

Anyone have any ideas?

Fixed. Turned out it was a problem with Purgecss removing class names.

[core01]

@scottyzen Hi Scott, how did you fix the problem with Purgecss and vue-gallery? I want to use vue-gallery with PurgeCSS, but the last removes all styles.

UPDATE
Added whitelistPatternsChildren and everything works well.

[ovsw]

@JonasJW I had the same issue, here's how I fixed it: #61

[mornir]

For anyone wondering about the necessary config for purgeCSS:

whitelistPatternsChildren: [/^blueimp.+/]

[jasonkur]

I have added the plugins above to the nuxt.config.js but getting this error. Does anyone know why?

Invalid or unexpected token

[mornir]

Did you add .client.js at the end of the file?
Like this https://github.com/mornir/makeup-website/blob/dev/nuxt.config.js#L54

[jasonkur]

Did you add .client.js at the end of the file?
Like this https://github.com/mornir/makeup-website/blob/dev/nuxt.config.js#L54
Yes, I tried following your files but still get the same error

nuxt.config.ts
plugins: [
    '~/ui/index.ts',
    '~/plugins/getApp.ts',
    { src: '~/plugins/swiper.ts', ssr: false },
    { src: '~/plugins/vue-gallery.client.ts', ssr: false },
  ],

**vue-gallery.client.ts**
import Vue from 'vue';
import VueGallery from 'vue-gallery';

Vue.component('VGallery', VueGallery);

**component**
import VueGallery from 'vue-gallery';

[mornir]

1. You don't need to add ssr: false
2. You shouldn't import VueGallery inside the component
   Does this help solve the problem?

[jasonkur]

1. You don't need to add ssr: false
2. You shouldn't import VueGallery inside the component
   Does this help solve the problem?

ahh thank you! that worked