{"_id":"@myop/vue","_rev":"41-a0e08282a677c1c05db8d2f162935efa","name":"@myop/vue","dist-tags":{"latest":"0.1.4"},"versions":{"0.0.1-security":{"name":"@myop/vue","version":"0.0.1-security","_id":"@myop/vue@0.0.1-security","maintainers":[{"name":"npm-support","email":"support@npmjs.com"}],"dist":{"shasum":"6d4440c39175be3e1141abc27e9882f9b3b2276c","tarball":"https://registry.npmjs.org/@myop/vue/-/vue-0.0.1-security.tgz","fileCount":2,"integrity":"sha512-EATPBWOEtSp32Vfzv2WqmibcmwI2D1AiQuU1Pg7rp/pnoKGrpZvxTw7lIWjg6gQRx71S6fjUtFcuhQJT+qxSdw==","signatures":[{"sig":"MEQCIBVITUSyLjpgPo5ZZ1gyE9HghIOBWP981tGnne1Xk82yAiBfDJfEwyGdsiimltdkjZ6R6R0OAN8OnwzyhB5wlk4daQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":428},"_from":"file:/tmp/tmp-16-Et7acOOb72fn","_npmUser":{"name":"npm","email":"npm@npmjs.com"},"_resolved":"/tmp/tmp-16-Et7acOOb72fn","_integrity":"sha512-EATPBWOEtSp32Vfzv2WqmibcmwI2D1AiQuU1Pg7rp/pnoKGrpZvxTw7lIWjg6gQRx71S6fjUtFcuhQJT+qxSdw==","repository":"npm/security-holder","description":"security holding package","directories":{},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/vue_0.0.1-security_1747031995779_0.6539399632761358","host":"s3://npm-registry-packages-npm-production"}},"0.0.22":{"name":"@myop/vue","version":"0.0.22","_id":"@myop/vue@0.0.22","maintainers":[{"name":"hgptr","email":"hadar@myop.dev"}],"contributors":[{"url":"https://github.com/hadarge","name":"Hadar Geva"}],"dist":{"shasum":"f6dd1c2a2f1caae9ff4e43acf856ab21b2beb772","tarball":"https://registry.npmjs.org/@myop/vue/-/vue-0.0.22.tgz","fileCount":2,"integrity":"sha512-y45aehs/zFDzAZy6nn5ftDeOYLHTf3rTFFD/7e54MBdLAbD4Nwc9OjgCElIs1htDji2cG8g5fobr0CAmq0LD2g==","signatures":[{"sig":"MEQCIF3cuTy7mfKM56hpAOwyXMv8xq8PhoCz6cjyWR4mku9jAiBzUaI0Nh2cB+0pBW39CXZl3TdGUGXR+sS6RqJUBJHxtA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":1423},"main":"./dist/index.umd.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.umd.js"},"./dist/style.css":"./dist/style.css"},"gitHead":"0e27055e6d3a43c6bffb289dc019a900160ee0a2","scripts":{"dev":"vite","build":"vite build && vue-tsc --emitDeclarationOnly","preview":"vite preview","release":"npm publish --access public"},"_npmUser":{"name":"hgptr","email":"hadar@myop.dev"},"_npmVersion":"10.9.2","description":"This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `\n\n\n \n\n```\n\n**Why this is powerful:**\n\n- **Fully typed** — The generated package includes complete TypeScript types for your component's data interface and all CTA event payloads\n- **Auto loaded** — Components are fetched and rendered automatically, no manual setup required\n- **Not in your code** — The actual component implementation lives on Myop and is loaded at runtime. Update your component in the dashboard and it's instantly live—no rebuild, no redeploy\n- **Zero bundle impact** — The entire `@myop/vue` package costs only ~6KB gzipped—and that's the total cost whether you use 1, 2, or 1,000 components. Auto-generated component packages are just thin typed wrappers. The actual component implementations are loaded at runtime, meaning your Myop components can be as complex, feature-rich, and heavy as you need without adding a single byte to your application bundle. Consider typical bundle costs: a chart library (~60KB), a map component (~200KB), a data grid (~150KB), a rich text editor (~100KB), or a chat widget with emoji picker (~80KB). With Myop, all of these cost ~0KB to your bundle—they load on-demand when needed\n\n**Environment options:**\n\nSet the default environment for all components using `setEnvironment`:\n\n```ts\nimport { setEnvironment } from \"@myop/vue\";\n\n// Set default environment for all component loads\nsetEnvironment(\"staging\");\n```\n\nYou can also override the environment directly on a specific component:\n\n```vue\n\n \n\n```\n\nEnvironments are fully configurable in the [dashboard](https://dashboard.myop.dev/), allowing you to test changes in staging before publishing to production.\n\nFor more details on auto-generated packages, see the [Auto-Generated Packages documentation](https://docs.myop.dev/docs/learnMyop/AutoGeneratedPackages).\n\n## Requirements\n\n- Vue 3.0+\n\n## Quick Start\n\n```vue\n\n\n\n \n\n```\n\n## Components\n\n### `MyopComponent`\n\nThe main component for embedding Myop components.\n\n```vue\n\n\n\n \n\n```\n\n#### Props\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `componentId` | `string` | The ID of the Myop component to load |\n| `data` | `object` | Data to pass to the component via `myop_init_interface` |\n| `style` | `object` | CSS styles for the container |\n| `#loader` | `slot` | Loading indicator slot (default: no loader). Use `` for default Myop loader |\n| `#fallback` | `slot` | Error fallback slot (default: ``). Override with custom component |\n| `fadeDuration` | `number` | Loader fade-out duration in ms (default: `200`) |\n| `environment` | `string` | Load from a specific environment (e.g., `\"staging\"`, `\"prod\"`) |\n| `preview` | `boolean` | Load the unpublished preview version of the component |\n\n#### Events\n\n| Event | Payload | Description |\n|-------|---------|-------------|\n| `@action` | `(action, payload)` | Generic handler for all CTA events |\n| `@[action-name]` | `payload` | Handler for specific actions (e.g., `@row-clicked`) |\n| `@load` | `component` | Called when the component finishes loading |\n| `@error` | `error: string` | Called when loading fails |\n\n#### Environments & Preview\n\nMyop supports multiple environments, allowing you to test changes before going live:\n\n```vue\n\n \n \n\n \n \n\n \n \n\n \n \n\n```\n\nEnvironments are configured in the [dashboard](https://dashboard.myop.dev/). Use `:preview=\"true\"` to test unpublished changes before making them live.\n\n### `MyopContainer` (Legacy)\n\nThe legacy container component. Use `MyopComponent` for new projects.\n\n```vue\n\n\n\n \n\n```\n\n## Type-Safe Event Handlers\n\nDefine your CTA payloads for fully typed event handlers:\n\n```vue\n\n\n\n \n\n```\n\n## Configuration\n\n### Preloading Components\n\nPreload components for faster rendering:\n\n```ts\nimport { preloadComponents, isPreloaded } from \"@myop/vue\";\n\n// Preload multiple components\nawait preloadComponents([\"component-1\", \"component-2\"]);\n\n// Check if a component is preloaded\nif (isPreloaded(\"component-1\")) {\n console.log(\"Component is cached and ready\");\n}\n```\n\n### Custom Repository URL\n\n```ts\nimport { setCloudRepositoryUrl } from \"@myop/vue\";\n\n// Point to a custom Myop server\nsetCloudRepositoryUrl(\"https://your-custom-server.com\");\n```\n\n### Environment Configuration\n\n```ts\nimport { setEnvironment } from \"@myop/vue\";\n\n// Set default environment for all component loads\nsetEnvironment(\"staging\");\n```\n\n### Local Development\n\n```ts\nimport { enableLocalDev } from \"@myop/vue\";\n\n// Connect to local Myop development server (localhost:9292)\nenableLocalDev();\n```\n\n### Advanced: Custom Repository\n\n```ts\nimport { setCloudRepository, getCloudRepository } from \"@myop/vue\";\nimport { CloudRepository } from \"@myop/sdk/helpers\";\n\n// Set a custom CloudRepository instance\nconst customRepo = new CloudRepository(\"https://custom-url.com\");\nsetCloudRepository(customRepo);\n\n// Get the current repository\nconst repo = getCloudRepository();\n```\n\n## Loading & Error States\n\nBy default, no loader is shown while the component loads. The Myop-branded fallback is displayed automatically on error.\n\n### Using the Default Myop Loader\n\n```vue\n\n\n\n \n \n \n \n \n\n```\n\n### Custom Loading State\n\n```vue\n\n \n \n