Can It Work For Nuxt.js?

[mbengchan]

Wow! I love these player. I am building an app with Nuxt.js and i require having a player and a playlist.
Please can these plugin work with Nuxt.js?

[thegeminisociety]

Yes, I am currently using vue-plyr running Nuxt.js

[ghost]

Hello.
Does anyone have working example on the plugin running in Nuxt.js?
I'm trying couple of different configurations, but nothing seems to work:

• config 1: http://prntscr.com/jarjab
• config 2: http://prntscr.com/jaridt

Any help or suggestion would be much appreciated.

[mbengchan]

@Nidzan import vue-plyr as plugin and add it to your nuxt-config.js like these

1. Under your plugins folder name the file anything and do your import there and call vue.use() there too.

2. Go to your nuxt-config.js file add the plugin to your plugins array like so
   { src: '~/plugins/vue-plyr', ssr: false },

disabling the server-side-rendering option

OPTIONAL
You can also add the plugin to you build bundle like so
build: { extractCSS: true, vendor: [ 'vue-plyr' ], }

Now You are good to go, you can use Vue-Plyr player anywhere in your components.

[ghost]

@shadomax thank you very much, this did the trick.
However, I have another issue now regarding transitions. Looks like that transition hook on leave and destroy triggers plyr destroy as well - http://prntscr.com/jdmpix

On load, plyr looks like this - http://prntscr.com/jdmlq0
but during transition to another page I get this - http://prntscr.com/jdmm4t
and whole buch of erros in console - http://prntscr.com/jdmmx9

Any suggestion how to work around these issues?

[redxtech]

This can work just fine with nuxt. Thanks @shadomax for the tips on how to use is (I haven't used nuxt before) and I will add it to the readme in the next version.

[Devilkas]

1. In your plugins folder create file vue-plyr.js
   Insert to this file code
   import Vue from 'vue' import VuePlyr from 'vue-plyr' Vue.use(VuePlyr)

2. Next step go to your nuxt-config.js file and add
   css: [ 'vue-plyr/dist/vue-plyr.css' ], plugins: [ '~/plugins/vue-plyr' ],