See bundle size and imports for lightweight core/composable entries, fixed skins, and individual controls. Existing aggregate imports remain supported.
API overview
Use the entries below as the public package interface. All components register their required upstream custom elements automatically.
Package entries
| Import | Runtime exports | Reference |
|---|---|---|
videojs-vue | VideoPlayer, PlayerRoot, Video, DefaultVideoSkin, NeutralVideoSkin, usePlayerState, usePlayerActions | Player, composition, media, composables |
videojs-vue/audio | AudioPlayer, AudioPlayerRoot, Audio, DefaultAudioSkin, NeutralAudioSkin, useAudioPlayerState, useAudioPlayerActions | Audio players |
videojs-vue/media/hls | HlsVideo | Media adapters |
videojs-vue/ui | Layout, buttons, sliders, poster, hotkeys, and status announcer | UI controls |
videojs-vue/i18n | MediaI18n, MediaText, and translation registry functions | Internationalization |
videojs-vue/video/legacy | VideoPlayer fixed to the legacy skin | Chrome 90+ legacy mode |
videojs-vue/skins/legacy | LegacyVideoSkin for composition | Legacy skin |
videojs-vue/skins/legacy.css | Standalone legacy stylesheet | Legacy styling |
videojs-vue/polyfills | Side-effect-only global Array.prototype.at and Object.hasOwn polyfills | Startup order |
The base entry does not import hls.js. Install @videojs/hlsjs-video@10.0.1 before importing the HLS entry.
core-js is an optional peer dependency used only by videojs-vue/polyfills. Install it with pnpm add core-js@^3.50.0 before importing that entry. Other entries do not require it; see legacy mode for when to load the polyfills.
Components
Use VideoPlayer for a complete player. Use PlayerRoot and skins with a media adapter when composing a player. Each root must contain exactly one media component.
Events
Player events documents ready, two-way setting updates, and the complete list of forwarded media events. UI controls pass listeners to their underlying custom elements.
State and actions
Composables and handles documents selectors, action return types, player targets, and exposed refs. For a complete application example, see the state and actions guide.
UI entry
UI controls lists every exported control and the properties supported by its Vue binding. See composition for layout and styling.
i18n entry
Internationalization API covers provider and text props, slots, and registry exports. See the internationalization guide for locale setup.
Type exports
| Entry | Exported types |
|---|---|
videojs-vue | VideoMediaComponent, MediaEventName, MediaProps, MediaTrack, PlayerActions, PlayerHandle, PlayerElement, PlayerMedia, PlayerState, PlayerStore, PlayerTarget |
videojs-vue/media/hls | HlsSource, HlsEngineConfig |
videojs-vue/i18n | Translations, FlatTranslations, Locale |
PlayerStore and PlayerState follow the upstream Video.js video preset. PlayerMedia describes the common native and adapter media surface; narrow the element type before using adapter-specific APIs.
Audio types are exported separately from videojs-vue/audio; see audio types and handles.