如何使用vuejs和nuxtjs安装flickity轮播

Question

我是一名新的vuejs开发人员。我有一段时间学习vueje，现在我决定用vuejs开发一个项目。

所以我了解了服务器端渲染的nuxtjs。一切顺利。我可以在我的项目中使用bootstrap4。

现在我想在我的项目中使用flickity carousel https://flickity.metafizzy.co，我发现https://github.com/drewjbartlett/vue-flickity上有一个vuejs包

我按照说明如何通过

将此组件安装到我的项目中

npm install vue-flickity --save

并加上一些代码

<script>
  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
    }
  }
</script>

但显示窗口未定义

我尝试使用谷歌地图等其他组件时，它会显示同样的错误。

请告诉我我做了什么错误以及如何在项目中安装新组件。

谢谢。

Answer 1

Nuxt.js使用SSR呈现您的网站服务器端，因此在node.js环境中无法访问window对象。

您需要做的是使用built-in no-ssr component来阻止Nuxt.js在服务器端呈现它。

你可以这样做：

<no-ssr>
  <Flickity :options="...">
    <!-- slides -->
  </Flickity>
</no-ssr>

  

更新：如果此时仍然出现错误，请加载Flickity   您将加载ssr已禁用的自定义插件

创建名为plugins/VueFlickity.js

的文件

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

Vue.component('Flickity', Flickity)

然后在你的nuxt.config.js添加：

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

不要忘记删除Flickity本地组件注册：

components: {
  Logo,
  Searchbar
  // Flickity <-- remove this line
}

这已经过测试，现在已全面运作。

Answer 2

有多种方法可以解决这个问题 - 无需在此处编写所有内容，请查看我编写的文章，该文章使用Nuxt插件系统来解决此特定问题：https://jason-awbrey.com/blog/creating-a-nuxt-plugin-get-past-window-undefined-issue-with-3rd-party-libraries

希望它有所帮助！

Answer 3

我用以下方法修复了它：

let Flickity = {};
if (process.browser) {
    Flickity = require('flickity.js');
}