@blogmcp/mdx-render-vue 0.1.0

package/src/render/codeblock/CodeBlockDefault.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+/**
+ * CodeBlock Default Render Component
+ *
+ * Standard code block styling for blog display.
+ * Light theme with syntax highlighting support.
+ */
+
+import { ref } from 'vue'
+import { useCodeBlock } from '../../composables/useCodeBlock'
+import type { CodeBlockProps } from '@blogmcp/mdx-schema'
+
+const props = defineProps<CodeBlockProps>()
+
+defineSlots<{
+  default(): unknown
+}>()
+
+const { copied, languageLabel, languageClass, copyCode } = useCodeBlock(props)
+
+const codeRef = ref<HTMLElement | null>(null)
+
+async function handleCopy() {
+  if (codeRef.value) {
+    await copyCode(codeRef.value.textContent || '')
+  }
+}
+</script>
+
+<template>
+  <div class="code-block my-6 rounded-lg overflow-hidden border border-gray-200 bg-gray-50" data-mdx-component="CodeBlock">
+    <!-- Header -->
+    <div class="flex items-center justify-between px-4 py-2 bg-gray-100 border-b border-gray-200">
+      <div class="flex items-center gap-2">
+        <span class="text-xs text-gray-600 font-medium">
+          {{ languageLabel }}
+        </span>
+        <span v-if="title" class="text-xs text-gray-500">
+          {{ title }}
+        </span>
+      </div>
+      <button
+        class="flex items-center gap-1 px-2 py-1 text-xs rounded transition-colors"
+        :class="copied ? 'bg-green-500 text-white' : 'hover:bg-gray-200 text-gray-500 hover:text-gray-700'"
+        @click="handleCopy"
+      >
+        <svg v-if="!copied" class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+        </svg>
+        <svg v-else class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+        </svg>
+        {{ copied ? 'Copied!' : 'Copy' }}
+      </button>
+    </div>
+
+    <!-- Code Content -->
+    <div class="code-block-content p-4 overflow-x-auto">
+      <pre class="m-0"><code ref="codeRef" :class="languageClass"><slot /></code></pre>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.code-block-content pre {
+  margin: 0;
+  background: transparent;
+}
+
+.code-block-content code {
+  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  color: #374151;
+}
+</style>

package/src/render/codeblock/index.ts

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

package/src/render/gallery/GalleryGrid.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+/**
+ * Gallery Grid Render Component
+ *
+ * Standard grid gallery for blog display.
+ * Clean Medium-style layout with natural aspect ratios.
+ * Click on images to open fullscreen lightbox.
+ */
+
+import { ref, computed, watch, onUnmounted } from 'vue'
+import { useGallery } from '../../composables/useGallery'
+import { useOptimizedImg } from '../../composables/useMedia'
+import GalleryLightbox from './GalleryLightbox.vue'
+import type { GalleryProps } from '@blogmcp/mdx-schema'
+
+const props = defineProps<GalleryProps>()
+
+const { gridColsClass, gapClass, tileLayout, getImageSrc, getImageAlt, getImageDescription, getImageCaption, isVideo, hasImages } = useGallery(props)
+const ImgTag = useOptimizedImg()
+
+// Lightbox state
+const lightboxOpen = ref(false)
+const lightboxIndex = ref(0)
+
+// Map between full images array indices and image-only indices
+const imageOnlyIndices = computed(() => {
+  const indices: number[] = []
+  for (let i = 0; i < props.images.length; i++) {
+    if (!isVideo(i)) indices.push(i)
+  }
+  return indices
+})
+
+const imageOnlyCount = computed(() => imageOnlyIndices.value.length)
+
+function openLightbox(fullIndex: number) {
+  if (isVideo(fullIndex)) return
+  const lightboxIdx = imageOnlyIndices.value.indexOf(fullIndex)
+  if (lightboxIdx === -1) return
+  lightboxIndex.value = lightboxIdx
+  lightboxOpen.value = true
+}
+
+function closeLightbox() {
+  lightboxOpen.value = false
+}
+
+function navigateLightbox(newIndex: number) {
+  lightboxIndex.value = newIndex
+}
+
+// Map lightbox index back to full array index for getters
+function lightboxGetSrc(idx: number): string {
+  return getImageSrc(imageOnlyIndices.value[idx])
+}
+
+function lightboxGetAlt(idx: number): string {
+  return getImageAlt(imageOnlyIndices.value[idx])
+}
+
+function lightboxGetDescription(idx: number): string | undefined {
+  return getImageDescription(imageOnlyIndices.value[idx])
+}
+
+// Scroll lock
+watch(lightboxOpen, (open) => {
+  if (open) {
+    document.body.style.overflow = 'hidden'
+  } else {
+    document.body.style.overflow = ''
+  }
+})
+
+onUnmounted(() => {
+  document.body.style.overflow = ''
+})
+</script>
+
+<template>
+  <!-- not-prose: the blog renders articles inside Tailwind `prose`, which puts a
+       ~2em margin on every img/video. Inside these fixed-aspect tiles that margin
+       pushed the media down (dark strip on top) and clipped the bottom (video
+       controls). The gallery owns its own spacing, so opt out of prose here. -->
+  <div
+    v-if="hasImages"
+    class="gallery not-prose my-6"
+    :class="[gridColsClass, gapClass]"
+    style="display: grid"
+    data-mdx-component="Gallery"
+  >
+    <div
+      v-for="(_, index) in images"
+      :key="index"
+      class="gallery-item"
+    >
+      <!-- Tile geometry comes from `tileLayout` (aspectRatio/fit/position props),
+           defaulting to a square object-cover tile — matches the md-editor preview
+           so the blog is WYSIWYG. Full uncropped image opens in the lightbox.
+           Styles are inline (not Tailwind classes) so a consumer's JIT purge can't
+           drop arbitrary aspect-/object- utilities, mirroring `display:grid` above. -->
+      <div
+        class="gallery-media group relative overflow-hidden rounded"
+        :style="tileLayout.tileStyle"
+        :class="isVideo(index) ? 'bg-gray-900' : 'bg-gray-100 cursor-pointer'"
+        @click="openLightbox(index)"
+      >
+        <!-- Tile background is media-type-specific: VIDEO tiles use a dark cell
+             (bg-gray-900) so a posterless video — the poster route 404s → a 1×1
+             GIF — never reads as blank white before the first frame paints (we
+             seek to #t=0.1 below for a real thumbnail). IMAGE tiles use a light
+             neutral (bg-gray-100): for `fit="contain"` the letterbox bars and the
+             pre-load state blend with the light blog/prose theme instead of the
+             old baked-in dark backdrop (a dark-mode leftover). -->
+        <video
+          v-if="isVideo(index)"
+          :src="`${getImageSrc(index)}#t=0.1`"
+          controls
+          preload="metadata"
+          playsinline
+          :class="tileLayout.mediaSizeClass"
+          :style="tileLayout.mediaStyle"
+        />
+        <template v-else>
+          <component
+            :is="ImgTag"
+            :src="getImageSrc(index)"
+            :alt="getImageAlt(index)"
+            sizes="100vw sm:50vw md:33vw lg:299px"
+            :class="[tileLayout.mediaSizeClass, 'transition-transform duration-200 group-hover:scale-[1.03]']"
+            :style="tileLayout.mediaStyle"
+            loading="lazy"
+          />
+          <div class="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-200 pointer-events-none" />
+          <svg
+            class="gallery-expand-icon absolute top-2 right-2 text-white opacity-50 [@media(hover:hover)]:opacity-0 [@media(hover:hover)]:group-hover:opacity-80 transition-opacity duration-200 drop-shadow-md pointer-events-none"
+            xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
+            fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          >
+            <polyline points="15 3 21 3 21 9" />
+            <polyline points="9 21 3 21 3 15" />
+            <line x1="21" y1="3" x2="14" y2="10" />
+            <line x1="3" y1="21" x2="10" y2="14" />
+          </svg>
+        </template>
+      </div>
+      <p v-if="getImageCaption(index)" class="gallery-description text-center text-sm text-gray-500 mt-2">
+        {{ getImageCaption(index) }}
+      </p>
+    </div>
+  </div>
+
+  <GalleryLightbox
+    :is-open="lightboxOpen"
+    :current-index="lightboxIndex"
+    :image-count="imageOnlyCount"
+    :get-image-src="lightboxGetSrc"
+    :get-image-alt="lightboxGetAlt"
+    :get-image-description="lightboxGetDescription"
+    @close="closeLightbox"
+    @navigate="navigateLightbox"
+  />
+</template>

package/src/render/gallery/GalleryLightbox.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+/**
+ * Gallery Lightbox Component
+ *
+ * Fullscreen image viewer with keyboard and touch navigation.
+ * Teleported to body with dark backdrop overlay.
+ */
+
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+
+const props = defineProps<{
+  isOpen: boolean
+  currentIndex: number
+  imageCount: number
+  getImageSrc: (index: number) => string
+  getImageAlt: (index: number) => string
+  getImageDescription: (index: number) => string | undefined
+}>()
+
+const emit = defineEmits<{
+  close: []
+  navigate: [index: number]
+}>()
+
+const hasPrev = computed(() => props.currentIndex > 0)
+const hasNext = computed(() => props.currentIndex < props.imageCount - 1)
+const showNav = computed(() => props.imageCount > 1)
+
+// Keyboard navigation
+function onKeydown(e: KeyboardEvent) {
+  if (!props.isOpen) return
+  if (e.key === 'Escape') {
+    emit('close')
+  } else if (e.key === 'ArrowLeft' && hasPrev.value) {
+    emit('navigate', props.currentIndex - 1)
+  } else if (e.key === 'ArrowRight' && hasNext.value) {
+    emit('navigate', props.currentIndex + 1)
+  }
+}
+
+onMounted(() => {
+  document.addEventListener('keydown', onKeydown)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', onKeydown)
+})
+
+// Touch swipe
+const touchStartX = ref(0)
+const touchStartY = ref(0)
+
+function onTouchStart(e: TouchEvent) {
+  touchStartX.value = e.touches[0].clientX
+  touchStartY.value = e.touches[0].clientY
+}
+
+function onTouchEnd(e: TouchEvent) {
+  const dx = e.changedTouches[0].clientX - touchStartX.value
+  const dy = e.changedTouches[0].clientY - touchStartY.value
+  // Only trigger if horizontal swipe is dominant and exceeds threshold
+  if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) {
+    if (dx < 0 && hasNext.value) {
+      emit('navigate', props.currentIndex + 1)
+    } else if (dx > 0 && hasPrev.value) {
+      emit('navigate', props.currentIndex - 1)
+    }
+  }
+}
+
+function onBackdropClick(e: MouseEvent) {
+  // Only close if clicking the backdrop itself, not children
+  if (e.target === e.currentTarget) {
+    emit('close')
+  }
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="lightbox-fade">
+      <div
+        v-if="isOpen"
+        class="lightbox-overlay fixed inset-0 z-50 flex items-center justify-center bg-black/90"
+        @click="onBackdropClick"
+        @touchstart="onTouchStart"
+        @touchend="onTouchEnd"
+      >
+        <!-- Close button -->
+        <button
+          class="lightbox-close absolute top-4 right-4 z-10 text-white/80 hover:text-white p-2"
+          aria-label="Close lightbox"
+          @click="emit('close')"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+
+        <!-- Image counter -->
+        <div
+          v-if="showNav"
+          class="lightbox-counter absolute top-4 left-4 text-white/80 text-sm select-none"
+        >
+          {{ currentIndex + 1 }} / {{ imageCount }}
+        </div>
+
+        <!-- Previous button -->
+        <button
+          v-if="showNav && hasPrev"
+          class="lightbox-prev absolute left-4 top-1/2 -translate-y-1/2 z-10 text-white/80 hover:text-white p-2"
+          aria-label="Previous image"
+          @click="emit('navigate', currentIndex - 1)"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="15 18 9 12 15 6" />
+          </svg>
+        </button>
+
+        <!-- Next button -->
+        <button
+          v-if="showNav && hasNext"
+          class="lightbox-next absolute right-4 top-1/2 -translate-y-1/2 z-10 text-white/80 hover:text-white p-2"
+          aria-label="Next image"
+          @click="emit('navigate', currentIndex + 1)"
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </button>
+
+        <!-- Image + caption -->
+        <div class="flex flex-col items-center max-h-[95vh] max-w-[90vw]" @click.stop>
+          <img
+            :src="getImageSrc(currentIndex)"
+            :alt="getImageAlt(currentIndex)"
+            class="lightbox-image max-h-[85vh] max-w-[90vw] object-contain"
+          />
+          <p
+            v-if="getImageDescription(currentIndex)"
+            class="lightbox-caption text-white/80 text-sm mt-3 text-center max-w-[80vw]"
+          >
+            {{ getImageDescription(currentIndex) }}
+          </p>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.lightbox-fade-enter-active,
+.lightbox-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.lightbox-fade-enter-from,
+.lightbox-fade-leave-to {
+  opacity: 0;
+}
+</style>

package/src/render/gallery/index.ts

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

package/src/render/icon/Icon.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { Icon as IconifyIcon } from '@iconify/vue'
+
+interface Props {
+  name: string
+  size?: number
+  color?: string
+}
+
+withDefaults(defineProps<Props>(), { size: 20 })
+</script>
+
+<template>
+  <IconifyIcon
+    :icon="name"
+    :width="size"
+    :height="size"
+    :style="color ? { color } : undefined"
+    class="inline-block align-[-0.125em]"
+    data-mdx-component="Icon"
+  />
+</template>

package/src/render/icon/index.ts

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

package/src/render/index.ts

@@ -0,0 +1,76 @@
+/**
+ * MDX Render Components
+ *
+ * These components are used for rendering MDX content in blogs/frontends.
+ * Multiple variants available for each component type.
+ *
+ * Prefer using the async resolver (getRenderComponentAsync) for dynamic loading.
+ * Named exports below are kept for backward compatibility but load all components eagerly.
+ */
+
+// Import all variants (for sync registry and re-exports)
+import { CalloutDefault, CalloutMinimal } from './callout'
+import { CodeBlockDefault } from './codeblock'
+import { GalleryGrid, GalleryLightbox } from './gallery'
+import { YouTubeDefault } from './youtube'
+import { AudioPlayerDefault } from './audioplayer'
+import { Button as ButtonDefault } from './button'
+import { Card as CardDefault } from './card'
+import { Alert as AlertDefault } from './alert'
+import { Badge as BadgeDefault } from './badge'
+import { Icon as IconDefault } from './icon'
+import { Tooltip as TooltipDefault } from './tooltip'
+
+// Re-export named variants (backward compat)
+export { CalloutDefault, CalloutMinimal }
+export { CodeBlockDefault }
+export { GalleryGrid, GalleryLightbox }
+export { YouTubeDefault }
+export { AudioPlayerDefault }
+export { ButtonDefault, CardDefault, AlertDefault, BadgeDefault, IconDefault, TooltipDefault }
+
+// Default exports for convenience
+export { default as Callout } from './callout'
+export { default as CodeBlock } from './codeblock'
+export { default as Gallery } from './gallery'
+export { default as YouTube } from './youtube'
+export { default as AudioPlayer } from './audioplayer'
+export { default as Button } from './button'
+export { default as Card } from './card'
+export { default as Alert } from './alert'
+export { default as Badge } from './badge'
+export { default as Icon } from './icon'
+export { default as Tooltip } from './tooltip'
+
+// Async resolver and helpers from central registry (preferred for new code)
+export {
+  getRenderComponentAsync,
+  getComponentVariants,
+  getEditorConfig,
+  componentRegistry,
+} from '../registry'
+
+// Sync resolver (backward compat — loads all components eagerly)
+const syncRegistry: Record<string, Record<string, unknown>> = {
+  Callout: { default: CalloutDefault, minimal: CalloutMinimal },
+  CodeBlock: { default: CodeBlockDefault },
+  Gallery: { default: GalleryGrid, grid: GalleryGrid },
+  YouTube: { default: YouTubeDefault },
+  AudioPlayer: { default: AudioPlayerDefault },
+  Button: { default: ButtonDefault },
+  Card: { default: CardDefault },
+  Alert: { default: AlertDefault },
+  Badge: { default: BadgeDefault },
+  Icon: { default: IconDefault },
+  Tooltip: { default: TooltipDefault },
+}
+
+/** @deprecated Use getRenderComponentAsync from registry instead */
+export function getRenderComponent(
+  componentName: string,
+  variant: string = 'default',
+): unknown {
+  const componentVariants = syncRegistry[componentName]
+  if (!componentVariants) return undefined
+  return componentVariants[variant] || componentVariants.default
+}

package/src/render/tooltip/Tooltip.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Tooltip as ArkTooltip } from '@ark-ui/vue'
+
+interface Props {
+  label: string
+  placement?: 'top' | 'bottom' | 'left' | 'right'
+}
+
+const props = withDefaults(defineProps<Props>(), { placement: 'top' })
+
+const positioning = computed(() => ({ placement: props.placement }))
+</script>
+
+<template>
+  <ArkTooltip.Root :positioning="positioning" :open-delay="200" :close-delay="100">
+    <ArkTooltip.Trigger as-child>
+      <span class="inline-flex" data-mdx-component="Tooltip">
+        <slot />
+      </span>
+    </ArkTooltip.Trigger>
+    <Teleport to="body">
+      <ArkTooltip.Positioner>
+        <ArkTooltip.Content
+          class="z-50 rounded-md bg-gray-900 px-2.5 py-1.5 text-xs text-white shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out"
+        >
+          <ArkTooltip.Arrow>
+            <ArkTooltip.ArrowTip class="border-gray-900" />
+          </ArkTooltip.Arrow>
+          {{ label }}
+        </ArkTooltip.Content>
+      </ArkTooltip.Positioner>
+    </Teleport>
+  </ArkTooltip.Root>
+</template>

package/src/render/tooltip/index.ts

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

package/src/render/youtube/YouTubeDefault.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+/**
+ * YouTube Default Render Component
+ *
+ * Facade pattern: shows optimized thumbnail + play button,
+ * loads iframe only on click. Saves ~500KB per embed.
+ */
+
+import { ref } from 'vue'
+import { useYouTube } from '../../composables/useYouTube'
+import { useOptimizedImg } from '../../composables/useMedia'
+import type { YouTubeProps } from '@blogmcp/mdx-schema'
+
+const props = defineProps<YouTubeProps>()
+
+const { embedUrl, iframeTitle, thumbnailUrl, hasTitle, YOUTUBE_IFRAME_ALLOW } = useYouTube(props)
+const ImgTag = useOptimizedImg()
+
+const activated = ref(false)
+
+function activate() {
+  activated.value = true
+}
+</script>
+
+<template>
+  <div class="youtube-embed my-6" data-mdx-component="YouTube">
+    <div class="relative w-full rounded-lg overflow-hidden shadow-md" style="padding-bottom: 56.25%">
+      <!-- Facade: thumbnail + play button (before click) -->
+      <button
+        v-if="!activated"
+        class="absolute inset-0 w-full h-full cursor-pointer border-0 p-0 bg-black group"
+        :aria-label="`Play ${iframeTitle}`"
+        @click="activate"
+      >
+        <component
+          :is="ImgTag"
+          :src="thumbnailUrl"
+          :alt="iframeTitle"
+          sizes="100vw md:768px lg:1024px"
+          class="absolute inset-0 w-full h-full object-cover"
+        />
+        <!-- Play button overlay -->
+        <svg
+          class="absolute inset-0 m-auto w-16 h-16 text-white drop-shadow-lg opacity-90 group-hover:opacity-100 transition-opacity"
+          viewBox="0 0 68 48"
+          aria-hidden="true"
+        >
+          <path
+            d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z"
+            fill="red"
+          />
+          <path d="M45 24L27 14v20" fill="white" />
+        </svg>
+      </button>
+
+      <!-- Iframe: loaded only after click -->
+      <iframe
+        v-if="activated"
+        :src="`${embedUrl}?autoplay=1`"
+        :title="iframeTitle"
+        class="absolute inset-0 w-full h-full"
+        frameborder="0"
+        :allow="YOUTUBE_IFRAME_ALLOW"
+        allowfullscreen
+      />
+    </div>
+    <p v-if="hasTitle" class="text-center text-sm text-gray-600 mt-3">
+      {{ title }}
+    </p>
+  </div>
+</template>

package/src/render/youtube/index.ts

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