使用Flickity时Nuxt应用程序抛出错误消息 [英] Nuxt application throwing error message when using Flickity

问题描述

我正在尝试在Nuxt应用程序中实现旋转传送带。这是我的包。json

 "dependencies": {
    "@nuxtjs/i18n": "^7.0.3",
    "core-js": "^3.15.1",
    "flickity": "^2.2.2",
    "lodash": "^4.17.21",
    "nuxt": "^2.15.7",
    "postcss-nesting": "^8.0.1",
    "throttle-debounce": "^3.0.1",
    "vue-flickity": "^1.2.1"
  },

这是我的代码

<template>
  <ClientOnly>
    <Flickity
      ref="flickity"
      :key="keyIncrementer"
      class="carousel"
      :class="{ 'carousel--active': active }"
      :options="computedOptions"
    >
      <slot />
    </Flickity>
  </ClientOnly>
</template>

<script>

import Flickity from 'vue-flickity'

const DEFAULT_OPTIONS = {
  cellAlign: 'left',
  pageDots: true,
  prevNextButtons: true
}
export default {
  components: {
    Flickity,
  },
  name: 'BaseCarousel',
  props: {
    active: {
      type: Boolean,
      default: true
    },
    options: {
      type: Object,
      required: false,
      default: () => ({})
    }
  },

如果我不注释掉import Flickity from 'vue-flickity'和 components: { Flickity, },我收到此错误消息。

我不明白这里出了什么问题。如果有人知道，请帮助.

推荐答案

另一个解决方法是仅在客户端将vue-flickity注册为async component：

export default {
  components: {
    [process.browser && 'Flickity']: () => import('vue-flickity'),
  }
}

demo

这篇关于使用Flickity时Nuxt应用程序抛出错误消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！