How to use with Nuxtjs - Githubissues

warpcgd / vue-concise-slider

vue-concise-slider,A simple vue sliding component

https://warpcgd.github.io/vue-concise-slider/#/

919 stars 186 forks source link

How to use with Nuxtjs #52

Open PhouvanhKCSV opened 5 years ago

PhouvanhKCSV commented 5 years ago

I've tried this

import Vue from 'vue'
import slider from 'vue-concise-slider'

Vue.use('slider', slider)

in nuxt plugin files and use this in nuxt.config.js

...
plugins: [
    { src: '~/plugins/vue-concise-slider.js', ssr: false },
  ],
...

But it is still not work, could someone please suggest. Thanks

warpcgd commented 5 years ago

Hi, @PhouvanhKCSV, Sorry, no SSR support for the time being, We will support it in the near future, ths

PhouvanhKCSV commented 5 years ago

Thanks

karambafe commented 5 years ago

For use in Nuxt.js you need to do:

create file vue-concise-slider.js in plugins directory

import Vue from 'vue';
import { slider, slideritem } from 'vue-concise-slider';

Vue.component('Slider', slider);
Vue.component('SliderItem', slideritem);

update nuxt.config.js

plugins: [
  ...
  { src: '~/plugins/vue-concise-slider', ssr: false },
],

and use global components Slider and SliderItem

<template>
 <div style="width:100%;margin:20px auto;height:400px">
      <slider ref="slider" :options="options" @init='onInit' @slide="slide">
          <slider-item
            v-for="(item,index) in pages"
            :key="index"
            :style="item.style"
          >
            {{item.html}}
          </slider-item>
      </slider>
 </div>
</template>

it worked for me

warpcgd commented 5 years ago

@karambafe thanks

marianabhud commented 2 years ago

its alse new about window is not defined ?