@dyrected/nuxt 2.5.59 → 2.5.60

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "@dyrected/nuxt",
   "configKey": "dyrected",
-  "version": "2.5.58"
+  "version": "2.5.59"
 }

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addServerHandler, addPlugin, addComponent, addImports, addTemplate, addServerPlugin } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, installModule, addServerHandler, addPlugin, addComponent, addImports, addTemplate, addServerPlugin } from '@nuxt/kit';
 import { join } from 'path';
 import { existsSync } from 'fs';
 import { createRequire } from 'module';
@@ -20,8 +20,9 @@ const module = defineNuxtModule({
   defaults: {
     apiBase: "/dyrected"
   },
-  setup(options, nuxt) {
+  async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
+    await installModule("@nuxt/image");
     const _require = createRequire(import.meta.url);
     try {
       const adminCssPath = _require.resolve("@dyrected/admin/styles");
@@ -42,6 +43,10 @@ const module = defineNuxtModule({
       name: "DyrectedMedia",
       filePath: resolver.resolve("./runtime/components/DyrectedMedia.vue")
     });
+    addComponent({
+      name: "DyrectedImage",
+      filePath: resolver.resolve("./runtime/components/DyrectedImage.vue")
+    });
     addComponent({
       name: "DyrectedAdmin",
       filePath: resolver.resolve("./runtime/components/DyrectedAdmin.vue")
@@ -56,6 +61,11 @@ const module = defineNuxtModule({
       filePath: "@dyrected/vue",
       export: "DyrectedIcon"
     });
+    addComponent({
+      name: "DyrectedRichText",
+      filePath: "@dyrected/vue",
+      export: "DyrectedRichText"
+    });
     addImports([
       { name: "useDyrected", from: resolver.resolve("./runtime/composables/useDyrected") },
       { name: "useDyrectedClient", from: resolver.resolve("./runtime/composables/useDyrected") },

package/dist/runtime/components/DyrectedImage.vue

@@ -1,15 +1,29 @@
 <template>
-  <BaseDyrectedImage v-bind="$props" />
+  <NuxtImg
+    :src="src"
+    :width="width ?? resolvedWidth"
+    :height="height ?? resolvedHeight"
+    :alt="alt ?? resolvedAlt"
+    v-bind="$attrs"
+  />
 </template>
 
 <script setup lang="ts">
-import { DyrectedImage as BaseDyrectedImage } from "@dyrected/vue";
-import type { Media } from '@dyrected/sdk';
+import { computed } from "vue";
+import type { Media } from "@dyrected/sdk";
 
-defineProps<{
+// Nuxt renders images through @nuxt/image's <NuxtImg> for optimization, the way
+// the Next integration uses next/image. @dyrected/nuxt installs @nuxt/image, so
+// <NuxtImg> is always available.
+const props = defineProps<{
   media: Media | string;
   width?: number | string;
   height?: number | string;
   alt?: string;
 }>();
+
+const src = computed(() => (typeof props.media === "string" ? props.media : props.media.url));
+const resolvedWidth = computed(() => (typeof props.media === "string" ? 500 : props.media.width ?? 500));
+const resolvedHeight = computed(() => (typeof props.media === "string" ? 500 : props.media.height ?? 500));
+const resolvedAlt = computed(() => (typeof props.media === "string" ? "" : props.media.filename));
 </script>

package/dist/runtime/components/DyrectedMedia.vue

@@ -1,19 +1,73 @@
 <template>
-  <BaseDyrectedMedia v-bind="$props">
-    <template #fallback>
-      <slot name="fallback" />
-    </template>
-  </BaseDyrectedMedia>
+  <div
+    v-if="youtubeId"
+    class="dyrected-media-video"
+    style="position: relative; padding-bottom: 56.25%; height: 0;"
+  >
+    <iframe
+      :src="`https://www.youtube.com/embed/${youtubeId}`"
+      frameborder="0"
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowfullscreen
+      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
+    />
+  </div>
+
+  <NuxtImg
+    v-else-if="isImage"
+    :src="url"
+    :width="width ?? 500"
+    :height="height ?? 500"
+    :alt="alt ?? filename"
+    v-bind="$attrs"
+  />
+
+  <video
+    v-else-if="isVideo"
+    :src="url"
+    controls
+    :width="width ?? 500"
+    :height="height ?? 500"
+    class="dyrected-media-video"
+    v-bind="$attrs"
+  />
+
+  <div v-else class="dyrected-media-file">
+    <slot name="fallback">
+      <a :href="url" target="_blank" rel="noopener noreferrer" class="dyrected-file-link">
+        Download {{ filename || "File" }}
+      </a>
+    </slot>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { DyrectedMedia as BaseDyrectedMedia } from "@dyrected/vue";
-import type { Media } from '@dyrected/sdk';
+import { computed } from "vue";
+import type { Media } from "@dyrected/sdk";
 
-defineProps<{
+// Nuxt renders the image case through @nuxt/image's <NuxtImg> for optimization,
+// mirroring how the Next integration's DyrectedMedia uses next/image.
+const props = defineProps<{
   media: Media | string;
   width?: number | string;
   height?: number | string;
   alt?: string;
 }>();
+
+const url = computed(() => (typeof props.media === "string" ? props.media : props.media.url));
+const filename = computed(() => (typeof props.media === "string" ? "" : props.media.filename));
+const mimeType = computed(() => (typeof props.media === "string" ? null : props.media.mimeType));
+
+const youtubeId = computed(() => {
+  const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+  const match = url.value.match(regExp);
+  return match && match[2].length === 11 ? match[2] : null;
+});
+
+const isImage = computed(
+  () => mimeType.value?.startsWith("image/") || url.value.match(/\.(jpg|jpeg|png|gif|webp|avif|svg)$/i),
+);
+const isVideo = computed(
+  () => mimeType.value?.startsWith("video/") || url.value.match(/\.(mp4|webm|ogg)$/i),
+);
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dyrected/nuxt",
-  "version": "2.5.59",
+  "version": "2.5.60",
   "type": "module",
   "main": "./dist/module.mjs",
   "types": "./dist/module.d.ts",
@@ -15,14 +15,15 @@
     }
   },
   "dependencies": {
+    "@nuxt/image": "^1.8.0",
     "@nuxt/kit": "^3.11.2",
     "h3": "^1.15.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@dyrected/core": "2.5.59",
-    "@dyrected/sdk": "2.5.59",
-    "@dyrected/admin": "2.5.59",
-    "@dyrected/vue": "2.5.59"
+    "@dyrected/vue": "2.5.60",
+    "@dyrected/admin": "2.5.60",
+    "@dyrected/sdk": "2.5.60",
+    "@dyrected/core": "2.5.60"
   },
   "peerDependencies": {
     "nuxt": "^3.0.0",