---
source: crates/vize_musea/src/lib.rs
expression: vue
---
VueOutput {
code: "import { defineComponent, h, reactive, markRaw } from 'vue';\nimport TargetComponent from './Button.vue';\nimport Button from './Button.vue'\n\nexport const metadata = {\n title: 'Button',\n description: 'A versatile button component',\n component: './Button.vue',\n category: 'atoms',\n tags: ['ui', 'input'],\n status: 'ready',\n variantCount: 3,\n};\n\nexport const variants = [\n { name: 'Primary', isDefault: true, args: {}, skipVrt: false },\n { name: 'Secondary', isDefault: false, args: {}, skipVrt: false },\n { name: 'With Icon', isDefault: false, args: {}, skipVrt: false },\n];\n\nexport const Primary = defineComponent({\n name: 'Primary',\n setup(props, { attrs }) {\n const defaultArgs = {};\n const args = reactive({ ...defaultArgs, ...attrs });\n return () => h('div', { class: 'musea-variant', 'data-variant': 'Primary' }, [\n h(TargetComponent, args, () => `<Button variant=\"primary\">Primary Button</Button>`)\n ]);\n }\n});\n\nPrimary.isDefault = true;\n\nPrimary.variantIndex = 0;\n\nexport const Secondary = defineComponent({\n name: 'Secondary',\n setup(props, { attrs }) {\n const defaultArgs = {};\n const args = reactive({ ...defaultArgs, ...attrs });\n return () => h('div', { class: 'musea-variant', 'data-variant': 'Secondary' }, [\n h(TargetComponent, args, () => `<Button variant=\"secondary\">Secondary Button</Button>`)\n ]);\n }\n});\n\nSecondary.variantIndex = 1;\n\nexport const WithIcon = defineComponent({\n name: 'WithIcon',\n setup(props, { attrs }) {\n const defaultArgs = {};\n const args = reactive({ ...defaultArgs, ...attrs });\n return () => h('div', { class: 'musea-variant', 'data-variant': 'With Icon' }, [\n h(TargetComponent, args, () => `<Button variant=\"primary\" icon=\"plus\">Add Item</Button>`)\n ]);\n }\n});\n\nWithIcon.variantIndex = 2;\n\nexport default defineComponent({\n name: 'ArtGallery',\n props: {\n variant: { type: String, default: null },\n interactive: { type: Boolean, default: false },\n },\n setup(props) {\n const variantComponents = {\n 'Primary': Primary,\n 'Secondary': Secondary,\n 'With Icon': WithIcon,\n };\n\n return () => {\n if (props.variant && variantComponents[props.variant]) {\n return h(variantComponents[props.variant]);\n }\n // Render all variants\n return h('div', { class: 'musea-gallery' },\n variants.map(v => h(variantComponents[v.name], { key: v.name }))\n );\n };\n }\n});\n",
metadata_code: "// Auto-generated metadata module\nexport const metadata = {\n title: 'Button',\n description: 'A versatile button component',\n component: './Button.vue',\n category: 'atoms',\n tags: ['ui', 'input'],\n status: 'ready',\n variantCount: 3,\n};\n\nexport const variants = [\n {\n name: 'Primary',\n isDefault: true,\n skipVrt: false,\n },\n {\n name: 'Secondary',\n isDefault: false,\n skipVrt: false,\n },\n {\n name: 'With Icon',\n isDefault: false,\n skipVrt: false,\n },\n];\n",
}