vue-plyr

library7.0.0jsnpmunverified

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.

web-framework

npm install vue-plyr

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VUE-PLYR

vue-plyr

web-frameworkjavascriptv7.0.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VuePlyr

✓ import VuePlyr from 'vue-plyr'

✗ const VuePlyr = require('vue-plyr')

Use named import for the component. CommonJS require is generally deprecated in modern Vue CLI/Vite projects favoring ESM.

CSS

✓ import 'vue-plyr/dist/vue-plyr.css'

✗ import 'vue-plyr/css'

The CSS is provided as a direct file path and must be explicitly imported for player styling.

VuePlyr SSR

✓ import VuePlyr from 'vue-plyr/dist/vue-plyr.ssr.js'

✗ import VuePlyr from 'vue-plyr'

For Server-Side Rendering (SSR) environments, this specific build must be used to avoid client-side API errors.

Initializes a Vue 3 application, globally registers the `VuePlyr` component with default options, and demonstrates embedding an HTML5 video player.

import { createApp } from 'vue' import App from './App.vue' import VuePlyr from 'vue-plyr' import 'vue-plyr/dist/vue-plyr.css' const app = createApp(App) app.use(VuePlyr, { plyr: {} }) app.mount('#app') // In App.vue or another component: // <template> // <vue-plyr :options="{autoplay: false, muted: false}"> // <video controls crossorigin playsinline> // <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" /> // </video> // </vue-plyr> // </template> // <script> // export default { // name: 'App' // } // </script>

Debug

Known issues

breakingVersion 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.

fix

For Vue 3.x, use `createApp(App).use(VuePlyr, { plyr: {} }).mount('#app')`. For Vue 2.x, continue using `Vue.use(VuePlyr, { plyr: {} })`.

affects: >=7.0.0

gotchaForgetting 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.

fix

Ensure `import 'vue-plyr/dist/vue-plyr.css'` is included in your main application entry file (e.g., `main.js` or `main.ts`).

affects: >=1.0.0

gotchaWhen 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.

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.

affects: >=1.0.0

gotchaTo 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.

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.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'use')

Attempting to use `Vue.use()` for global component registration in a Vue 3 application, where `Vue` is no longer a global constructor.

fix

For Vue 3, use the application instance's `use` method: `createApp(App).use(VuePlyr).mount('#app')`.

Player displays with incorrect styling, missing controls, or is unformatted.

The essential CSS stylesheet for `vue-plyr` has not been loaded into the application.

fix

Add `import 'vue-plyr/dist/vue-plyr.css'` to your application's entry point (e.g., `main.js`, `main.ts`).

ReferenceError: window is not defined (during SSR build or development)

The default `vue-plyr` module attempts to access browser-specific APIs (like `window` or `document`) during the server-side rendering phase.

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.

Upgrade

Version history

7.0.0latest on npm

Audit

Dependencies

plyrrequiredCore media player library that vue-plyr wraps.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/redxtech/vue-plyr ↗

packagehttps://www.npmjs.com/package/vue-plyr ↗

homepagehttps://vue-plyr.codes ↗