如何使用 vuejs 和 nuxtjs 安装 flickity carousel

Question

我是一个新的 vuejs 开发者。我研究了一段时间 vueje，现在我决定使用 vuejs 开发一个项目。

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

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

我按照说明如何将此组件安装到我的项目中

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来呈现您的网站服务器端，因此window在 node.js 环境中无法访问对象。

您需要做的是使用内置 no-ssr组件来阻止 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
}

这已经过测试，现在可以正常工作了。