I want to use bxslider in nuxt.js. (vue.js)

Developed as nuxt.js. I want to implement a slider. I want to use bxslider.

From nuxt.config.js

head: {

  script: [
    {type: 'text / javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'},
    {type: 'text / javascript', src: 'https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js'},
  ],

  link: [
    {rel: 'stylesheet', type: 'text / css', href: '//cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.css'},
  ],

}

I have called bxslider.

In the vue component,

mounted () {
  $('.bxslider').bxSlider()
}

The following error occurs.

[Vue warn]: Error in mounted hook: "TypeError: $ (...). BxSlider is not a function"

TypeError: $ (...). BxSlider is not a function

Is there a way to solve this?

1 answer

  • answered 2017-10-11 10:03 agriboz

    Take a look at documentation https://nuxtjs.org/examples/plugins

    in nuxt.config.js file

    module.exports = {
      build: {
        vendor: ['bxslider']
      },
     plugins: [
       // ssr: false to only include it on client-side
       { src: '~/plugins/bxslider.js', ssr: false }
     ]
    }
    

    and in plugins folder create bxslider.js file and do the following

    import Vue from 'vue'
    import bxslider from 'bxslider'
    Vue.use(bxslider)