moq-dev · pzanella · Feb 25, 2026 · Feb 25, 2026
diff --git a/README.md b/README.md
@@ -5,19 +5,20 @@ All of the listed frameworks are setup using the Quick Start build with:
 - NPM
 - React
 - Typescript
+- Vue
 
 If a framework is listed as supported, you can test it via:
 ```bash
 npm i
 npm run dev
 ```
 
-
 ## Frameworks
 
 | Framework                                       | Supported  |
 |-------------------------------------------------|------------|
 | [Vite 5](./vite-5)                              | ✅         |
 | [Vite 6](./vite-6)                              | ✅         |
 | [Vite 7](./vite-7)                              | ✅         |
+| [Vue 3](./vue-moq)                              | ✅         |
 | [Astro 5](https://github.com/kixelated/moq.dev) | ✅         |
diff --git a/vite-5/README.md b/vite-5/README.md
@@ -33,7 +33,7 @@ Output is generated in the `dist/` directory.
 ## Web Components
 
 ### Watch (Subscribe)
-- **`<moq-watch>`** - Core element for subscribing to MoQ streams. Accepts `url`, `path`, `muted`, `paused`, `volume`, `jitter` attributes. Contains a `<canvas>` or `<video>` element for rendering.
+- **`<moq-watch>`** - Core element for subscribing to MoQ streams. Accepts `url`, `name`, `muted`, `paused`, `volume`, `jitter` attributes. Contains a `<canvas>` or `<video>` element for rendering.
 - **`<moq-watch-ui>`** - Solid.js UI overlay providing playback controls, stats panel, and buffering indicators.
 - **`<moq-watch-support>`** - Feature detection banner that displays browser compatibility warnings.
 

diff --git a/vite-5/src/App.tsx b/vite-5/src/App.tsx
@@ -13,16 +13,16 @@ function App() {
 	return (
 		<>
 			<moq-watch-ui>
-				<moq-watch url={RELAY_URL} path="bbb" muted>
-					<canvas />
+				<moq-watch url={RELAY_URL} name="bbb" muted style={{ width: "640px", height: "360px" }}>
+					<canvas style={{ width: "100%", height: "100%" }} />
 				</moq-watch>
 			</moq-watch-ui>
 
 			<moq-watch-support show="always" />
 
 			<moq-publish-ui>
-				<moq-publish url={RELAY_URL} path="my-broadcast" source="camera">
-					<video muted autoPlay />
+				<moq-publish url={RELAY_URL} path="my-broadcast" source="camera" style={{ width: "640px", height: "360px" }}>
+					<video style={{ width: "100%", height: "100%" }} muted autoPlay />
 				</moq-publish>
 			</moq-publish-ui>
 

diff --git a/vite-6/README.md b/vite-6/README.md
@@ -33,7 +33,7 @@ Output is generated in the `dist/` directory.
 ## Web Components
 
 ### Watch (Subscribe)
-- **`<moq-watch>`** - Core element for subscribing to MoQ streams. Accepts `url`, `path`, `muted`, `paused`, `volume`, `jitter` attributes. Contains a `<canvas>` or `<video>` element for rendering.
+- **`<moq-watch>`** - Core element for subscribing to MoQ streams. Accepts `url`, `name`, `muted`, `paused`, `volume`, `jitter` attributes. Contains a `<canvas>` or `<video>` element for rendering.
 - **`<moq-watch-ui>`** - Solid.js UI overlay providing playback controls, stats panel, and buffering indicators.
 - **`<moq-watch-support>`** - Feature detection banner that displays browser compatibility warnings.
 

diff --git a/vite-6/src/App.tsx b/vite-6/src/App.tsx
@@ -13,16 +13,16 @@ function App() {
 	return (
 		<>
 			<moq-watch-ui>
-				<moq-watch url={RELAY_URL} path="bbb" muted>
-					<canvas />
+				<moq-watch url={RELAY_URL} name="bbb" muted style={{ width: "640px", height: "360px" }}>
+					<canvas style={{ width: "100%", height: "100%" }} />
 				</moq-watch>
 			</moq-watch-ui>
 
 			<moq-watch-support show="always" />
 
 			<moq-publish-ui>
-				<moq-publish url={RELAY_URL} path="my-broadcast" source="camera">
-					<video muted autoPlay />
+				<moq-publish url={RELAY_URL} path="my-broadcast" source="camera" style={{ width: "640px", height: "360px" }}>
+					<video style={{ width: "100%", height: "100%" }} muted autoPlay />
 				</moq-publish>
 			</moq-publish-ui>
 

diff --git a/vite-7/README.md b/vite-7/README.md
@@ -41,7 +41,7 @@ Output is generated in the `dist/` directory.
 ## Web Components
 
 ### Watch (Subscribe)
-- **`<moq-watch>`** - Core element for subscribing to MoQ streams. Accepts `url`, `path`, `muted`, `paused`, `volume`, `jitter` attributes. Contains a `<canvas>` or `<video>` element for rendering.
+- **`<moq-watch>`** - Core element for subscribing to MoQ streams. Accepts `url`, `name`, `muted`, `paused`, `volume`, `jitter` attributes. Contains a `<canvas>` or `<video>` element for rendering.
 - **`<moq-watch-ui>`** - Solid.js UI overlay providing playback controls, stats panel, and buffering indicators.
 - **`<moq-watch-support>`** - Feature detection banner that displays browser compatibility warnings.
 

diff --git a/vite-7/src/App.tsx b/vite-7/src/App.tsx
@@ -13,16 +13,16 @@ function App() {
 	return (
 		<>
 			<moq-watch-ui>
-				<moq-watch url={RELAY_URL} path="bbb" muted>
-					<canvas />
+				<moq-watch url={RELAY_URL} name="bbb" muted style={{ width: "640px", height: "360px" }}>
+					<canvas style={{ width: "100%", height: "100%" }} />
 				</moq-watch>
 			</moq-watch-ui>
 
 			<moq-watch-support show="always" />
 
 			<moq-publish-ui>
-				<moq-publish url={RELAY_URL} path="my-broadcast" source="camera">
-					<video muted autoPlay />
+				<moq-publish url={RELAY_URL} path="my-broadcast" source="camera" style={{ width: "640px", height: "360px" }}>
+					<video style={{ width: "100%", height: "100%" }} muted autoPlay />
 				</moq-publish>
 			</moq-publish-ui>
 

diff --git a/vue-moq/.editorconfig b/vue-moq/.editorconfig
@@ -0,0 +1,8 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+end_of_line = lf
+max_line_length = 100
diff --git a/vue-moq/.gitattributes b/vue-moq/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
diff --git a/vue-moq/.gitignore b/vue-moq/.gitignore
@@ -0,0 +1,39 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
+
+.eslintcache
+
+# Cypress
+/cypress/videos/
+/cypress/screenshots/
+
+# Vitest
+__screenshots__/
+
+# Vite
+*.timestamp-*-*.mjs
diff --git a/vue-moq/.oxlintrc.json b/vue-moq/.oxlintrc.json
@@ -0,0 +1,10 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["eslint", "typescript", "unicorn", "oxc", "vue"],
+  "env": {
+    "browser": true
+  },
+  "categories": {
+    "correctness": "error"
+  }
+}
diff --git a/vue-moq/README.md b/vue-moq/README.md
@@ -0,0 +1,50 @@
+# MoQ Web Components + Vue
+
+Vue 3 application demonstrating Media over QUIC (MoQ) web components for real-time media streaming. Uses `@moq/watch` and `@moq/publish` packages with Vue 3 and Vite 7.
+
+## Features
+
+- **Watch**: Subscribe to real-time media streams from a MoQ relay
+- **Publish**: Publish camera/screen media to a MoQ relay
+- Custom web components with Solid.js-based UI overlays
+- Feature detection and browser support banners
+
+## Prerequisites
+
+- Node.js 20.19.0 or >=22.12.0
+
+## Quick Start
+
+```bash
+npm install
+npm run dev
+```
+
+The app opens at `http://localhost:5173`.
+
+## Build
+
+```bash
+npm run build
+```
+
+Output is generated in the `dist/` directory.
+
+## Web Components
+
+### Watch (Subscribe)
+- **`<moq-watch>`** - Core element for subscribing to MoQ streams. Accepts `url`, `name`, `muted`, `paused`, `volume`, `jitter` attributes. Contains a `<canvas>` or `<video>` element for rendering.
+- **`<moq-watch-ui>`** - Solid.js UI overlay providing playback controls, stats panel, and buffering indicators.
+- **`<moq-watch-support>`** - Feature detection banner that displays browser compatibility warnings.
+
+### Publish
+- **`<moq-publish>`** - Core element for publishing media to MoQ streams. Accepts `url`, `path`, `source`, `muted`, `invisible` attributes. Contains a `<video>` element for preview.
+- **`<moq-publish-ui>`** - Solid.js UI overlay providing publishing controls and configuration.
+- **`<moq-publish-support>`** - Feature detection banner for publishing capabilities.
+
+## Resources
+
+- [@moq/watch](https://www.npmjs.com/package/@moq/watch) - Watch/subscribe to MoQ streams
+- [@moq/publish](https://www.npmjs.com/package/@moq/publish) - Publish to MoQ streams
+- [Vite](https://vite.dev)
+- [Vue](https://vuejs.org)
diff --git a/vue-moq/env.d.ts b/vue-moq/env.d.ts
@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<object, object, unknown>
+  export default component
+}
diff --git a/vue-moq/eslint.config.ts b/vue-moq/eslint.config.ts
@@ -0,0 +1,23 @@
+import { globalIgnores } from 'eslint/config'
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+import pluginVue from 'eslint-plugin-vue'
+import pluginOxlint from 'eslint-plugin-oxlint'
+
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+
+export default defineConfigWithVueTs(
+  {
+    name: 'app/files-to-lint',
+    files: ['**/*.{vue,ts,mts,tsx}'],
+  },
+
+  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
+
+  ...pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+
+  ...pluginOxlint.buildFromOxlintConfigFile('.oxlintrc.json'),
+)
diff --git a/vue-moq/index.html b/vue-moq/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>