Nuxt local import client only

Question

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?

Answer 1

You could import it like that

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

As mentioned in a previous answer.

Answer 2

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