Comments (6)
@Nidzan import vue-plyr as plugin and add it to your nuxt-config.js like these
-
Under your plugins folder name the file anything and do your import there and call vue.use() there too.
-
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.
from vue-plyr.
-
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)
-
Next step go to your nuxt-config.js file and add
css: [ 'vue-plyr/dist/vue-plyr.css' ], plugins: [ '~/plugins/vue-plyr' ],
from vue-plyr.
Yes, I am currently using vue-plyr running Nuxt.js
from vue-plyr.
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.
from vue-plyr.
@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?
from vue-plyr.
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.
from vue-plyr.
Related Issues (20)
- Help me
- 'npm install vue-plyr' error? HOT 3
- sampotts/plyr.git develop Permission denied HOT 3
- Not working with HLS mp4s
- Add subtitles to a Youtube iframe
- default controls shown in the demo page its not coming
- Vue Plyr 7.0.0 causes npm ci in Docker fail with error 401 HOT 3
- Any maintenance status update for this (lovely) package? HOT 3
- Installation of dependency sampotts/plyr extremely slow
- Quality settings closes
- Cannot change vimeo source dynamically - error: Unknown player. Probably unloaded
- reload componentn when language changed
- `v-if` not working with plyr.
- Controls disappears in full screen HOT 1
- Fails to compile if importing css as in the example
- How can I use it Nuxt3 app HOT 3
- Customizing player
- Nuxt 3 SSR HOT 2
- Cannot load videos using Hls.js on Vite
- Vue3 update starting time
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-plyr.