How to integrate with Nuxt JS? about vueper-slides HOT 2 CLOSED

Hi @isaumya, thanks for your feedback.

There is no particular thing to do to make it work.
Just follow the instructions from the documentation, you don't even need to place Vueper Slides into an SSR tag.

It will work just as the examples are written in the documentation.
Please reopen if you have troubles with a particular case.
Cheers

from vueper-slides.

Hi @isaumya,

I have just tried it again on Nuxt 2 after the V2 release, there 's nothing particular to do to use Vueper Slides.
This is how I have it working:

• Import the lib and CSS in your component according to the documentation:

import { VueperSlides, VueperSlide } from 'vueperslides'
import 'vueperslides/dist/vueperslides.css'

You could also create a plugin for Vueper Slides but that's optional.

• Add the components to use in the template:

components: { VueperSlides, VueperSlide },

• Use the Vueper Slides normally like in the documentation, without the no-ssr tag.

<vueper-slides>
      <vueper-slide v-for="(slide, i) in slides" :key="i" :title="slide.title"></vueper-slide>
</vueper-slide>

If you use images, and they are in the assets folder, Webpack has to import them with the hash, so you need to require them, this is a way to do it:

<vueper-slide v-for="(slide, i) in slides" :key="i" :title="slide.title" :image="getImage(slide.image)"></vueper-slide>

  methods: {
    getImage (name) {
      return require(`../assets/images/${name}`)
    }
  }

The last thing you need is a correct publicPath in the build in nuxt.config.js:

...

build: {
    publicPath: '/your-final-url-root/'
}

...

And you might need that for the router as well:

router: {
    base: '/your-final-url-root/'
}

The public path and router base is only for the final build after npm run build and npm run generate, it should work fine on dev server.

Hope it helps.

from vueper-slides.