nuxtjs中的owl-carousel实现问题

Question

我在使用 nuxtjs 实现 v-owl-carousel 时遇到问题。

当我尝试：

import carousel from 'v-owl-carousel'

出现错误信息

文档未定义

我按照此页面https://github.com/93gaurav93/v-owl-carousel上的要求遵循了配置建议，但没有任何效果......

有人可以帮助我吗？ 有人可以给我一个轨道吗？

配置空项目

{
  "name": "nuxtjs_test_owl_carousel",
  "version": "1.0.0",
  "description": "My gnarly Nuxt.js project",
  "author": "",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "cross-env": "^5.2.0",
    "nuxt": "^2.4.0",
    "v-owl-carousel": "^1.0.8"
  },
  "devDependencies": {
    "nodemon": "^1.18.9"
  }
}

Answer 1

https://nuxtjs.org/faq/window-document-undefined/

这是由于服务器端渲染。 如果需要指定仅在客户端导入资源，则需要使用 process.client 变量。

例如，在您的 .vue 文件中：

if (process.client) { require('external_library') }

Answer 2

Owl carousel 不支持 SSR（服务器端渲染），您必须按照以下示例使用：

<no-ssr> <!-- important to add no-ssr-->
  <carousel :options>
    ...content
  </carousel>
</no-ssr>