[SOLVED] Nuxt local import client only

Nuxt local import client only

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?

Solution

You could import it like that

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

As mentioned in a previous answer.