使用Flickity时Nuxt应用程序抛出错误消息

Question

我正在尝试在Nuxt应用程序中实现一个carousel。这是我的package.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, },，我会得到这个错误消息。

​

​

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

Answer 1

将其作为插件导入是一种解决方案，如下所示：https://github.com/drewjbartlett/vue-flickity/issues/38#issuecomment-906280271

同时，它根本不是最优的。

Importing it with a dynamic import可能是一个解决方案，我正在尝试找到一种正确编写它的方法。

更新的答案

这看起来在我这边工作正常，你能确认一下吗？

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

<script>
import Vue from 'vue'

const DEFAULT_OPTIONS = {
  cellAlign: 'left',
  pageDots: true,
  prevNextButtons: true,
}

export default {
  name: 'BaseCarousel',
  props: {
    active: {
      type: Boolean,
      default: true,
    },
    options: {
      type: Object,
      required: false,
      default: () => ({}),
    },
  },
  async mounted() {
    if (process.browser) {
      const Flickity = await import('vue-flickity')
      Vue.component('Flickity', Flickity)
    }
  },
}
</script>

Answer 2

您是否在plugins/vue-flickity.js中添加了类似以下内容：

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

Vue.component('Flickity', Flickity)

同时添加到nuxt.config.js

plugins: [
  { src: '~/plugins/vue-flickity.js', ssr: false },
]

Answer 3

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

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

demo