firebase - 为什么 vue-splide 不能与 Nuxt2 一起工作？

Question

我正在尝试在 following the Vue-Splide documentation to install the plugin 之后将 Vue-Splide 添加到我的 Nuxt 项目中, 和 registering it as a Nuxt plugin我收到错误 Cannot use import statement outside a module .

nuxt.config.js

buildDir: '../functions/nuxt',
build: {
  publicPath: '/public/',
  vendor: [''],
  extractCSS: true,
  babel: {
    presets: [
      '@babel/preset-env'
    ],
    plugins: [
      ["@babel/plugin-transform-runtime"]
    ]
  }
},
plugins: [
  { src: '~/plugins/splide.client.js', mode: "client" }
],

splide.client.js

import Vue from 'vue';
import VueSplide from '@splidejs/vue-splide';
import '@splidejs/splide/dist/css/themes/splide-default.min.css';

Vue.use(VueSplide);

template

<splide :options="{ rewind: true }" class="banner-container">
  <splide-slide class="slide" v-for="slide in slides" :key="slide.id">
    <img :src="slide.imagen" :alt="slide.tombre" />
   </splide-slide>
</splide>

在 transpiling Vue-Splide 之后我现在收到错误 window is not defined ，堆栈跟踪显示它发生在 node_modules\@splidejs\splide\dist\js\splide.js 上，我尝试用 <client-only></client-only> 包围幻灯片标签，但这似乎不起作用。

我还缺少什么？

更新以包含我的依赖项

"dependencies": {
  "@nuxtjs/firebase": "^7.6.1",
  "@splidejs/vue-splide": "^0.3.5",
  "firebase": "^8.9.1",
  "isomorphic-fetch": "^3.0.0",
  "nuxt": "^2.0.0"
},
"devDependencies": {
  "@babel/plugin-transform-runtime": "^7.15.0",
  "@babel/preset-env": "^7.15.6",
  "@babel/runtime": "^7.15.4",
  "@nuxtjs/tailwindcss": "^4.2.1",
  "autoprefixer": "^10.4.0",
  "babel-eslint": "^10.0.1",
  "babel-plugin-module-resolver": "^4.1.0",
  "eslint": "^4.19.1",
  "eslint-friendly-formatter": "^4.0.1",
  "eslint-loader": "^4.0.2",
  "eslint-plugin-vue": "^7.19.1",
  "firebase-tools": "^9.22.0",
  "node-sass": "^6.0.1",
  "postcss": "^8.3.11",
  "sass-loader": "^12.3.0",
  "tailwindcss": "^2.2.19"
}

Answer 1

vue-splide integration 的文档分明是在说 Vue3 组合 API。

正在检查 vue-splide 的 github 问题, 我找到了 this one这是引用 a solution你在上面链接的。同时，在尝试此操作时，这些是我在 CLI 中收到的警告。

那些也与Vue3有关(与Nuxt2不兼容，只有Nuxt3支持Vue3)。查看所有帖子的日期，它似乎与 Vue3 仍处于测试阶段且可能未被所有人采用的时间框架有些吻合。

在某些时候，我猜测该软件包可能会在接下来的几个月中失去与 Vue2 的一些追溯兼容性。然后我尝试安装版本 0.3.5的 @splidejs/vue-splide而不是最新的，它工作得很好!

---

这是让它与 Nuxt2 一起工作的整个设置 nuxt.config.js

plugins: [{ src: '~/plugins/splide.js', mode: 'client' }],

PS:不需要 transpile因为这根本不是这里的问题

/plugins/splide.js

import Vue from 'vue'
import VueSplide from '@splidejs/vue-splide'
import '@splidejs/splide/dist/css/themes/splide-default.min.css'

Vue.use(VueSplide)

/pages/index.vue

<template>
  <client-only>
    <Splide :options="{ rewind: true }">
      <SplideSlide>
        <img
          src="https://images.unsplash.com/photo-1638204958375-4824be216720?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=776&q=80"
          alt="Sample 1"
        />
      </SplideSlide>
      <SplideSlide>
        <img
          src="https://images.unsplash.com/photo-1638176061592-d8475d970c19?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80"
          alt="Sample 2"
        />
      </SplideSlide>
    </Splide>
  </client-only>
</template>

它工作得很好

---

我已经在 github issue 中报告了这个问题，如果有人想获得更多最新信息或来自维护者的官方答复。
编辑:我们收到了 a confirmation关于非追溯兼容性。此外， <client-only> 的用法还需要防止DOM mismatch .