@dyrected/nuxt 2.3.3 → 2.3.4

package/dist/module.json

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

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addServerHandler, addComponent, addImports, addServerPlugin } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addServerHandler, addPlugin, addComponent, addImports, addServerPlugin } from '@nuxt/kit';
 import { join } from 'path';
 import { existsSync } from 'fs';
 
@@ -18,6 +18,7 @@ const module = defineNuxtModule({
         handler: resolver.resolve("./runtime/server/handler")
       });
     }
+    addPlugin(resolver.resolve("./runtime/plugin"));
     addComponent({
       name: "DyrectedMedia",
       filePath: resolver.resolve("./runtime/components/DyrectedMedia.vue")
@@ -28,6 +29,10 @@ const module = defineNuxtModule({
     });
     addImports([
       { name: "useDyrected", from: resolver.resolve("./runtime/composables/useDyrected") },
+      { name: "useDyrectedClient", from: resolver.resolve("./runtime/composables/useDyrected") },
+      { name: "useDyrectedData", from: resolver.resolve("./runtime/composables/useDyrected") },
+      { name: "useDyrectedCollectionData", from: resolver.resolve("./runtime/composables/useDyrected") },
+      { name: "useDyrectedGlobalData", from: resolver.resolve("./runtime/composables/useDyrected") },
       { name: "useDyrectedDoc", from: resolver.resolve("./runtime/composables/useDyrected") },
       { name: "useDyrectedCollection", from: resolver.resolve("./runtime/composables/useDyrected") },
       { name: "useDyrectedGlobal", from: resolver.resolve("./runtime/composables/useDyrected") },
@@ -82,6 +87,9 @@ const module = defineNuxtModule({
       if (!nuxt.options.vite.optimizeDeps.exclude.includes("@dyrected/admin")) {
         nuxt.options.vite.optimizeDeps.exclude.push("@dyrected/admin");
       }
+      if (!nuxt.options.vite.optimizeDeps.exclude.includes("@dyrected/vue")) {
+        nuxt.options.vite.optimizeDeps.exclude.push("@dyrected/vue");
+      }
     }
     nuxt.hook("vite:extendConfig", (config) => {
       const plugins = config.plugins ?? [];

package/dist/runtime/components/DyrectedAdmin.vue

@@ -1,14 +1,16 @@
 <template>
-  <div ref="container" class="dyrected-admin-wrapper"></div>
+  <DyrectedAdmin 
+    :config="config" 
+    :basename="basename || '/cms-admin'" 
+  />
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, nextTick } from "vue";
-import "@dyrected/admin/styles";
 // @ts-ignore
 import { useRuntimeConfig } from "#imports";
+import { DyrectedAdmin } from "@dyrected/vue";
 
-const props = defineProps<{
+defineProps<{
   /**
    * The base path where the admin is mounted.
    * @default "/cms-admin"
@@ -16,41 +18,10 @@ const props = defineProps<{
   basename?: string;
 }>();
 
-const config = useRuntimeConfig();
-const container = ref<HTMLElement | null>(null);
-let unmount: (() => void) | null = null;
-
-onMounted(async () => {
-  await nextTick();
-
-  if (container.value) {
-    try {
-      // 1. Dynamically import to ensure isolation from Vue's early bundle phase
-      const { renderAdminUI } = await import("@dyrected/admin");
-
-      // 2. Deep clone config to strip ALL Vue proxies/reactivity
-      const dyrectedRaw = JSON.parse(JSON.stringify(config.public.dyrected));
-
-      unmount = renderAdminUI(container.value, {
-        apiKey: String(dyrectedRaw.apiKey || ""),
-        siteId: String(dyrectedRaw.siteId || ""),
-        baseUrl: String(dyrectedRaw.baseUrl || ""),
-        basename: props.basename || "/cms-admin",
-        isEmbedded: false,
-      });
-    } catch (err) {
-      console.error("[DyrectedAdmin] Failed to mount admin UI:", err);
-    }
-  }
-});
-
-onUnmounted(() => {
-  if (unmount) {
-    unmount();
-  }
-});
+const runtimeConfig = useRuntimeConfig();
+const config = {
+  apiKey: String(runtimeConfig.public.dyrected.apiKey || ""),
+  siteId: String(runtimeConfig.public.dyrected.siteId || ""),
+  baseUrl: String(runtimeConfig.public.dyrected.baseUrl || ""),
+};
 </script>
-
-<style scoped>
-.dyrected-admin-wrapper{height:100vh;width:100vw}
-</style>

package/dist/runtime/components/DyrectedImage.vue

@@ -1,23 +1,9 @@
 <template>
-  <img
-    v-if="typeof media === 'string'"
-    :src="media"
-    :width="width || 500"
-    :height="height || 500"
-    :alt="alt || ''"
-    v-bind="$attrs"
-  />
-  <img
-    v-else
-    :src="media.url"
-    :width="width || media.width || 500"
-    :height="height || media.height || 500"
-    :alt="alt || media.filename"
-    v-bind="$attrs"
-  />
+  <BaseDyrectedImage v-bind="$props" />
 </template>
 
 <script setup lang="ts">
+import { DyrectedImage as BaseDyrectedImage } from "@dyrected/vue";
 import type { Media } from '@dyrected/sdk';
 
 defineProps<{

package/dist/runtime/components/DyrectedMedia.vue

@@ -1,68 +1,19 @@
 <template>
-  <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>
-
-  <img
-    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>
+  <BaseDyrectedMedia v-bind="$props">
+    <template #fallback>
+      <slot name="fallback" />
+    </template>
+  </BaseDyrectedMedia>
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
+import { DyrectedMedia as BaseDyrectedMedia } from "@dyrected/vue";
 import type { Media } from '@dyrected/sdk';
 
-const props = defineProps<{
+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(() => {
-  return mimeType.value?.startsWith('image/') || url.value.match(/\.(jpg|jpeg|png|gif|webp|avif|svg)$/i);
-});
-
-const isVideo = computed(() => {
-  return mimeType.value?.startsWith('video/') || url.value.match(/\.(mp4|webm|ogg)$/i);
-});
 </script>

package/dist/runtime/composables/useDyrected.d.ts

@@ -1,5 +1,10 @@
 import { type DyrectedClient, type BaseSchema } from '@dyrected/sdk';
+import { useDyrected as useGenericDyrected, useDyrectedCollection as useGenericCollection, useDyrectedGlobal as useGenericGlobal } from '@dyrected/vue';
+export declare const useDyrectedClient: <TSchema extends BaseSchema = any>() => DyrectedClient<TSchema>;
 export declare const useDyrected: <TSchema extends BaseSchema = any>() => DyrectedClient<TSchema>;
+export declare const useDyrectedData: typeof useGenericDyrected;
+export declare const useDyrectedCollectionData: typeof useGenericCollection;
+export declare const useDyrectedGlobalData: typeof useGenericGlobal;
 export declare const useDyrectedDoc: <T = any, TSchema extends BaseSchema = any>(collection: keyof TSchema["collections"] | string, id: string, options?: {
     depth?: number;
     initialData?: T;

package/dist/runtime/composables/useDyrected.mjs

@@ -1,5 +1,10 @@
 import { useRuntimeConfig, useAsyncData, useRequestFetch } from "#app";
 import { createClient } from "@dyrected/sdk";
+import {
+  useDyrected as useGenericDyrected,
+  useDyrectedCollection as useGenericCollection,
+  useDyrectedGlobal as useGenericGlobal
+} from "@dyrected/vue";
 function getClient() {
   const config = useRuntimeConfig().public.dyrected;
   const fetcher = useRequestFetch();
@@ -10,9 +15,13 @@ function getClient() {
     fetch: fetcher
   });
 }
-export const useDyrected = () => {
+export const useDyrectedClient = () => {
   return getClient();
 };
+export const useDyrected = useDyrectedClient;
+export const useDyrectedData = useGenericDyrected;
+export const useDyrectedCollectionData = useGenericCollection;
+export const useDyrectedGlobalData = useGenericGlobal;
 export const useDyrectedDoc = (collection, id, options) => {
   const client = getClient();
   return useAsyncData(

package/dist/runtime/composables/useDyrectedAuth.d.ts

@@ -1,23 +1,12 @@
-export interface DyrectedAuthUser {
-    id: string;
-    email: string;
-    [key: string]: any;
-}
 /**
- * useDyrectedAuth — composable for auth collections.
- *
- * Usage:
- *   const { login, logout, user, isLoggedIn } = useDyrectedAuth('customers')
- *
- * The JWT is persisted in a cookie (`dyrected_token_<collection>`) so it
- * survives page reloads and is available server-side on the next request.
+ * useDyrectedAuth — Nuxt-specific wrapper around @dyrected/vue auth logic.
  */
 export declare function useDyrectedAuth(collection: string): {
-    /** Reactive: the authenticated user, or null. */
-    user: any;
-    /** Reactive: true when a valid JWT cookie exists. */
-    isLoggedIn: any;
-    login: (email: string, password: string) => Promise<DyrectedAuthUser>;
+    user: import("vue").Ref<import("@dyrected/vue").DyrectedAuthUser | null, import("@dyrected/vue").DyrectedAuthUser | null>;
+    isLoggedIn: import("vue").ComputedRef<boolean>;
+    token: import("vue").Ref<string | null, string | null>;
+    login: (email: string, password: string) => Promise<import("@dyrected/vue").DyrectedAuthUser>;
     logout: () => Promise<void>;
-    fetchMe: () => Promise<DyrectedAuthUser | null>;
+    fetchMe: () => Promise<import("@dyrected/vue").DyrectedAuthUser | null>;
+    client: import("@dyrected/sdk").DyrectedClient<any>;
 };

package/dist/runtime/composables/useDyrectedAuth.mjs

@@ -1,65 +1,26 @@
-import { useRuntimeConfig, useState, useCookie, computed } from "#app";
-import { createClient } from "@dyrected/sdk";
+import { useRuntimeConfig, useCookie } from "#app";
+import { useDyrectedAuth as useGenericAuth } from "@dyrected/vue";
 export function useDyrectedAuth(collection) {
   const config = useRuntimeConfig().public.dyrected;
-  const cookieName = `dyrected_token_${collection}`;
-  const tokenCookie = useCookie(cookieName, {
+  const tokenCookie = useCookie(`dyrected_token_${collection}`, {
     default: () => null,
     maxAge: 60 * 60 * 24 * 7,
     // 7 days
     sameSite: "lax"
   });
-  const user = useState(`dyrected:auth:user:${collection}`, () => null);
-  const isLoggedIn = computed(() => !!tokenCookie.value);
-  function buildClient() {
-    const client = createClient({
-      baseUrl: config.baseUrl,
-      apiKey: config.apiKey,
-      siteId: config.siteId
-    });
-    if (tokenCookie.value) {
-      client.setToken(tokenCookie.value);
-    }
-    return client;
-  }
-  async function login(email, password) {
-    const client = buildClient();
-    const { token, user: userData } = await client.collection(collection).login(email, password);
-    tokenCookie.value = token;
-    user.value = userData;
-    return userData;
-  }
-  async function logout() {
-    if (tokenCookie.value) {
-      try {
-        const client = buildClient();
-        await client.collection(collection).logout();
-      } catch {
-      }
-    }
-    tokenCookie.value = null;
-    user.value = null;
-  }
-  async function fetchMe() {
-    if (!tokenCookie.value) return null;
-    try {
-      const client = buildClient();
-      const me = await client.collection(collection).me();
-      user.value = me;
-      return me;
-    } catch {
+  const storage = {
+    getItem: () => tokenCookie.value || null,
+    setItem: (key, value) => {
+      tokenCookie.value = value;
+    },
+    removeItem: () => {
       tokenCookie.value = null;
-      user.value = null;
-      return null;
     }
-  }
-  return {
-    /** Reactive: the authenticated user, or null. */
-    user,
-    /** Reactive: true when a valid JWT cookie exists. */
-    isLoggedIn,
-    login,
-    logout,
-    fetchMe
   };
+  return useGenericAuth(collection, {
+    baseUrl: config.baseUrl,
+    apiKey: config.apiKey,
+    siteId: config.siteId,
+    storage
+  });
 }

package/dist/runtime/composables/useLivePreview.d.ts

@@ -1,35 +1 @@
-import { type Ref } from 'vue';
-export interface LivePreviewOptions<T> {
-    /**
-     * The initial data to show before any postMessage arrives.
-     * Typically the server-fetched document passed from useAsyncData.
-     */
-    initialData: T;
-    /**
-     * The origin of the Dyrected Admin UI that will send preview messages.
-     * Defaults to '*' (accepts from any origin).
-     * Set this to your Admin URL in production for security.
-     */
-    serverURL?: string;
-    /**
-     * The depth at which to resolve relationships in the preview data.
-     */
-    depth?: number;
-}
-/**
- * useLivePreview — Vue composable for Dyrected live preview (postMessage mode).
- *
- * The Admin UI sends postMessage events with draft document data when the
- * editor changes. This composable listens for those messages and reactively
- * updates `data` so the preview page re-renders in real time.
- *
- * Usage:
- *   const { data, isLive } = useLivePreview({ initialData: serverData.value })
- *
- * The parent page/component must be rendered inside an iframe by the Admin UI.
- * Set `admin.previewUrl` in your collection config to point to that page.
- */
-export declare function useLivePreview<T = any>(options: LivePreviewOptions<T>): {
-    data: Ref<T>;
-    isLive: Ref<boolean>;
-};
+export { useLivePreview, type LivePreviewOptions } from "@dyrected/vue";

package/dist/runtime/composables/useLivePreview.mjs

@@ -1,33 +1 @@
-import { ref, onMounted, onUnmounted } from "vue";
-export function useLivePreview(options) {
-  const data = ref(options.initialData);
-  const isLive = ref(false);
-  function handleMessage(event) {
-    const allowedOrigin = options.serverURL || "*";
-    if (allowedOrigin !== "*" && event.origin !== allowedOrigin) return;
-    const { type, data: payload } = event.data || {};
-    if (type === "dyrected-live-preview") {
-      data.value = payload;
-      isLive.value = true;
-    }
-    if (type === "dyrected-live-preview-ready") {
-      window.parent.postMessage({ type: "dyrected-live-preview-ack" }, allowedOrigin);
-    }
-  }
-  onMounted(() => {
-    window.addEventListener("message", handleMessage);
-    window.parent.postMessage({ type: "dyrected-live-preview-ready" }, options.serverURL || "*");
-  });
-  onUnmounted(() => {
-    window.removeEventListener("message", handleMessage);
-  });
-  return {
-    /** Reactively updated document data from the Admin UI editor. */
-    data,
-    /**
-     * True once the first postMessage from the Admin has been received.
-     * Useful to show a "Live preview active" indicator.
-     */
-    isLive
-  };
-}
+export { useLivePreview } from "@dyrected/vue";

package/dist/runtime/plugin.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/plugin.mjs

@@ -0,0 +1,19 @@
+import { defineNuxtPlugin, useRuntimeConfig, useRequestFetch } from "#app";
+import { createClient } from "@dyrected/sdk";
+import { DYRECTED_CLIENT_KEY } from "@dyrected/vue";
+export default defineNuxtPlugin((nuxtApp) => {
+  const config = useRuntimeConfig().public.dyrected;
+  const fetcher = useRequestFetch();
+  const client = createClient({
+    baseUrl: config.baseUrl,
+    apiKey: config.apiKey,
+    siteId: config.siteId,
+    fetch: fetcher
+  });
+  nuxtApp.vueApp.provide(DYRECTED_CLIENT_KEY, client);
+  return {
+    provide: {
+      dyrected: client
+    }
+  };
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dyrected/nuxt",
-  "version": "2.3.3",
+  "version": "2.3.4",
   "type": "module",
   "main": "./dist/module.mjs",
   "types": "./dist/module.d.ts",
@@ -10,9 +10,10 @@
   "dependencies": {
     "@nuxt/kit": "^3.11.2",
     "h3": "^1.15.0",
-    "@dyrected/admin": "2.4.2",
-    "@dyrected/core": "2.4.1",
-    "@dyrected/sdk": "2.4.1"
+    "@dyrected/admin": "2.5.0",
+    "@dyrected/core": "2.5.0",
+    "@dyrected/sdk": "2.4.2",
+    "@dyrected/vue": "2.5.0"
   },
   "peerDependencies": {
     "nuxt": "^3.0.0",
@@ -27,7 +28,7 @@
     "vue": "^3.5.34"
   },
   "license": "BSL-1.1",
-  "author": "Ajola Technologies Ltd",
+  "author": "Busola Okeowo <busolaokemoney@gmail.com>",
   "homepage": "https://dyrected.com",
   "repository": {
     "type": "git",