ArtPlayer/example/vue.js/README.md

Vue consumer example

Run the example from the repository root with Node from .node-version and Yarn Classic 1.22.22. Use yarn install --frozen-lockfile and only the root yarn.lock.

yarn build artplayer artplayer-plugin-danmuku artplayer-plugin-document-pip
yarn dev:vue
yarn typecheck:vue
yarn lint:vue
yarn build:vue
yarn test:vue-consumer

The example's three ArtPlayer dependencies use local file:../../packages/... references while the next major versions are unpublished. Build those packages first and run the example commands from the repository root. Keep only the root yarn.lock; external applications should select published versions. The isolated consumer checks still replace these inputs with actual packed artifacts.

The build output is refactor/.cache/vue-example-dist. Rebuild changed library distributions with yarn build followed by the package name.

Files and ownership

• src/Player.vue owns the player and container through shallow refs. It constructs once on mount, emits getInstance, then releases its reference before calling destroy(false) on owner unmount. Vue owns the outer div. Player state is private: the component ref exposes the normal Vue surface, not an art property.
• src/player-options.ts holds this example's existing configuration overrides: French language, French/Indonesian dictionaries and fresh Danmuku/Document PiP factories per mount. They still override option.lang, i18n and plugins. The container comes from Vue; other options pass through. The url assertion preserves the historical Partial input while the core performs runtime validation.
• src/App.vue demonstrates the existing event/prop syntax. Its reactive option object keeps narrow field inference and is checked against Partial<Option>.
• src/main.ts is the client entry referenced by index.html. tsconfig.json replaces jsconfig.json, preserves the @ alias and enables strict source/template checking.
• vite.config.js uses the standard Vue plugin. The unused optional devtools overlay was removed from this example's build dependencies; no player UI was changed.

Compatibility and updates

The wrapper retains required option: Partial<Option> and the getInstance event. The array-form event declaration remains intentionally unchanged: historical listener type extraction is not narrowed. Annotate event handlers with Artplayer as App.vue does. Missing URLs may typecheck through Partial but still fail the core's runtime validation.

Changing an option object or its fields does not recreate or update the player. Use the received instance's methods, such as switchUrl, for live updates. Change the component key to reconstruct using the latest options. No deep option watcher or new event/ref contract was introduced. CSS classes and styles still fall through to the root div; other native attributes continue to work for JS consumers. Strict template checking distinguishes declared props from arbitrary attributes.

Vue captures listener errors through its error handling. A mounted component retains its instance after a captured listener error and destroys it on unmount. KeepAlive deactivation retains the instance; owner unmount destroys it. The example does not silently pause or destroy players when cached. Use player APIs if your application needs that behavior.

Reproducible checks

Root development dependencies pin Vue/compiler-sfc 3.5.28, Vue Vite plugin 6.0.1, vue-tsc 3.3.11, TypeScript 5.9.3 and Vite 7.3.6. No player runtime dependency changes. The isolated consumer installs actual packed core, Danmuku and Document PiP files, frozen-reinstalls them, and verifies every package file. Its Vue compiler and all resolved declarations also live in that isolated install; no source aliases or workspace type fallbacks are permitted. A plain-JS SFC separately verifies the legacy event, attribute and repeated-mount syntax.

Development/production browser runs cover native play/pause/seek and pixels, instance API source updates, option/key behavior, refs, siblings, repeated mount, listener errors, KeepAlive and real Worker termination. Video/XML responses use controlled fixtures. Plugin registration does not certify window PiP interaction, full Danmuku scheduling, CDN availability or physical macOS/iOS Safari.

yarn test:vue-consumer --before runs the original Player.vue from the recorded Git baseline against the same candidate packages. Both old and new wrappers must pass; this is a compatibility control, not an old published npm wrapper test. Evidence is retained in unique refactor/.cache/vue-consumer-* folders. GitHub runs the test and uploads these reports; local success does not imply verified remote jobs.