Skip to content

GuideGetting Started

Vue Installation Guide

Install Video.js in Vue or Nuxt and build a video player with HTML custom elements

Vue apps built with Vite, Astro, or Nuxt use Video.js HTML custom elements directly in their templates. These lightweight, framework-free components build accessible, customizable players with small bundles, advanced features, and consistent behavior across browsers.

AI Quickstart

Paste this prompt into your coding agent:

Install the Video.js skill: run `npx @videojs/cli agents skills` and follow the steps for the agent you are running in. If you can't run commands, follow the install instructions at https://github.com/videojs/skills instead. Then use the Video.js skill when you work on video or audio in this project. When installation details are needed, run `npx @videojs/cli agents init --framework vue` to print the version-matched choices and instructions without changing files.

Choose your framework

Choose the JavaScript framework for your project.

ReactComponents and hooks for React 19HTMLCustom elements for any stackVueVue 3 using HTML custom elementsSvelteSvelte 5 using HTML custom elements

Choose your app

Choose whether the instructions target a Vite, Astro, or Nuxt app.

ViteFast app and development serverAstroContent-focused sites with islandsNuxtFull-stack Vue framework

Choose your use case

Choose the ready-made player that is closest to what you are building.

VideoOn-demand video with full controlsAudioPodcasts, music, and audio-only playbackLive VideoStreams with a Live button, no durationLive AudioLive radio and audio streamsBackground VideoMuted, looping video behind your content

Choose your skin

Choose how your player looks. You can add the files for any skin to your project and edit them later.

DefaultComplete controls with a modern, frosted lookMinimalThe same controls with clean, solid surfacesNo skinBring your own UI built from the components
0:00
Video preset with the default skin, playing our demo media.

Choose your media

Paste a media URL to detect its source type, pick one directly, or upload a video to Mux. The generated packages and component update with your choice.

Optional. The URL also ends up in your generated code.

HTML5 VideoMP4, WebM, and other file URLsHLSAdaptive .m3u8 streams via hls.jsDASHAdaptive .mpd streams via dash.jsMuxMux playback IDs with Mux Data selected by defaultVimeoVimeo videos and private linksYouTubeYouTube videos and shortsCloudflare StreamCloudflare Stream videosTikTokTikTok videosTwitchTwitch channels, videos, and clips
Drop a video to host it for free on MuxWe transcode it into an HLS stream and set it as your source above.orPowered by

Choose your extensions

Add optional behavior to the player. Only extensions that work with your player and media source appear below.

No optional extensions apply to these selections.

Prepare your app

Choose whether to create the selected Vue app setup or add Video.js to a project you already have.

New projectCreate a new appExisting projectAdd to an existing app
pnpm create vite . --template vue-ts --no-interactive
pnpm install

Install the packages

Install the HTML elements and any playback adapter your selected media source needs.

pnpm add @videojs/html@10.0.0-rc.4

Register custom elements

Vue’s template compiler treats unknown tags as Vue components and warns when it cannot resolve them. Tell it which tags are Video.js custom elements with isCustomElement. List only the tags your templates use.

import vue from '@vitejs/plugin-vue';
import { defineConfig } from 'vite';

const videoJsElements = new Set(['video-player', 'video-skin']);

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => videoJsElements.has(tag),
        },
      },
    }),
  ],
});

Add your player

  1. Add the player component

    Add a single-file component that imports the elements it renders. The imports register the selected player, skin, media, and extensions with the browser; the template composes them.

    <script setup lang="ts">
import '@videojs/html/video/player';
import '@videojs/html/video/skin';
</script>

<template>
  <!--
    The player element owns and shares state between the UI
    components and Media. Put layout on the skin or container.
   -->
  <video-player>
    <!--
      Skins contain the entire player UI and are easily swappable.
      Add the skin source to your project for full control over its
      UI components.
     -->
    <video-skin>
      <!--
          Media are players without UIs, handling networking
          and display of the media. They are easily swappable
          to handle different sources.
        -->
      <slot />
    </video-skin>
  </video-player>
</template>

<style>
video-skin {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
}
</style>

  2. Render the player

    Render the component in your app and pass it the media source you selected above.

    <script setup lang="ts">
import VideoPlayer from './components/VideoPlayer.vue';
</script>

<template>
  <VideoPlayer>
    <video src="https://stream.mux.com/BV3YZtogl89mg9VcNBhhnHm02Y34zI1nlMuMQfAbl3dM/highest.mp4" playsinline></video>
  </VideoPlayer>
</template>

Run your app

Start the app and verify that the selected media plays.

pnpm dev

That’s it! You now have a working Video.js player.

Choose what to do next

Customize

Use Video.js with Vue and Nuxt
Read player state, pass objects as properties, and configure Nuxt
Customize skins
Change colors, typography, sizing, and poster presentation
Architecture
Learn how the player, skins, media, and UI components fit together

Deploy

Browser support
Check supported browsers and rendering environments
TypeScript
Configure TypeScript for Video.js packages
Bundlers
Check bundler compatibility
Content Security Policy
Configure Content Security Policy for your player
CDN
See every bundle the CDN serves and the layout rules behind the URLs
Self-host the player
Serve the player from your own origin for offline or restricted-network deployments

Something not quite right? You can submit an issue and ask for help, or explore other support options.