nuxt-directus-sdk 3.0.7 → 3.0.9

package/dist/module.d.mts

@@ -20,6 +20,12 @@ interface ModuleOptions {
      * @default true
      */
     devtools?: boolean;
+    /**
+     * Add Directus Visual Editor capabilities
+     *
+     * @default true
+     */
+    visualEditor?: boolean;
     /**
      * Auth options
      */

package/dist/module.d.ts

@@ -20,6 +20,12 @@ interface ModuleOptions {
      * @default true
      */
     devtools?: boolean;
+    /**
+     * Add Directus Visual Editor capabilities
+     *
+     * @default true
+     */
+    visualEditor?: boolean;
     /**
      * Auth options
      */

package/dist/module.mjs

@@ -4,7 +4,7 @@ import { generateTypes } from '../dist/runtime/types/index.js';
 import { useUrl } from '../dist/runtime/utils/index.js';
 
 const name = "nuxt-directus-sdk";
-const version = "3.0.7";
+const version = "3.0.9";
 
 const configKey = "directus";
 const logger = useLogger("nuxt-directus-sdk");
@@ -22,6 +22,7 @@ const module = defineNuxtModule({
     url: import.meta.env.DIRECTUS_URL ?? "",
     adminToken: import.meta.env.DIRECTUS_ADMIN_TOKEN ?? "",
     devtools: true,
+    visualEditor: true,
     types: {
       enabled: true,
       prefix: ""

package/dist/runtime/components/directus-visual-editor.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts" generic="T extends keyof DirectusSchema">
 import type { PrimaryKey } from '@directus/types'
-import { computed, useRoute, useRuntimeConfig } from '#imports'
-import { apply, setAttr } from '@directus/visual-editing'
+import { computed } from '#imports'
+import { setAttr } from '@directus/visual-editing'
+import { useDirectusPreview } from '../composables/directus'
 import { Slot } from '../utils'
 
 type SingleDirectusCollection = DirectusSchema[T] extends Array<any> ? DirectusSchema[T][0] : DirectusSchema[T]
@@ -14,14 +15,7 @@ const props = defineProps<{
   mode?: 'drawer' | 'modal' | 'popover'
 }>()
 
-const route = useRoute()
-const config = useRuntimeConfig()
-
-const element = ref()
-
-const livePreview = computed(() => {
-  return route.query['visual-editor'] === 'true' || route.query['visual-editor'] === '1'
-})
+const directusPreview = useDirectusPreview()
 
 const directusAttr = computed(() => {
   const data: Record<any, any> = {}
@@ -36,7 +30,7 @@ const directusAttr = computed(() => {
 })
 
 const attributes = computed(() => {
-  if (!livePreview.value) {
+  if (!directusPreview.value) {
     return null
   }
 
@@ -44,28 +38,10 @@ const attributes = computed(() => {
     'data-directus': directusAttr.value,
   }
 })
-
-onMounted(async () => {
-  await nextTick()
-
-  if (!livePreview.value || import.meta.server || !element.value) {
-    return
-  }
-
-  const applied = await apply({ directusUrl: config.public.directus.url })
-
-  if (!applied) {
-    return
-  }
-
-  applied.enable()
-
-  onBeforeUnmount(applied.remove)
-})
 </script>
 
 <template>
-  <Slot ref="element" v-bind="attributes">
+  <Slot v-bind="attributes">
     <slot />
   </Slot>
 </template>

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

@@ -1,2 +1,4 @@
+import type { Ref } from '#imports';
+export declare function useDirectusPreview(): Ref<boolean>;
 export declare function useDirectusUrl(path?: string): string;
 export declare function useDirectus(token?: string): import("@directus/sdk").DirectusClient<DirectusSchema> & import("@directus/sdk").AuthenticationClient<DirectusSchema> & import("@directus/sdk").RestClient<DirectusSchema> & import("@directus/sdk").WebSocketClient<DirectusSchema>;

package/dist/runtime/composables/directus.js

@@ -2,6 +2,9 @@ import { useRuntimeConfig } from "#app";
 import { authentication, createDirectus, realtime, rest } from "@directus/sdk";
 import { useUrl } from "../utils/index.js";
 import { useDirectusTokens } from "./tokens.js";
+export function useDirectusPreview() {
+  return useState("directus.preview", () => false);
+}
 export function useDirectusUrl(path = "") {
   return useUrl(useRuntimeConfig().public.directus.url, path);
 }

package/dist/runtime/plugin.js

@@ -1,14 +1,36 @@
 import { defineNuxtPlugin, refreshNuxtData, useCookie, useRoute, useRuntimeConfig } from "#app";
+import { apply, remove } from "@directus/visual-editing";
 import { useDirectusAuth } from "./composables/auth.js";
-import { useDirectus } from "./composables/directus.js";
+import { useDirectus, useDirectusPreview } from "./composables/directus.js";
 import { useDirectusTokens } from "./composables/tokens.js";
 export default defineNuxtPlugin(async (nuxtApp) => {
   const route = useRoute();
   const config = useRuntimeConfig();
   const tokens = useDirectusTokens();
   const directusAuth = useDirectusAuth();
-  const preview = route.query.preview && route.query.preview === "true";
-  const token = route.query.token;
+  const directusPreview = useDirectusPreview();
+  directusPreview.value = !!(route.query.preview === "true" || route.query.preview === "1") || !!(route.query["visual-editor"] === "true" || route.query["visual-editor"] === "1");
+  if (directusPreview.value) {
+    if (config.public.directus.visualEditor) {
+      nuxtApp.hook("page:start", async () => {
+        if (import.meta.client) {
+          remove();
+        }
+      });
+      nuxtApp.hook("page:finish", () => {
+        if (import.meta.client) {
+          apply({ directusUrl: config.public.directus.url });
+        }
+      });
+    }
+    const token = route.query.token;
+    if (token) {
+      useDirectus().setToken(token);
+      nuxtApp.hook("page:finish", () => {
+        refreshNuxtData();
+      });
+    }
+  }
   if (!tokens.directusUrl.value || tokens.directusUrl.value !== config.public.directus.url) {
     tokens.directusUrl.value = config.public.directus.url;
     if (tokens.accessToken.value || tokens.refreshToken.value) {
@@ -18,12 +40,6 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       });
     }
   }
-  if (preview && token) {
-    useDirectus().setToken(token);
-    nuxtApp.hook("page:finish", () => {
-      refreshNuxtData();
-    });
-  }
   async function fetchUser() {
     if (config.public.directus.auth?.enabled ?? true)
       await directusAuth.readMe();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-directus-sdk",
   "type": "module",
-  "version": "3.0.7",
+  "version": "3.0.9",
   "description": "A Directus nuxt module that uses the Directus SDK",
   "author": "Matthew Rollinson <matt@rolley.io>",
   "license": "MIT",