仅限 Nuxt 本地导入客户端

Question

我正在尝试在 Nuxt 2 中使用 VuePlyr。现在我将它用作插件 /plugins/vue-plyr.js,

import Vue from 'vue'
import VuePlyr from '@skjnldsv/vue-plyr'
import 'vue-plyr/dist/vue-plyr.css'

Vue.use(VuePlyr)

但它只在一个页面中使用，所以我想将它从主包中删除，并在使用时在本地导入它。我已经在我的页面中尝试过这个（使用插件时模板部分正在工作）。

<template>
  <client-only>
    <vue-plyr>
      <div data-plyr-provider="vimeo" :data-plyr-embed-id="id" />
    </vue-plyr>
  </client-only>
</template>

<script>
import 'vue-plyr/dist/vue-plyr.css'
import Vue from 'vue'

export default {

  async mounted () {
    const VuePlyr = await import('@skjnldsv/vue-plyr')
    Vue.use(VuePlyr)
  }
}
</script>

但不幸的是，我遇到了这个错误

[Vue warn]: Unknown custom element: <vue-plyr> - did you register the component correctly?

知道如何实现吗？与

相关

Answer 1

在您的 nuxt 配置中将插件定义为仅客户端：

plugins: [
    { src: "~/plugins/vue-plyr.js", mode: "client" }
],

然后还要确保在组件的使用周围有一个 client-only 标记：

<template>
  <client-only>
    <vue-plyr>
      <div data-plyr-provider="vimeo" :data-plyr-embed-id="id" />
    </vue-plyr>
  </client-only>
</template>

编辑：如果您将其添加为插件，则无需在安装方法中再次导入该组件

Answer 2

你可以这样导入它

export default {
  components: {
    [process.client && 'VuePlyr']: () => import('@skjnldsv/vue-plyr'),
  }
}

如中所述。

仅限 Nuxt 本地导入客户端

Nuxt local import client only

vue.js

vuejs2

nuxt.js

vue-plyr