{"_id":"@aoles-gl/vue","name":"@aoles-gl/vue","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@aoles-gl/vue","version":"0.1.0","description":"Vue 3 component library for Aoles GL video editor","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","style":"./dist/style.css","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs","types":"./dist/index.d.ts"},"./styled":{"import":"./dist/styled.js","require":"./dist/styled.cjs","types":"./dist/styled.d.ts"},"./unstyled":{"import":"./dist/unstyled.js","require":"./dist/unstyled.cjs","types":"./dist/unstyled.d.ts"},"./style.css":"./dist/style.css"},"keywords":["video-editor","webgl","vue3"],"author":{"name":"laoleshisui"},"homepage":"https://www.pixoclip.com","bugs":{"url":"https://github.com/laoleshisui/aoles-gl-vue-demo/issues"},"license":"SEE LICENSE IN LICENSE","dependencies":{"@aoles-gl/ui":"0.1.0","@aoles-gl/core":"0.1.0","@aoles-gl/effects":"0.1.0","@aoles-gl/theme":"0.1.0"},"publishConfig":{"access":"public"},"peerDependencies":{"@ckpack/vue-color":"^1.4.0","@ctrl/tinycolor":"^4.0.0","@element-plus/icons-vue":"^2.0.0","@floating-ui/vue":"^1.0.0","@vueuse/core":"^10.0.0","@webav/av-cliper":"^0.9.0","element-plus":"^2.0.0","lodash-es":"^4.17.0","opfs-tools":"^0.4.0","pinia":"^2.0.0","spark-md5":"^3.0.0","srt-parser-2":"^1.2.0","vue":"^3.4.0","vue-element-plus-x":"^1.3.0","vue-i18n":"^9.0.0","vue-virtual-scroller":"^2.0.0-beta.8","vue3-moveable":"^0.18.0","wavesurfer.js":"^7.0.0","zod":"^3.0.0 || ^4.0.0"},"devDependencies":{"@tailwindcss/aspect-ratio":"^0.4.2","@tailwindcss/forms":"^0.5.11","@tailwindcss/line-clamp":"^0.4.4","@tailwindcss/typography":"^0.5.20","@vitejs/plugin-vue":"^5.0.0","autoprefixer":"^10.5.4","cssnano":"^8.0.2","postcss":"^8.5.25","postcss-import":"^16.1.1","postcss-nesting":"^14.0.1","sass":"^1.102.0","tailwindcss":"^3.4.19","typescript":"~5.3.0","vite":"^5.0.0","vite-plugin-dts":"^3.7.0","vue-tsc":"^2.0.0"},"scripts":{"dev":"vite build --watch","build":"vite build","type-check":"vue-tsc --noEmit"},"_id":"@aoles-gl/vue@0.1.0","_integrity":"sha512-o8TkJ0AqtDmLjGhULPQmST8z1Y4+8jwMX17lTkP9pcawMxFxAyocKPANHgl5+U8mZTHMkwa/D8JxRQNofz3ZFg==","_resolved":"/Users/yangxian/dev/aoles-gl-web-package/artifacts/release/aoles-gl-vue-0.1.0.tgz","_from":"file:artifacts/release/aoles-gl-vue-0.1.0.tgz","_nodeVersion":"23.10.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-o8TkJ0AqtDmLjGhULPQmST8z1Y4+8jwMX17lTkP9pcawMxFxAyocKPANHgl5+U8mZTHMkwa/D8JxRQNofz3ZFg==","shasum":"799f63453de58e9b659e3ab4a10b03181c1dd4b0","tarball":"https://registry.npmjs.org/@aoles-gl/vue/-/vue-0.1.0.tgz","fileCount":99,"unpackedSize":1165021,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIG6gijIqc94lh1/S5ONWP/QlQ5gI1sL0uGF2sea3wOieAiEAgjpvJexCoXF1raAttjoMbv5O1BuGhblq1onDCUExkMg="}]},"_npmUser":{"name":"laoleshisui","email":"1539807453@qq.com"},"directories":{},"maintainers":[{"name":"laoleshisui","email":"1539807453@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue_0.1.0_1786277437843_0.6179634265331857"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-09T12:10:37.676Z","0.1.0":"2026-08-09T12:10:38.025Z","modified":"2026-08-09T12:10:38.201Z"},"maintainers":[{"name":"laoleshisui","email":"1539807453@qq.com"}],"description":"Vue 3 component library for Aoles GL video editor","homepage":"https://www.pixoclip.com","keywords":["video-editor","webgl","vue3"],"author":{"name":"laoleshisui"},"bugs":{"url":"https://github.com/laoleshisui/aoles-gl-vue-demo/issues"},"license":"SEE LICENSE IN LICENSE","readme":"# @aoles-gl/vue\n\nVue 3 component library for Aoles GL video editor.\n\n## Installation\n\n```bash\nnpm install @aoles-gl/vue\n```\n\nInstall peer dependencies:\n\n```bash\nnpm install vue@^3.4 pinia@^2 vue-i18n@^9 element-plus @element-plus/icons-vue \\\n  @vueuse/core @floating-ui/vue vue3-moveable wavesurfer.js \\\n  @webav/av-cliper opfs-tools @ckpack/vue-color @ctrl/tinycolor \\\n  lodash-es spark-md5 srt-parser-2 vue-virtual-scroller vue-element-plus-x zod\n```\n\n## WASM Setup\n\nUse Vite's `?url` import — no manual file copying needed:\n\n```typescript\n// main.ts\nimport controllerJs   from '@aoles-gl/core/wasm/GLController.mjs?url'\nimport controllerWasm from '@aoles-gl/core/wasm/GLController.wasm?url'\n```\n\nYour Vite dev server also needs these headers for WASM threading:\n\n```typescript\n// vite.config.ts\nexport default defineConfig({\n  server: {\n    headers: {\n      'Cross-Origin-Opener-Policy': 'same-origin',\n      'Cross-Origin-Embedder-Policy': 'require-corp',\n    },\n  },\n})\n```\n\n## Usage\n\n```typescript\n// engine.ts\nimport { Engine } from '@aoles-gl/vue';\nimport controllerJs   from '@aoles-gl/core/wasm/GLController.mjs?url'\nimport controllerWasm from '@aoles-gl/core/wasm/GLController.wasm?url'\n\n// 1. Create engine with output resolution and frame rate\nexport const engine = new Engine(undefined, undefined, {\n  width: 1920,\n  height: 1080,\n  fps: 30,\n});\n\n// 2. Set WASM paths\nengine.configure({ jsPath: controllerJs, wasmPath: controllerWasm });\n\n// 3. (Optional) Set static asset base paths\nengine.configAssetPath({\n  fontPath:  '/fonts/',\n  imagePath: '/image/',\n  glslPath:  '/glsl/',\n});\n\n// 4. Run logic after WASM is ready\nengine.onWasmReady(async () => {\n  console.log('Engine ready');\n});\n\n```\n\nMount `App.vue` normally from `main.ts`; the editor subtree receives this\nengine through `AolesProvider`:\n\n```vue\n<script setup lang=\"ts\">\nimport {\n  AolesProvider,\n  ControllerPreview,\n  TrackContainer,\n} from '@aoles-gl/vue';\nimport { engine } from './engine';\nimport MyButton from './MyButton.vue';\n</script>\n\n<template>\n  <AolesProvider\n    :engine=\"engine\"\n    theme=\"system\"\n    density=\"compact\"\n    :tokens=\"{ colorPrimary: '#1677ff', panelRadius: 6 }\"\n    :components=\"{ Button: MyButton }\"\n  >\n    <div class=\"editor\">\n      <ControllerPreview />\n      <TrackContainer />\n    </div>\n  </AolesProvider>\n</template>\n```\n\n`provideEngine(engine, app)` remains supported for existing integrations.\nBoth adapters share the same `--aoles-*` CSS variables. The default entry and\n`@aoles-gl/vue/styled` load the packaged stylesheet; use\n`@aoles-gl/vue/unstyled` when the host supplies every style.\n\n## Components\n\n- `ControllerPreview` — WebGL preview player\n- `TrackContainer` — Multi-track timeline\n- `AttributeContainer` — Property panel\n- `GlobalConfigDialog` — Global settings\n\n## Requirements\n\n- Vue 3.4+\n- Modern browser with WebGL 2 and WebAssembly support\n- Chrome 89+ / Firefox 89+ / Safari 15.2+\n\n## API\n\nSee [@aoles-gl/core](https://www.npmjs.com/package/@aoles-gl/core) for core API documentation.\n\n## Product and Examples\n\n- Product website: [PixoClip](https://www.pixoclip.com)\n- Vue example and issues: [aoles-gl-vue-demo](https://github.com/laoleshisui/aoles-gl-vue-demo)\n- React example and issues: [aoles-gl-react-demo](https://github.com/laoleshisui/aoles-gl-react-demo)\n\n## License\n\nAoles GL is proprietary software, not open-source software. Evaluation and\nnon-production development are permitted under the\n[Aoles GL SDK License Agreement](./LICENSE). Production use, public deployment,\nand commercial use require a valid commercial license from Aoles GL.\n","readmeFilename":"README.md","_rev":"1-d8f1cb9dc34549ea631cdc394c375ff4"}