Add instructions for Nuxt

[danchristian]

Trying to get this working with Nuxt. So far I have:

plugins/vue-picture-swipe.js

import Vue from 'vue'
import VuePictureSwipe from 'vue-picture-swipe'

Vue.component('vue-picture-swipe', VuePictureSwipe)

Do I also need a Vue.use(VuePictureSwipe) in this file?

nuxt.config.js

plugins: [
  { src: '~/plugins/vue-picture-swipe', ssr: false }
]

components/gallery.vue

<template lang="pug">
  div
    no-ssr
      vue-picture-swipe(:items="items")
</template>

As it's registered as a Nuxt plugin I don't have to import VuePictureSwipe from 'vue-picture-swipe' in the component.

I had to use the no-ssr tag otherwise I was getting:

The client-side rendered virtual DOM tree is not matching server-rendered content.

I'm not 100% why I have to use this as well as setting ssr: false in the nuxt.config.js file?

Any help would be great and hopefully the instructions can then be updated to include Nuxt usage?

[Cloudy998]

Hello, in your items object you must link your item image with src and thumbnail

images:[
     {
        thumbnail: image-thumbnail.jpg,
        src: image.jpg
     }
]

[rap2hpoutre]

Hello and thank you for your contribution. I did not tried this package with Nuxt, and I'm not familiar with this tool so I don't know what instruction to write. I will try to test it with Nuxt soon!

[danchristian]

Thanks. I have got it working with Nuxt, although my initial questions still stand.

[retroriff]

@danchristian Could you share an example? I am getting this error: "Cannot use import statement outside a module".

[K-Cyganiak]

@retroriff I fixed this by adding:
build: { transpile: ["vue-picture-swipe"], },
inside nuxt.config.js

[retroriff]

@K-Cyganiak That worked, thank you!