initial rewrite with nuxt-first approach

package.json

@@ -45,27 +45,23 @@
     "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@directus/sdk": "^16.1.1",
-    "@nuxt/devtools-kit": "^1.3.9",
-    "@nuxt/image": "^1.7.0",
-    "@nuxt/kit": "^3.12.3",
-    "@vueuse/core": "^10.11.0",
-    "ws": "^8.18.0"
+    "@nuxt/devtools-kit": "^1.3.14",
+    "@nuxt/kit": "^3.13.0",
+    "@vueuse/core": "^10.11.1"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^1.3.9",
+    "@nuxt/devtools": "^1.3.14",
     "@nuxt/eslint-config": "^0.3.13",
-    "@nuxt/module-builder": "^0.8.1",
-    "@nuxt/schema": "^3.12.3",
-    "@types/node": "^20.14.10",
-    "@types/ws": "^8.5.11",
+    "@nuxt/module-builder": "0.8.3",
+    "@nuxt/schema": "^3.13.0",
+    "@types/node": "^20.16.1",
     "changelogen": "^0.5.5",
-    "eslint": "^9.5.0",
-    "nuxt": "^3.12.3",
+    "eslint": "^9.9.1",
+    "nuxt": "^3.13.0",
     "ohash": "^1.1.3",
-    "typescript": "^5.4.5",
-    "ufo": "^1.5.3",
-    "vue-tsc": "^2.0.26"
+    "typescript": "^5.5.4",
+    "ufo": "^1.5.4",
+    "vue-tsc": "2.0.26"
   },
   "keywords": [
     "nuxt",
@@ -81,7 +77,7 @@
   ],
   "resolutions": {
     "nuxt-directus-next": "workspace:*",
-    "@nuxt/module-builder": "0.8.1",
+    "@nuxt/module-builder": "0.8.3",
     "vue-tsc": "2.0.26"
   },
   "packageManager": "[email protected]"

playground/.env

@@ -1,2 +1,2 @@
-NUXT_PUBLIC_DIRECTUS_STATIC_TOKEN = 3VHNEkyyZvsEoNNgGkdFNZApvK_Bj11v # API-Public
-NUXT_PUBLIC_DIRECTUS_URL = http://localhost:8055/
+# NUXT_PUBLIC_DIRECTUS_STATIC_TOKEN = 3VHNEkyyZvsEoNNgGkdFNZApvK_Bj11v # API-Public
+NUXT_PUBLIC_DIRECTUS_URL = https://directus.pizza/

playground/nuxt.config.ts

@@ -1,5 +1,6 @@
 export default defineNuxtConfig({
   ssr: true,
+
   alias: {
     'nuxt-directus': '../src/module',
   },
@@ -9,42 +10,9 @@ export default defineNuxtConfig({
     authConfig: {
       refreshTokenCookieName: 'nuxt-directus_refresh_token',
     },
-    moduleConfig: {
-      devtools: true,
-      autoRefresh: {
-        enableMiddleware: false,
-        redirectTo: '/login',
-        to: ['/restricted'],
-      },
-      readMeQuery: {
-        fields: ['id', 'email', 'first_name', 'last_name', 'avatar', 'status'],
-      },
-      nuxtImage: {
-        useAuthToken: false,
-        useStaticToken: true,
-      },
-    },
-  },
-
-  image: {
-    providers: {
-      nuxtDirectus: {
-        options: {
-          maxAge: 2592000,
-          modifiers: {
-            withoutEnlargement: 'true',
-            transforms: [['blur', 4], ['negate']],
-          },
-        },
-      },
-    },
   },
 
   devtools: { enabled: true },
-  routeRules: {
-    '/restricted/**': {
-      ssr: false,
-    },
-  },
+
   compatibilityDate: '2024-07-14',
 })

playground/package.json

@@ -1,16 +1,14 @@
 {
-  "name": "playground",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "private": true,
+  "name": "nuxt-direcuts-playground",
+  "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "generate": "nuxi generate"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
+  "dependencies": {
     "nuxt-directus-next": "latest",
-    "@nuxt/devtools": "^1.3.9"
+    "nuxt": "^3.13.0"
   }
 }

playground/pages/index.vue

@@ -1,144 +1,11 @@
 <template>
   <div>
-    <div v-if="!!global">
-      <h1>{{ global.title }}</h1>
-      <p>{{ global.description }}</p>
-    </div>
-    <hr>
-    <div>
-      <div v-if="user">
-        <NuxtLink to="/restricted">
-          Restricted Area
-        </NuxtLink>,
-        <button @click="logout()">
-          Logout
-        </button>
-      </div>
-      <div v-else>
-        <NuxtLink to="/restricted">
-          Restricted Area
-        </NuxtLink>,
-        <button @click="navigateTo('/login')">
-          Login
-        </button>
-      </div>
-    </div>
-    <hr>
-    <div>
-      <h1>Posts</h1>
-      <button @click="refreshPosts()">
-        Refresh posts
-      </button>
-      <div>
-        List Posts
-        <ul style="width: fit-content;">
-          <li v-for="post in posts" :key="post.id">
-            <div>
-              <span
-                style="width: 100%; display: inline-flex; justify-content: space-between; gap: 1rem; align-items: center;"
-              >
-                <h3>{{ post.title }}</h3>
-                <sub>{{ post.status }}</sub>
-              </span>
-              <div>
-                <sub>{{ post.slug }} | {{ post.id }}</sub>
-                <p>{{ post.content }}</p>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div v-if="user" style="display: inline-flex; gap: 4rem;">
-        <div>
-          <h3>New Post</h3>
-          <div>
-            <input v-model="postNewData.title" type="text" placeholder="Post title">
-            <input v-model="postNewData.slug" type="text" placeholder="Post slug">
-            <br>
-            <textarea v-model="postNewData.content" placeholder="Post content" />
-            <br>
-            <label for="newPostStatus">Status</label>
-            <select id="newPostStatus" v-model="postNewData.status">
-              <option value="draft">
-                Draft
-              </option>
-              <option value="published">
-                Published
-              </option>
-              <option value="archived">
-                Archived
-              </option>
-            </select>
-            <button @click="createContent()">
-              Create Post
-            </button>
-          </div>
-        </div>
-        <div>
-          <h3>Update or Delete a Post</h3>
-          <div>
-            <div v-for="post in posts" :key="post.id">
-              <input
-                :id="`${post.id}`"
-                v-model="postId"
-                type="radio"
-                :value="post.id"
-              >
-              <label :for="`${post.id}`">{{ post.title }}</label>
-            </div>
-            <input v-model="postUpdateData.title" type="text" placeholder="Post title">
-            <input v-model="postUpdateData.slug" type="text" placeholder="Post slug">
-            <br>
-            <textarea v-model="postUpdateData.content" placeholder="Post content" />
-            <button @click="updateContent()">
-              Update Post
-            </button>
-            <button @click="deleteItem('posts', postId).then(() => refreshPosts())">
-              Delete Post
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
+    <ul>
+      <li>
+        <NuxtLink to="/items">
+          useDirectusItems
+        </NuxtLink>
+      </li>
+    </ul>
   </div>
 </template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-import type { Post, Schema } from '../types'
-import { navigateTo, useDirectusAuth, useDirectusUsers, useDirectusItems } from '#imports'
-
-const { logout } = useDirectusAuth()
-const { user } = useDirectusUsers()
-
-const { createItem, readAsyncItems, readAsyncSingleton, updateItem, deleteItem } = useDirectusItems<Schema>()
-
-const { data: global } = await readAsyncSingleton('global')
-const { data: posts, refresh: refreshPosts, error: postsError } = await readAsyncItems('posts', {
-  query: {
-    fields: ['title', 'id', 'slug', 'content', 'status'],
-  },
-  watch: [user],
-  key: 'posts',
-})
-if (!posts.value && postsError.value) {
-  console.error('Posts fetch error:', postsError.value)
-}
-
-const postNewData = ref<Partial<Post>>({
-  status: 'draft',
-})
-
-async function createContent() {
-  await createItem('posts', postNewData.value)
-  refreshPosts()
-}
-
-const postId = ref<Post['id']>(posts.value?.[0].id || '')
-const postUpdateData = ref<Partial<Post>>({})
-
-async function updateContent() {
-  await updateItem('posts', postId.value, postUpdateData.value)
-  refreshPosts()
-}
-</script>

playground/pages/items.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div>
+      <label>
+        Collection:<br>
+        <input v-model="collection" type="text">
+      </label>
+      <br>
+      <label>
+        Search:<br>
+        <input v-model="search" type="search">
+      </label>
+      <br>
+      <label>
+        Limit:<br>
+        <input
+          v-model="limit"
+          type="range"
+          min="-1"
+          max="10"
+          step="1"
+        >
+      </label>
+    </div>
+    <div>
+      <pre>
+        {{ data }}
+      </pre>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDirectusItems } from '#imports'
+
+interface Page {
+  date_created: Date
+  date_updated: Date
+  id: string
+  seo: string
+  sort: number | null
+  status: 'published' | 'draft' | 'archived'
+  title: string
+  user_created: string
+  user_updated: string
+  permalink: string
+  blocks: string[] | Record<string, unknown>[]
+}
+
+const { readItems } = useDirectusItems()
+const collection = ref('pages')
+const search = ref('')
+const limit = ref(-1)
+
+const { data } = await readItems<Page[]>(collection, {
+  fields: ['id', 'title', 'permalink'],
+  search,
+  limit,
+  watch: [limit, search],
+})
+</script>