Comment installer le carrousel flickity avec vuejs et nuxtjs

Question

Je suis un nouveau développeur vuejs. J'ai étudié vuejs pendant un moment et maintenant j'ai décidé de développer un projet en utilisant vuejs.

Alors j'ai appris sur nuxtjs qui est un rendu côté serveur. tout se passe bien. Je peux utiliser bootstrap4 avec mon projet.

Maintenant je voudrais utiliser le carrousel flickity https://flickity.metafizzy.co sur mon projet et j'ai trouvé qu'il y a un package vuejs sur https://github.com/drewjbartlett/vue-flickity

Je suis les instructions sur comment installer ce composant sur mon projet en

npm install vue-flickity --save

et j'ai mis un peu de code

  import Logo from '~/components/Logo.vue'
  import Searchbar from '~/components/Searchbar.vue'
  import axios from 'axios'
  import Flickity from 'vue-flickity';

  export default {
    data () {
      return {
        has_location: false,
        flickityOptions: {
          initialIndex: 3,
          prevNextButtons: false,
          pageDots: false,
          wrapAround: true
        }
      }
    },
    components: {
      Logo,
      Searchbar,
      Flickity
    }
  }

mais il affiche window is not defined

J'ai essayé cela avec un autre composant comme google map, ça affiche la même erreur.

Merci de me dire ce que j'ai mal fait et comment installer un nouveau composant sur le projet.

Merci.

Answer 1

Nuxt.js utilise SSR pour rendre votre site côté serveur, par conséquent l'objet window n'est pas accessible dans l'environnement node.js.

Ce que vous devez faire est d'utiliser le composant no-ssr intégré pour empêcher Nuxt.js de le rendre côté serveur.

Vous pouvez simplement faire ceci:

MISE À JOUR : Si vous obtenez toujours une erreur à ce stade, alors chargez Flickity dans un Plugin personnalisé que vous chargerez avec ssr désactivé

Créez un fichier nommé plugins/VueFlickity.js

import Vue from 'vue'
import Flickity from 'vue-flickity'

Vue.component('Flickity', Flickity)

Ensuite dans votre nuxt.config.js ajoutez :

module.exports = {
  // ...
  plugins: [
    { src: '~/plugins/VueFlickity.js', ssr: false }
  ]
}

N'oubliez pas de supprimer l'enregistrement local du composant Flickity :

components: {
  Logo,
  Searchbar
  // Flickity <-- supprimez cette ligne
}

Ceci a été testé et fonctionne maintenant parfaitement.

Answer 2

Il existe plusieurs façons de résoudre ce problème - sans tout écrire ici, consultez l'article que j'ai écrit qui explique comment utiliser le système de plugin Nuxt pour contourner ce problème spécifique: https://jason-awbrey.com/blog/creating-a-nuxt-plugin-get-past-window-undefined-issue-with-3rd-party-libraries

J'espère que cela vous aidera!