使用Flickity时Nuxt应用程序抛出错误消息 [英] Nuxt application throwing error message when using Flickity
本文介绍了使用Flickity时Nuxt应用程序抛出错误消息的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在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'),
}
}
这篇关于使用Flickity时Nuxt应用程序抛出错误消息的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文