javascript - 无法在使用 nuxtjs 的模块外部使用 import 语句

Question

我正在尝试使用 vue-agile carousel，我可以在安装后立即安装并让它运行而没有任何问题，我正在使用 NUXT，但是在重新启动我的服务器后，我不断收到此错误并且找不到任何解决方案

<template>
  <div>
    <agile>
      <div class="slide">
        <img src="/img/img2.jpg" alt="" />
      </div>
      <div class="slide">
        <img src="/img/img1.jpg" alt="" />
      </div>
    </agile>
  </div>
</template>
<script >
import { VueAgile } from "vue-agile";
export default {
  name: "",
  layout: "",
  middleware: [],
  data() {
    return {};
  },
  components: {
    agile: VueAgile,
  },
  
};
</script>

Answer 1

您是否查看了有关 how to use this plugin in Nuxt 的文档？而不是常规的 Vue？
插件/vue-agile.js

import Vue from 'vue'
import VueAgile from 'vue-agile'

Vue.use(VueAgile)

nuxt.config.js

export default {
    plugins: ['~/plugins/vue-agile', mode: 'client']
}

要使用没有 SSR 的组件，请使用 client-only零件:

<client-only placeholder="Loading...">
    <agile>...</agile>
</client-only>

编辑 :添加 Shreerang 的建议(下方评论)。