{"id":12547,"library":"vue-plyr","title":"Vue Plyr Video and Audio Player","description":"Vue-plyr is a component library that provides a seamless integration of the robust Plyr.io media player into Vue.js applications. It supports HTML5 video and audio, as well as embeds from YouTube and Vimeo, offering a consistent and customizable player experience. Currently at version 7.0.0, vue-plyr aligns with modern Vue 3 applications while also providing backward compatibility for Vue 2. Its release cadence typically follows updates to the underlying Plyr library and major Vue.js versions. A key differentiator is its straightforward API for embedding various media types and accessing the underlying Plyr instance for advanced control, simplifying the process compared to integrating Plyr directly. The library also includes specific support for Server-Side Rendering (SSR) environments like Nuxt.js, addressing common challenges in universal applications.","status":"active","version":"7.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/redxtech/vue-plyr","tags":["javascript","vue-plyr","vue","plyr","video","audio","youtube","vimeo","media"],"install":[{"cmd":"npm install vue-plyr","lang":"bash","label":"npm"},{"cmd":"yarn add vue-plyr","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-plyr","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core media player library that vue-plyr wraps.","package":"plyr","optional":false}],"imports":[{"note":"Use named import for the component. CommonJS require is generally deprecated in modern Vue CLI/Vite projects favoring ESM.","wrong":"const VuePlyr = require('vue-plyr')","symbol":"VuePlyr","correct":"import VuePlyr from 'vue-plyr'"},{"note":"The CSS is provided as a direct file path and must be explicitly imported for player styling.","wrong":"import 'vue-plyr/css'","symbol":"CSS","correct":"import 'vue-plyr/dist/vue-plyr.css'"},{"note":"For Server-Side Rendering (SSR) environments, this specific build must be used to avoid client-side API errors.","wrong":"import VuePlyr from 'vue-plyr'","symbol":"VuePlyr SSR","correct":"import VuePlyr from 'vue-plyr/dist/vue-plyr.ssr.js'"}],"quickstart":{"code":"import { createApp } from 'vue'\nimport App from './App.vue'\nimport VuePlyr from 'vue-plyr'\nimport 'vue-plyr/dist/vue-plyr.css'\n\nconst app = createApp(App)\n\napp.use(VuePlyr, { plyr: {} })\n\napp.mount('#app')\n\n// In App.vue or another component:\n// <template>\n//   <vue-plyr :options=\"{autoplay: false, muted: false}\">\n//     <video controls crossorigin playsinline>\n//       <source src=\"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4\" type=\"video/mp4\" />\n//     </video>\n//   </vue-plyr>\n// </template>\n// <script>\n// export default {\n//   name: 'App'\n// }\n// </script>","lang":"javascript","description":"Initializes a Vue 3 application, globally registers the `VuePlyr` component with default options, and demonstrates embedding an HTML5 video player."},"warnings":[{"fix":"For Vue 3.x, use `createApp(App).use(VuePlyr, { plyr: {} }).mount('#app')`. For Vue 2.x, continue using `Vue.use(VuePlyr, { plyr: {} })`.","message":"Version 7.x primarily targets Vue 3.x. While Vue 2.x support is maintained, the global registration syntax has changed from `Vue.use()` to `createApp().use()` for Vue 3 applications.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Ensure `import 'vue-plyr/dist/vue-plyr.css'` is included in your main application entry file (e.g., `main.js` or `main.ts`).","message":"Forgetting to import the required CSS stylesheet (`vue-plyr/dist/vue-plyr.css`) will result in an unstyled or visually broken player, as the component only provides functionality.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Import the SSR-specific build: `import VuePlyr from 'vue-plyr/dist/vue-plyr.ssr.js'`. Refer to the package's SSR documentation for detailed Nuxt.js integration.","message":"When developing Server-Side Rendered (SSR) applications (e.g., with Nuxt.js), the standard client-side build of `vue-plyr` may cause build errors due to direct browser API access. An SSR-optimized module is available.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add a ref to your component `<vue-plyr ref=\"plyrRef\">` and then access `this.$refs.plyrRef.player` in your component's methods or lifecycle hooks.","message":"To interact with the underlying Plyr.js player instance (e.g., to call methods like `play()`, `pause()`), you must use a `ref` on the `vue-plyr` component and access its `player` property.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"For Vue 3, use the application instance's `use` method: `createApp(App).use(VuePlyr).mount('#app')`.","cause":"Attempting to use `Vue.use()` for global component registration in a Vue 3 application, where `Vue` is no longer a global constructor.","error":"TypeError: Cannot read properties of undefined (reading 'use')"},{"fix":"Add `import 'vue-plyr/dist/vue-plyr.css'` to your application's entry point (e.g., `main.js`, `main.ts`).","cause":"The essential CSS stylesheet for `vue-plyr` has not been loaded into the application.","error":"Player displays with incorrect styling, missing controls, or is unformatted."},{"fix":"Import the SSR-optimized version of the component: `import VuePlyr from 'vue-plyr/dist/vue-plyr.ssr.js'` in your SSR-specific files or use dynamic imports for client-only components.","cause":"The default `vue-plyr` module attempts to access browser-specific APIs (like `window` or `document`) during the server-side rendering phase.","error":"ReferenceError: window is not defined (during SSR build or development)"}],"ecosystem":"npm"}