仅NUXT本地导入客户端

发布于 2025-01-25 00:33:45 字数 1182 浏览 1 评论 0原文

我正在尝试使用 vueplyr 在nuxt 2中插件/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?

该如何实现这一问题吗？与如何在NUXT中进行动态导入？

原文

I'm trying to use VuePlyr in Nuxt 2. Right now I have it working as a plugin /plugins/vue-plyr.js,

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

Vue.use(VuePlyr)

but it is just used in one page, so I would like to remove it from the main bundle and just import it locally when used. I've tried this in my page (the template part was working when using the plugin).

<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>

but unfortunately, I'm getting this error

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

Any idea how I could achieve this? Related with How to make a dynamic import in Nuxt?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

于我来说 2025-02-01 00:33:45

那样导入。

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

您可以如A

You could import it like that

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

As mentioned in a previous answer.

回复收藏 0 原文

情域 2025-02-01 00:33:45

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

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

然后请确保围绕组件的使用围绕客户端标签：

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

编辑：如果将其添加为插件，则不需要在挂载的方法中再次导入组件

In your nuxt config define the plugin as client only:

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

Then also make sure there's a client-only tag around the use of the component:

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

Edit: importing the component again in the mounted method isn't necessary if you added it as a plugin

回复收藏 0 原文

~没有更多了~