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



  • 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



  • @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



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



  • @ytsejam I am not sure your question



  • 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
    
    


  • @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
      ]
    }
    


  • So, reference this way:

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


  • @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



  • 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.


Log in to reply