nuxt-directus-sdk 3.0.4 → 3.0.6

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.4";
+const version = "3.0.6";
 
 const configKey = "directus";
 const logger = useLogger("nuxt-directus-sdk");

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

@@ -1,11 +1,10 @@
 <script setup lang="ts" generic="T extends keyof DirectusSchema">
 import type { PrimaryKey } from '@directus/types'
 import { computed, useRoute } from '#imports'
-import { setAttr } from '@directus/visual-editing'
-import { isVisualEditorPage } from '../composables/preview'
+import { apply, setAttr } from '@directus/visual-editing'
 import { Slot } from '../utils'
 
-type SingleDirectusCollection = DirectusSchema[T][0]
+type SingleDirectusCollection = DirectusSchema[T] extends Array<any> ? DirectusSchema[T][0] : DirectusSchema[T]
 type FieldKey = keyof SingleDirectusCollection
 
 const props = defineProps<{
@@ -15,6 +14,15 @@ 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 directusAttr = computed(() => {
   const data: Record<any, any> = {}
 
@@ -28,7 +36,7 @@ const directusAttr = computed(() => {
 })
 
 const attributes = computed(() => {
-  if (!isVisualEditorPage(useRoute())) {
+  if (!livePreview.value) {
     return null
   }
 
@@ -36,10 +44,28 @@ 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 v-bind="attributes">
+  <Slot ref="element" v-bind="attributes">
     <slot />
   </Slot>
 </template>

package/dist/runtime/plugin.js

@@ -1,8 +1,6 @@
-import { defineNuxtPlugin, refreshNuxtData, useRoute, useRuntimeConfig } from "#app";
-import { apply, remove } from "@directus/visual-editing";
+import { defineNuxtPlugin, refreshNuxtData, useCookie, useRoute, useRuntimeConfig } from "#app";
 import { useDirectusAuth } from "./composables/auth.js";
 import { useDirectus } from "./composables/directus.js";
-import { isVisualEditorPage } from "./composables/preview.js";
 import { useDirectusTokens } from "./composables/tokens.js";
 export default defineNuxtPlugin(async (nuxtApp) => {
   const route = useRoute();
@@ -11,7 +9,6 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   const directusAuth = useDirectusAuth();
   const preview = route.query.preview && route.query.preview === "true";
   const token = route.query.token;
-  const livePreview = isVisualEditorPage(route);
   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) {
@@ -27,18 +24,6 @@ export default defineNuxtPlugin(async (nuxtApp) => {
       refreshNuxtData();
     });
   }
-  if (livePreview) {
-    nuxtApp.hook("page:start", async () => {
-      if (import.meta.client) {
-        remove();
-      }
-    });
-    nuxtApp.hook("page:finish", () => {
-      if (import.meta.client) {
-        apply({ directusUrl: config.public.directus.url });
-      }
-    });
-  }
   async function fetchUser() {
     if (config.public.directus.auth?.enabled ?? true)
       await directusAuth.readMe();

package/dist/runtime/types/generate.js

@@ -22,7 +22,7 @@ export async function generateTypes(options) {
         return;
       types += "  ";
       types += field.field.includes("-") ? `"${field.field}"` : field.field;
-      if (field.schema?.is_nullable)
+      if (field.schema?.is_nullable && field.meta?.required !== true)
         types += "?";
       types += ": ";
       types += getType(field);

package/package.json

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

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

@@ -1 +0,0 @@
-export declare function isVisualEditorPage(route: any): boolean;

package/dist/runtime/composables/preview.js

@@ -1,3 +0,0 @@
-export function isVisualEditorPage(route) {
-  return route.query["visual-editor"] === "true" || route.query["visual-editor"] === true || route.query["visual-editor"] === 1;
-}