@myop/vue 0.0.24 → 0.0.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +238 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,240 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @myop/vue
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Official Vue bindings for embedding [Myop](https://myop.dev) components in your Vue applications.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Myop components are framework-agnostic UI components that can be updated in real-time without redeploying your application. Build once, embed anywhere, and iterate instantly. Perfect for teams that need to ship UI changes fast, A/B test components, or empower non-developers to customize the interface. Myop is also the safest way to adopt AI-generated components in your application—whether created by developers or non-developers—with built-in sandboxing and controlled integration.
|
|
6
|
+
|
|
7
|
+
[](https://www.npmjs.com/package/@myop/vue)
|
|
8
|
+
[](https://opensource.org/licenses/MIT)
|
|
9
|
+
[](https://myop.dev/discord)
|
|
10
|
+
|
|
11
|
+
[Website](https://www.myop.dev/) | [Documentation](https://docs.myop.dev/) | [Dashboard](https://dashboard.myop.dev/) | [Discord](https://myop.dev/discord)
|
|
12
|
+
|
|
13
|
+
## Installation
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install @myop/vue
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
```bash
|
|
20
|
+
yarn add @myop/vue
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
pnpm add @myop/vue
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Requirements
|
|
28
|
+
|
|
29
|
+
- Vue 3.0+
|
|
30
|
+
|
|
31
|
+
## Quick Start
|
|
32
|
+
|
|
33
|
+
```vue
|
|
34
|
+
<script setup lang="ts">
|
|
35
|
+
import { MyopContainer } from "@myop/vue";
|
|
36
|
+
|
|
37
|
+
function handleReady(component) {
|
|
38
|
+
console.log("Component loaded!", component);
|
|
39
|
+
}
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<template>
|
|
43
|
+
<MyopContainer
|
|
44
|
+
componentId="your-component-id"
|
|
45
|
+
:onReady="handleReady"
|
|
46
|
+
:style="{ width: '600px', height: '400px' }"
|
|
47
|
+
/>
|
|
48
|
+
</template>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
## Components
|
|
52
|
+
|
|
53
|
+
### `MyopContainer`
|
|
54
|
+
|
|
55
|
+
The main component for embedding Myop components in Vue applications.
|
|
56
|
+
|
|
57
|
+
```vue
|
|
58
|
+
<script setup lang="ts">
|
|
59
|
+
import { MyopContainer } from "@myop/vue";
|
|
60
|
+
import type { IMyopComponent } from "@myop/sdk/host";
|
|
61
|
+
|
|
62
|
+
const items = [
|
|
63
|
+
{ id: 1, name: "Item 1" },
|
|
64
|
+
{ id: 2, name: "Item 2" },
|
|
65
|
+
];
|
|
66
|
+
|
|
67
|
+
function handleReady(component: IMyopComponent, innerVueComponentRef?: any) {
|
|
68
|
+
console.log("Component ready!", component);
|
|
69
|
+
// Access inner Vue component if the Myop component is Vue-based
|
|
70
|
+
if (innerVueComponentRef) {
|
|
71
|
+
console.log("Inner Vue component:", innerVueComponentRef);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
</script>
|
|
75
|
+
|
|
76
|
+
<template>
|
|
77
|
+
<MyopContainer
|
|
78
|
+
componentId="abc123"
|
|
79
|
+
:items="items"
|
|
80
|
+
:onReady="handleReady"
|
|
81
|
+
>
|
|
82
|
+
<template #loading>
|
|
83
|
+
<div class="loading-spinner">Loading...</div>
|
|
84
|
+
</template>
|
|
85
|
+
</MyopContainer>
|
|
86
|
+
</template>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
#### Props
|
|
90
|
+
|
|
91
|
+
| Prop | Type | Description |
|
|
92
|
+
|------|------|-------------|
|
|
93
|
+
| `componentId` | `string` | **Required.** The ID of the Myop component to load |
|
|
94
|
+
| `flowId` | `string` | Optional flow ID for component resolution |
|
|
95
|
+
| `onReady` | `(component, innerVueRef?) => void` | Called when the component finishes loading |
|
|
96
|
+
|
|
97
|
+
#### Passing Data
|
|
98
|
+
|
|
99
|
+
Pass data to your Myop component using Vue's attribute binding. All attributes are forwarded to the component:
|
|
100
|
+
|
|
101
|
+
```vue
|
|
102
|
+
<template>
|
|
103
|
+
<MyopContainer
|
|
104
|
+
componentId="my-table"
|
|
105
|
+
:rows="tableData"
|
|
106
|
+
:columns="columnConfig"
|
|
107
|
+
:sortable="true"
|
|
108
|
+
title="Users Table"
|
|
109
|
+
/>
|
|
110
|
+
</template>
|
|
111
|
+
```
|
|
112
|
+
|
|
113
|
+
#### Loading Slot
|
|
114
|
+
|
|
115
|
+
Display a custom loading indicator using the `loading` slot:
|
|
116
|
+
|
|
117
|
+
```vue
|
|
118
|
+
<template>
|
|
119
|
+
<MyopContainer componentId="my-component">
|
|
120
|
+
<template #loading>
|
|
121
|
+
<div class="custom-loader">
|
|
122
|
+
<span>Loading component...</span>
|
|
123
|
+
</div>
|
|
124
|
+
</template>
|
|
125
|
+
</MyopContainer>
|
|
126
|
+
</template>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
## Vue-to-Vue Integration
|
|
130
|
+
|
|
131
|
+
When your Myop component is built with Vue, you get seamless integration:
|
|
132
|
+
|
|
133
|
+
- **Prop reactivity**: Props passed to `MyopContainer` automatically flow to the inner Vue component
|
|
134
|
+
- **Expose access**: Access the inner component's exposed properties and methods via the `innerVueComponentRef` parameter in `onReady`
|
|
135
|
+
|
|
136
|
+
```vue
|
|
137
|
+
<script setup lang="ts">
|
|
138
|
+
import { ref } from "vue";
|
|
139
|
+
import { MyopContainer } from "@myop/vue";
|
|
140
|
+
|
|
141
|
+
const myopContainerRef = ref(null);
|
|
142
|
+
|
|
143
|
+
function handleReady(component, innerVueRef) {
|
|
144
|
+
// Call methods exposed by the inner Vue component
|
|
145
|
+
if (innerVueRef?.someMethod) {
|
|
146
|
+
innerVueRef.someMethod();
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
</script>
|
|
150
|
+
|
|
151
|
+
<template>
|
|
152
|
+
<MyopContainer
|
|
153
|
+
ref="myopContainerRef"
|
|
154
|
+
componentId="vue-component"
|
|
155
|
+
:onReady="handleReady"
|
|
156
|
+
/>
|
|
157
|
+
</template>
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
## Handling Events
|
|
161
|
+
|
|
162
|
+
Myop components can emit CTA (Call-to-Action) events. Handle them using the component reference:
|
|
163
|
+
|
|
164
|
+
```vue
|
|
165
|
+
<script setup lang="ts">
|
|
166
|
+
import { MyopContainer } from "@myop/vue";
|
|
167
|
+
|
|
168
|
+
function handleReady(component) {
|
|
169
|
+
// Subscribe to CTA events
|
|
170
|
+
component.on("row-clicked", (payload) => {
|
|
171
|
+
console.log("Row clicked:", payload);
|
|
172
|
+
});
|
|
173
|
+
|
|
174
|
+
component.on("export-requested", (payload) => {
|
|
175
|
+
console.log("Export format:", payload.format);
|
|
176
|
+
});
|
|
177
|
+
}
|
|
178
|
+
</script>
|
|
179
|
+
|
|
180
|
+
<template>
|
|
181
|
+
<MyopContainer
|
|
182
|
+
componentId="data-table"
|
|
183
|
+
:onReady="handleReady"
|
|
184
|
+
/>
|
|
185
|
+
</template>
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
## TypeScript Support
|
|
189
|
+
|
|
190
|
+
The package includes full TypeScript support:
|
|
191
|
+
|
|
192
|
+
```vue
|
|
193
|
+
<script setup lang="ts">
|
|
194
|
+
import { MyopContainer } from "@myop/vue";
|
|
195
|
+
import type { IMyopComponent } from "@myop/sdk/host";
|
|
196
|
+
|
|
197
|
+
interface TableData {
|
|
198
|
+
rows: { id: number; name: string }[];
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
const tableData: TableData = {
|
|
202
|
+
rows: [
|
|
203
|
+
{ id: 1, name: "Alice" },
|
|
204
|
+
{ id: 2, name: "Bob" },
|
|
205
|
+
],
|
|
206
|
+
};
|
|
207
|
+
|
|
208
|
+
function handleReady(component: IMyopComponent) {
|
|
209
|
+
console.log("Loaded:", component);
|
|
210
|
+
}
|
|
211
|
+
</script>
|
|
212
|
+
|
|
213
|
+
<template>
|
|
214
|
+
<MyopContainer
|
|
215
|
+
componentId="users-table"
|
|
216
|
+
v-bind="tableData"
|
|
217
|
+
:onReady="handleReady"
|
|
218
|
+
/>
|
|
219
|
+
</template>
|
|
220
|
+
```
|
|
221
|
+
|
|
222
|
+
## API Reference
|
|
223
|
+
|
|
224
|
+
### Exports
|
|
225
|
+
|
|
226
|
+
| Export | Description |
|
|
227
|
+
|--------|-------------|
|
|
228
|
+
| `MyopContainer` | Main component for embedding Myop components |
|
|
229
|
+
|
|
230
|
+
### MyopContainer Props
|
|
231
|
+
|
|
232
|
+
| Prop | Type | Required | Description |
|
|
233
|
+
|------|------|----------|-------------|
|
|
234
|
+
| `componentId` | `string` | Yes | The ID of the Myop component to load |
|
|
235
|
+
| `flowId` | `string` | No | Flow ID for component resolution |
|
|
236
|
+
| `onReady` | `function` | No | Callback when component is ready |
|
|
237
|
+
|
|
238
|
+
## License
|
|
239
|
+
|
|
240
|
+
MIT
|