Vue Document Picture-in-Picture

A Vue 3 component library for creating Picture-in-Picture windows using the Document Picture-in-Picture API.

Browser Support

• This feature may not work in some browsers. Browser compatibility can be checked at CanIUse.

• This feature is only available in Secure Contexts (HTTPS or localhost).

Installation

npm install vue-pip

Usage

Basic Example

<template>
  <DocumentPip
    :isPipOpen="isPipOpen"
    :size="{ width: 500, height: 400 }"
    @onClose="handleClose"
  >
    <MyComponent />
  </DocumentPip>
</template>

<script setup lang="ts">
import DocumentPIP from "vue-pip";

const isPipOpen = ref(false);

const togglePip = () => {
  isPipOpen.value = !isPipOpen.value;
};

const handleClose = () => {
  isPipOpen.value = false;
};
</script>

With Tailwind CSS

<template>
  <DocumentPip
    ref="documentPIPRef"
    mode="copy"
    :isPipOpen="isPipOpen"
    :size="{ width: 500, height: 400 }"
    :copyAllStyles="false"
    :cdnScripts="cdnScripts"
    @onClose="handleClose"
  >
    <MyComponent />
  </DocumentPip>
</template>

<script setup lang="ts">
import { ref, useTemplateRef } from "vue";
import DocumentPIP from "vue-pip";

const documentPIPRef = useTemplateRef("documentPIPRef");

const isPipOpen = ref(false);

const cdnScripts = ["https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"];

const togglePip = () => {
  isPipOpen.value = !isPipOpen.value;
};

const handleClose = () => {
  isPipOpen.value = false;
};
</script>

API Reference

Template Ref

| Type | Description | | ---------------- | ----------- | | Window \| null | PIP window |

DocumentPIP Props

| Prop | Type | Default | Description | | ------------------------------ | ------------------------------------------ | ------------ | --------------------------------------------------------------------------------------------------------------------- | | isPipOpen | boolean | - | Controls whether the PIP window is open | | size | Partial<PIPWindowSize> | - | Size of the PIP window | | mode | 'clone' \| 'transfer' \| 'transfer-only' | 'transfer' | Content display modeclone: keep original + copytransfer: move to PIPtransfer-only: only move to PIP | | copyAllStyles | boolean | true | Whether to copy all styles to PIP window | | cdnScripts | string[] | - | Array of CDN script URLs to load in PIP window | | disallowReturnToOpener | boolean | false | Whether to disallow returning to the opener window | | preferInitialWindowPlacement | boolean | false | Whether to prefer initial window placement |

DocumentPIP Events

| Event | Description | | --------- | ------------------------------------- | | onClose | Emitted when the PIP window is closed | | onEnter | Emitted when the PIP window is opened |

Types

interface PIPWindowSize {
  width: number;
  height: number;
}

type Mode = "clone" | "transfer" | "transfer-only";

Browser Support

This library uses the Document Picture-in-Picture API, which is currently supported in:

• Chrome 116+
• Edge 116+
• Opera 102+

Related Packages

• react-document-pip - React version of Document Picture-in-Picture

License

MIT