@blogmcp/mdx-render-vue 0.1.0

package/src/registry.ts

@@ -0,0 +1,272 @@
+/**
+ * MDX Component Registry (Vue)
+ *
+ * Attaches Vue-specific render/edit loaders to the framework-agnostic metadata
+ * published by @blogmcp/mdx-schema. Schema is the single source of truth for
+ * component descriptions, prop shapes, and MCP-facing examples — this file
+ * adds only the Vue wiring (dynamic imports of SFCs + editor theming).
+ */
+
+import { defineAsyncComponent, defineComponent, h, type Component } from 'vue'
+import {
+  componentMetadata,
+  getComponentMetadata,
+  getComponentNames,
+  type ComponentMetadata,
+} from '@blogmcp/mdx-schema/metadata'
+import { prepareProps } from '@blogmcp/mdx-schema'
+
+// Re-export schema helpers so callers that already have the registry can reach
+// metadata without a second import.
+export { componentMetadata, getComponentMetadata, getComponentNames }
+
+/**
+ * Sentinel property read by the per-renderer "prepareProps is wired"
+ * integration test. Wrapped components carry this with the component's
+ * schema name so the test can confirm wrapping end-to-end (vs the
+ * historical regex-grep on registry source, which was easily defeated
+ * by commented-out code and unused imports).
+ */
+export const MDX_PREPARED_SENTINEL = '__mdxPreparePropsAppliedFor' as const
+
+export interface EditorConfig {
+  /** SVG icon name used in MdxBlockView header */
+  icon: string
+  /** Primary text/accent color */
+  color: string
+  /** Border color */
+  borderColor: string
+  /** Background color (typically rgba) */
+  bgColor: string
+}
+
+export interface ComponentRegistration {
+  metadata: ComponentMetadata
+  editor: EditorConfig
+  /** Render variants: variant name → async loader. Must include 'default'. */
+  render: Record<string, () => Promise<{ default: Component }>>
+  /** Edit component (dark theme) for md-editor preview */
+  edit: () => Promise<{ default: Component }>
+  /** Optional custom editor view for complex inline editing (Gallery drag-and-drop, CodeBlock textarea) */
+  editorView?: () => Promise<{ default: Component }>
+}
+
+/**
+ * Per-component Vue wiring. Metadata is pulled from the schema package by name
+ * so Phase 1b additions (Button, Card, etc.) only require schema changes +
+ * a new entry here.
+ */
+interface VueWiring {
+  editor: EditorConfig
+  render: Record<string, () => Promise<{ default: Component }>>
+  edit: () => Promise<{ default: Component }>
+}
+
+const vueWiring: Record<string, VueWiring> = {
+  Callout: {
+    editor: { icon: 'info', color: '#569cd6', borderColor: '#569cd6', bgColor: 'rgba(86, 156, 214, 0.08)' },
+    render: {
+      default: () => import('./render/callout/CalloutDefault.vue'),
+      minimal: () => import('./render/callout/CalloutMinimal.vue'),
+    },
+    edit: () => import('./edit/CalloutEdit.vue'),
+  },
+  YouTube: {
+    editor: { icon: 'play', color: '#ff4444', borderColor: '#ff4444', bgColor: 'rgba(255, 68, 68, 0.08)' },
+    render: {
+      default: () => import('./render/youtube/YouTubeDefault.vue'),
+    },
+    edit: () => import('./edit/YouTubeEdit.vue'),
+  },
+  Gallery: {
+    editor: { icon: 'image', color: '#4ec9b0', borderColor: '#4ec9b0', bgColor: 'rgba(78, 201, 176, 0.08)' },
+    render: {
+      default: () => import('./render/gallery/GalleryGrid.vue'),
+      grid: () => import('./render/gallery/GalleryGrid.vue'),
+    },
+    edit: () => import('./edit/GalleryEdit.vue'),
+  },
+  CodeBlock: {
+    editor: { icon: 'code', color: '#ce9178', borderColor: '#ce9178', bgColor: 'rgba(206, 145, 120, 0.08)' },
+    render: {
+      default: () => import('./render/codeblock/CodeBlockDefault.vue'),
+    },
+    edit: () => import('./edit/CodeBlockEdit.vue'),
+  },
+  AudioPlayer: {
+    editor: { icon: 'audio', color: '#b48ead', borderColor: '#b48ead', bgColor: 'rgba(180, 142, 173, 0.08)' },
+    render: {
+      default: () => import('./render/audioplayer/AudioPlayerDefault.vue'),
+    },
+    edit: () => import('./edit/AudioPlayerEdit.vue'),
+  },
+  Button: {
+    editor: { icon: 'button', color: '#2563eb', borderColor: '#2563eb', bgColor: 'rgba(37, 99, 235, 0.08)' },
+    render: {
+      default: () => import('./render/button/Button.vue'),
+    },
+    edit: () => import('./edit/ButtonEdit.vue'),
+  },
+  Card: {
+    editor: { icon: 'card', color: '#6b7280', borderColor: '#6b7280', bgColor: 'rgba(107, 114, 128, 0.08)' },
+    render: {
+      default: () => import('./render/card/Card.vue'),
+    },
+    edit: () => import('./edit/CardEdit.vue'),
+  },
+  Alert: {
+    editor: { icon: 'alert', color: '#d97706', borderColor: '#d97706', bgColor: 'rgba(217, 119, 6, 0.08)' },
+    render: {
+      default: () => import('./render/alert/Alert.vue'),
+    },
+    edit: () => import('./edit/AlertEdit.vue'),
+  },
+  Badge: {
+    editor: { icon: 'badge', color: '#059669', borderColor: '#059669', bgColor: 'rgba(5, 150, 105, 0.08)' },
+    render: {
+      default: () => import('./render/badge/Badge.vue'),
+    },
+    edit: () => import('./edit/BadgeEdit.vue'),
+  },
+  Icon: {
+    editor: { icon: 'icon', color: '#7c3aed', borderColor: '#7c3aed', bgColor: 'rgba(124, 58, 237, 0.08)' },
+    render: {
+      default: () => import('./render/icon/Icon.vue'),
+    },
+    edit: () => import('./edit/IconEdit.vue'),
+  },
+  Tooltip: {
+    editor: { icon: 'tooltip', color: '#0891b2', borderColor: '#0891b2', bgColor: 'rgba(8, 145, 178, 0.08)' },
+    render: {
+      default: () => import('./render/tooltip/Tooltip.vue'),
+    },
+    edit: () => import('./edit/TooltipEdit.vue'),
+  },
+}
+
+/** Merged registry: schema metadata + Vue wiring, keyed by component name. */
+export const componentRegistry: Record<string, ComponentRegistration> = Object.fromEntries(
+  componentMetadata.map(metadata => {
+    const wiring = vueWiring[metadata.name]
+    if (!wiring) {
+      throw new Error(
+        `[mdx-components] No Vue wiring registered for component "${metadata.name}". ` +
+        `Add an entry to vueWiring in registry.ts or remove the schema entry.`,
+      )
+    }
+    return [metadata.name, { metadata, ...wiring }] as const
+  }),
+)
+
+/** Get available render variant names for a component */
+export function getComponentVariants(name: string): string[] {
+  const reg = componentRegistry[name]
+  return reg ? Object.keys(reg.render) : []
+}
+
+/** Async resolver — loads only the requested render component (raw, no shim). */
+export async function getRenderComponentAsync(
+  name: string,
+  variant: string = 'default',
+): Promise<Component | undefined> {
+  const reg = componentRegistry[name]
+  if (!reg) return undefined
+  const loader = reg.render[variant] || reg.render.default
+  if (!loader) return undefined
+  const mod = await loader()
+  return mod.default
+}
+
+// ─── Wrapped (prepareProps-aware) component resolution ──────────────────
+//
+// `getWrappedRenderComponent` is what blog consumers SHOULD use to render
+// MDX-authored components. It returns a Vue component whose render runs
+// every incoming attribute through `prepareProps(attrs, metadata)` before
+// forwarding to the real render SFC. That makes the schema's render-time
+// shim impossible to forget at any call site: `h(Comp, { ...item.props })`
+// automatically gets normalized props, including in recursively-rendered
+// nested MDX children.
+//
+// The wrapper is built around `defineAsyncComponent` so the underlying
+// SFC stays lazily loaded — the wrapper itself is sync and cheap to
+// create. Results are cached per (name, variant) so the wrapper has a
+// stable identity across re-renders (important for Vue's keyed-vdom
+// optimizations).
+
+/**
+ * Wraps an already-resolved Vue component with a `prepareProps`-aware
+ * shim. Returned component is sync; works with both sync `Inner` and
+ * `defineAsyncComponent(...)` results. Exported (vs inlined into
+ * `getWrappedRenderComponent`) so unit tests can pass a spy component
+ * and assert prop normalization without touching the real registry.
+ */
+export function wrapVueComponentForMdx(
+  Inner: Component,
+  metadata: ComponentMetadata,
+  variant: string = 'default',
+): Component {
+  const wrapped = defineComponent({
+    name: `MdxPrepared${metadata.name}${variant === 'default' ? '' : `_${variant}`}`,
+    inheritAttrs: false,
+    setup(_props, { attrs, slots }) {
+      return () => h(
+        Inner,
+        prepareProps(attrs as Record<string, unknown>, metadata),
+        slots,
+      )
+    },
+  })
+  ;(wrapped as unknown as Record<string, unknown>)[MDX_PREPARED_SENTINEL] = metadata.name
+  return wrapped
+}
+
+const wrappedRenderCache: Map<string, Component> = new Map()
+
+/**
+ * Returns a Vue component that wraps the lazy-loaded render SFC for
+ * `name`/`variant` with a `prepareProps`-aware shim. Returns `undefined`
+ * if the component isn't registered.
+ *
+ * Wrapped components carry `MDX_PREPARED_SENTINEL` on themselves, set
+ * to the schema component name — used by the per-renderer integration
+ * test to confirm wrapping was applied (instead of the historical
+ * brittle regex-grep approach).
+ */
+export function getWrappedRenderComponent(
+  name: string,
+  variant: string = 'default',
+): Component | undefined {
+  const cacheKey = `${name}:${variant}`
+  const cached = wrappedRenderCache.get(cacheKey)
+  if (cached) return cached
+
+  const reg = componentRegistry[name]
+  if (!reg) return undefined
+  const loader = reg.render[variant] || reg.render.default
+  if (!loader) return undefined
+
+  const Inner = defineAsyncComponent(() => loader().then(m => m.default))
+  const wrapped = wrapVueComponentForMdx(Inner, reg.metadata, variant)
+  wrappedRenderCache.set(cacheKey, wrapped)
+  return wrapped
+}
+
+/** Test-only — clears the wrapped-component cache between specs. */
+export function _resetWrappedRenderCacheForTests(): void {
+  wrappedRenderCache.clear()
+}
+
+/** Async resolver for edit components */
+export async function getEditComponentAsync(
+  name: string,
+): Promise<Component | undefined> {
+  const reg = componentRegistry[name]
+  if (!reg) return undefined
+  const mod = await reg.edit()
+  return mod.default
+}
+
+/** Get editor config for a component (icon, colors) */
+export function getEditorConfig(name: string): EditorConfig | undefined {
+  return componentRegistry[name]?.editor
+}

package/src/render/alert/Alert.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Icon } from '@iconify/vue'
+import { alertStyles } from '@blogmcp/mdx-schema/styles'
+
+interface Props {
+  severity?: 'info' | 'success' | 'warning' | 'error'
+  title?: string
+}
+
+const props = withDefaults(defineProps<Props>(), { severity: 'info' })
+
+// severity → wrap classes + iconify icon + icon color shared with the React
+// renderer via @blogmcp/mdx-schema/styles.
+const cfg = computed(() => alertStyles.severity[props.severity])
+</script>
+
+<template>
+  <div
+    :class="[alertStyles.base, cfg.wrap]"
+    role="alert"
+    data-mdx-component="Alert"
+  >
+    <Icon :icon="cfg.icon" :class="['mt-0.5 shrink-0', cfg.iconClass]" :width="18" :height="18" />
+    <div class="min-w-0 flex-1">
+      <div v-if="title" class="mb-0.5 font-semibold">{{ title }}</div>
+      <div class="prose-sm">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/src/render/alert/index.ts

@@ -0,0 +1,2 @@
+export { default as Alert } from './Alert.vue'
+export { default } from './Alert.vue'

package/src/render/audioplayer/AudioPlayerDefault.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+/**
+ * AudioPlayer Default Render Component
+ *
+ * Light theme with HTML5 audio, title, and collapsible transcript.
+ */
+
+import { useAudioPlayer } from '../../composables/useAudioPlayer'
+import type { AudioPlayerProps } from '@blogmcp/mdx-schema'
+
+const props = defineProps<AudioPlayerProps>()
+
+const {
+  audioUrl,
+  displayTitle,
+  hasTitle,
+  showTranscription,
+  transcriptionText,
+  transcriptionSummary,
+  transcriptionLoading,
+  transcriptionExpanded,
+  toggleTranscription,
+} = useAudioPlayer(props)
+</script>
+
+<template>
+  <div class="audio-player my-6 rounded-lg bg-gray-50 p-5 border border-gray-200" data-mdx-component="AudioPlayer">
+    <!-- Title -->
+    <div class="flex items-center gap-3 mb-3">
+      <svg
+        class="w-5 h-5 text-gray-500 flex-shrink-0"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"
+        />
+      </svg>
+      <h3 v-if="hasTitle" class="text-base font-semibold text-gray-800 m-0">
+        {{ displayTitle }}
+      </h3>
+    </div>
+
+    <!-- Audio player -->
+    <audio
+      :src="audioUrl"
+      controls
+      preload="metadata"
+      class="w-full"
+    />
+
+    <!-- Collapsible transcription -->
+    <div v-if="showTranscription" class="mt-4">
+      <button
+        class="flex items-center gap-2 text-sm text-gray-600 hover:text-gray-900 transition-colors cursor-pointer bg-transparent border-0 p-0"
+        @click="toggleTranscription"
+      >
+        <svg
+          class="w-4 h-4 transition-transform"
+          :class="{ 'rotate-90': transcriptionExpanded }"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+        </svg>
+        Transcription
+      </button>
+      <div
+        v-if="transcriptionExpanded"
+        class="mt-2 p-3 bg-white rounded border border-gray-200 text-sm text-gray-700 leading-relaxed max-h-64 overflow-y-auto"
+      >
+        <p v-if="transcriptionLoading" class="text-gray-400 italic">Loading transcription...</p>
+        <p v-else-if="!transcriptionText" class="text-gray-400 italic">No transcription available.</p>
+        <template v-else>
+          <div v-if="transcriptionSummary" class="mb-3 pb-3 border-b border-gray-200">
+            <div class="text-xs uppercase tracking-wide text-gray-400 mb-1">Summary</div>
+            <div class="text-gray-800">{{ transcriptionSummary }}</div>
+          </div>
+          <div class="whitespace-pre-wrap">{{ transcriptionText }}</div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>

package/src/render/audioplayer/index.ts

@@ -0,0 +1,8 @@
+/**
+ * AudioPlayer Render Component Variants
+ */
+
+export { default as AudioPlayerDefault } from './AudioPlayerDefault.vue'
+
+// Default export for convenience
+export { default } from './AudioPlayerDefault.vue'

package/src/render/badge/Badge.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { badgeStyles } from '@blogmcp/mdx-schema/styles'
+
+interface Props {
+  label: string
+  color?: 'primary' | 'neutral' | 'success' | 'warning' | 'error'
+  variant?: 'solid' | 'soft' | 'outline'
+}
+
+const props = withDefaults(defineProps<Props>(), { color: 'neutral', variant: 'soft' })
+
+// Variant × color class table lives in @blogmcp/mdx-schema/styles (shared with
+// the React renderer). Explicit entries so Tailwind JIT sees every class.
+const classes = computed(() =>
+  [
+    badgeStyles.base,
+    badgeStyles.variantColor[props.variant][props.color],
+  ].join(' '),
+)
+</script>
+
+<template>
+  <span :class="classes" data-mdx-component="Badge">{{ label }}</span>
+</template>

package/src/render/badge/index.ts

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge.vue'
+export { default } from './Badge.vue'

package/src/render/button/Button.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { buttonStyles } from '@blogmcp/mdx-schema/styles'
+// URL sanitizer — returns 'about:blank' for javascript:/data:text/html/etc.
+// Component-level prop sanitization: DOMPurify only sees HTML output, never
+// JSX props consumed by render code. See:
+//   competitor-monitor/docs/internal/sanitization-trust-contract.md
+import { sanitizeUrl } from '@blogmcp/sanitize'
+
+interface Props {
+  label: string
+  to?: string
+  variant?: 'solid' | 'outline' | 'soft' | 'ghost' | 'link'
+  color?: 'primary' | 'neutral' | 'success' | 'warning' | 'error'
+  size?: 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'solid',
+  color: 'primary',
+  size: 'md',
+})
+
+const safeHref = computed(() => (props.to ? sanitizeUrl(props.to) : undefined))
+
+// Variant × color × size class tables live in @blogmcp/mdx-schema/styles so
+// the Vue and React renderers compose identical strings. Explicit (non-
+// interpolated) entries so Tailwind's JIT sees every class at build time.
+const classes = computed(() =>
+  [
+    buttonStyles.base,
+    buttonStyles.size[props.size],
+    buttonStyles.variantColor[props.variant][props.color],
+  ].join(' '),
+)
+</script>
+
+<template>
+  <a v-if="safeHref" :href="safeHref" :class="classes" data-mdx-component="Button">{{ label }}</a>
+  <button v-else type="button" :class="classes" data-mdx-component="Button">{{ label }}</button>
+</template>

package/src/render/button/index.ts

@@ -0,0 +1,2 @@
+export { default as Button } from './Button.vue'
+export { default } from './Button.vue'

package/src/render/callout/CalloutDefault.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+/**
+ * Callout Default Render Component
+ *
+ * Standard callout styling for blog display.
+ * Light theme optimized with accessible colors.
+ */
+
+import { computed } from 'vue'
+import type { CalloutProps, CalloutType } from '@blogmcp/mdx-schema'
+import { calloutStyles } from '@blogmcp/mdx-schema/styles'
+
+const props = defineProps<CalloutProps>()
+
+const effectiveType = computed<CalloutType>(() => props.type || 'info')
+
+// Per-type color table shared with the React renderer via
+// @blogmcp/mdx-schema/styles (calloutStyles.default).
+const colorClasses = computed(() => calloutStyles.default.type[effectiveType.value])
+</script>
+
+<template>
+  <div
+    :class="[calloutStyles.default.base, colorClasses.bg, colorClasses.border, colorClasses.text]"
+    data-mdx-component="Callout"
+  >
+    <div class="flex items-start gap-3">
+      <!-- Icon -->
+      <div class="flex-shrink-0 mt-0.5">
+        <!-- Info icon -->
+        <svg
+          v-if="effectiveType === 'info'"
+          class="w-5 h-5"
+          :class="colorClasses.iconColor"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        <!-- Warning icon -->
+        <svg
+          v-else-if="effectiveType === 'warning'"
+          class="w-5 h-5"
+          :class="colorClasses.iconColor"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          />
+        </svg>
+        <!-- Tip icon -->
+        <svg
+          v-else-if="effectiveType === 'tip'"
+          class="w-5 h-5"
+          :class="colorClasses.iconColor"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"
+          />
+        </svg>
+        <!-- Danger icon -->
+        <svg
+          v-else-if="effectiveType === 'danger'"
+          class="w-5 h-5"
+          :class="colorClasses.iconColor"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </div>
+      <!-- Content -->
+      <div class="flex-1 text-sm leading-relaxed">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

package/src/render/callout/CalloutMinimal.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+/**
+ * Callout Minimal Render Component
+ *
+ * Simple callout styling without icons.
+ * Clean, minimal design for content-focused blogs.
+ */
+
+import { computed } from 'vue'
+import type { CalloutProps, CalloutType } from '@blogmcp/mdx-schema'
+import { calloutStyles } from '@blogmcp/mdx-schema/styles'
+
+const props = defineProps<CalloutProps>()
+
+const effectiveType = computed<CalloutType>(() => props.type || 'info')
+
+// Per-type color table shared with the React renderer via
+// @blogmcp/mdx-schema/styles (calloutStyles.minimal).
+const colorClasses = computed(() => calloutStyles.minimal.type[effectiveType.value])
+</script>
+
+<template>
+  <div
+    :class="[calloutStyles.minimal.base, colorClasses.bg, colorClasses.border, colorClasses.text]"
+    data-mdx-component="Callout"
+  >
+    <div class="text-sm leading-relaxed">
+      <slot />
+    </div>
+  </div>
+</template>

package/src/render/callout/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Callout Render Component Variants
+ */
+
+export { default as CalloutDefault } from './CalloutDefault.vue'
+export { default as CalloutMinimal } from './CalloutMinimal.vue'
+
+// Default export for convenience
+export { default } from './CalloutDefault.vue'

package/src/render/card/Card.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+interface Props {
+  title?: string
+}
+defineProps<Props>()
+</script>
+
+<template>
+  <section class="mdx-card rounded-lg border border-gray-200 bg-white p-5 shadow-sm" data-mdx-component="Card">
+    <h3 v-if="title" class="mb-3 text-lg font-semibold text-gray-900">{{ title }}</h3>
+    <div class="text-gray-700">
+      <slot />
+    </div>
+  </section>
+</template>

package/src/render/card/index.ts

@@ -0,0 +1,2 @@
+export { default as Card } from './Card.vue'
+export { default } from './Card.vue'