[Solved]Where and How do I include a vue(slider) package?

[ytsejam]

Hello, I want to ask a noob question.I want to register vue-awesome-swiper in my quasar app, I tried to follow documentation, but there is only example for nuxt-js configurations

plugins: [
  { src: '@/plugins/vue-awesome-swiper', mode: 'client' },
]

Following Documentation i could globally register in main.js

Global Registration
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
Local Registration
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  }
}

In quasar where do I add registration configuration?
Thanks

[beets]

@ytsejam You can use a boot file, which is similar to nuxt plugin:

src/boot/slider.js

import VueAwesomeSwiper from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

export default async ({ app, router, store, Vue }) => {
  Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
}

And in quasar.conf.js

boot: [
  // references /src/boot/<name>.js
  'slider'
]

https://quasar.dev/quasar-cli/boot-files

[ytsejam]

so it works on ‘client’ side only how do I select this option?

[beets]

@ytsejam I am not sure your question

[ytsejam]

there is ssr and client side rendering, here it is written https://github.surmon.me/vue-awesome-swiper/?ref=madewithvuejs.com it is client only. In docs I have found it

boot: [
  {
    server: false, // run on client-side only!
    path: '<name>' // references /src/boot/<name>.js
  },
  {
    client: false, // run on server-side only!
    path: '<name>' // references /src/boot/<name>.js
  }
]

but still could not found where to install css files

This dependency was not found:

* swiper/css/swiper.css in ./src/boot/slider.js

[Hawkeye64]

@ytsejam @beets

// quasar.conf.js
return {
  // ...
  boot: [
    'some-boot-file', // runs on both server and client
    { path: 'some-other', server: false } // this boot file gets embedded only on client-side
    { path: 'third', client: false } // this boot file gets embedded only on server-side
  ]
}

[Hawkeye64]

So, reference this way:

boot: [
  { 'slider', server: false }
]

[beets]

@ytsejam Got it, yeah if the component won’t work on SSR, you just use server: false as you see in the docs.

As far as the css, I don’t actually see any css files in their github repo: https://github.com/surmon-china/vue-awesome-swiper

So I’m not sure where to import it from. Does it come from somewhere else?

Also, maybe you already know, but Quasar has an inbuilt slider: https://quasar.dev/vue-components/carousel

[ytsejam]

Thanks I have managed to solve it.
@beets yes I had to find swiper.css on internet and manually add it. this slider is very nice I am just converting my theme.