Je veux utiliser bxslider dans nuxt.js. (vue.js)

Question

Développé sous le nom de nuxt.js. Je veux implémenter un curseur. Je veux utiliser bxslider.

De 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'}, 
    ], 

} 

Je l'ai appelé bxslider.

Dans le composant de vue,

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

L'erreur suivante se produit.

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

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

Existe-t-il un moyen de résoudre ce problème?

Answer 1

Jetez un oeil à la documentation https://nuxtjs.org/examples/plugins

dans nuxt.config.js fichier

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

et plugins Créer un dossier fichier bxslider.js et faire le

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