bryantgillespie / nuxt3-directus-starter

Nuxt 3 starter for Directus with Tailwind CSS and lots of other goodies

Hi there 👋

nuxt3-directus-starter's Issues

Your Start with local Directus "cors" error

Hey, your project looks very cool!

But I run into problems regarding CORS and Directus

Have you any tipps to avoid this?

login with 2FA

There is no possibility to manage connections via 2FA. would it be possible to add this feature?
I haven't figured out yet how to do it with directus sdk so I do it manually with /users/me/tfa/generate , /users/me/tfa/enable , etc...

yarn dev run into error (fresh setup)

If I set SSR to false it work.

Can someone give me a tipp?

Error:
`
[Vue warn]: inject() can only be used inside setup() or functional components. 15:19:15
[Vue warn]: Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.
[Vue warn]: Unhandled error during execution of setup function 15:19:15
at
[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'modules') 15:19:15
at _sfc_main.setup (c:\NuxtProject\node_modules\nuxt\dist\app\components\nuxt-root.vue:80:16)
at callWithErrorHandling (c:\NuxtProject\node_modules@vue\runtime-core\dist\runtime-core.cjs.js:171:22)
at setupStatefulComponent (c:\NuxtProject\node_modules@vue\runtime-core\dist\runtime-core.cjs.js:7194:29)
at setupComponent (c:\NuxtProject\node_modules@vue\runtime-core\dist\runtime-core.cjs.js:7149:11)
at renderComponentVNode (c:\NuxtProject\node_modules@vue\server-renderer\dist\server-renderer.cjs.js:628:17)
at renderToString (c:\NuxtProject\node_modules@vue\server-renderer\dist\server-renderer.cjs.js:906:26)
at Object.renderToString$1 [as renderToString] (/C:/xampp816/htdocs/volkssolidaritaet-jobportal/.nuxt/dev/index.mjs:664:24)
at Object.renderToString (/C:/xampp816/htdocs/volkssolidaritaet-jobportal/node_modules/vue-bundle-renderer/dist/runtime.mjs:173:40)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)
[Vue warn]: inject() can only be used inside setup() or functional components. 15:19:15
[Vue warn]: Server rendering context not provided. Make sure to only call useSSRContext() conditionally in the server build.
[Vue warn]: Unhandled error during execution of setup function 15:19:15
at
[nuxt] [request error] [unhandled] [500] Cannot read properties of undefined (reading 'modules') 15:19:15
at _sfc_main.setup (c:\NuxtProject\node_modules\nuxt\dist\app\components\nuxt-root.vue:80:16)
at callWithErrorHandling (c:\NuxtProject\node_modules@vue\runtime-core\dist\runtime-core.cjs.js:171:22)
at setupStatefulComponent (c:\NuxtProject\node_modules@vue\runtime-core\dist\runtime-core.cjs.js:7194:29) 15:18:11
at setupComponent (c:\NuxtProject\node_modules@vue\runtime-core\dist\runtime-core.cjs.js:7149:11)
at renderComponentVNode (c:\NuxtProject\node_modules@vue\server-renderer\dist\server-renderer.cjs.js:628:17)
at renderToString (c:\NuxtProject\node_modules@vue\server-renderer\dist\server-renderer.cjs.js:906:26)
at Object.renderToString$1 [as renderToString] (/C:/xampp816/htdocs/volkssolidaritaet-jobportal/.nuxt/dev/index.mjs:664:24)
at Object.renderToString (/C:/NuxtProject/node_modules/vue-bundle-renderer/dist/runtime.mjs:173:40)
at runMicrotasks ()
at processTicksAndRejections (node:internal/process/task_queues:96:5)

`

Translation ?

Amazing work Bryant !
I have been looking around for something that good for weeks !
If I may suggest something, an internationalization i18n from Directus would be awesome. I have no idea how to deal with that.
Also, make a demo of how to use/fetch relationships would be great.
Thanks again

Add composables for using SDK

Add composables for Items and other API endpoints to make data fetching even easier.

Using Formkit instead

Awesome starter. Ever thought of using @formkit/nuxt instead of the default @tailwindcss/forms
Formkit is much more complete.

Maximum call stack size exceeded

I'm using an unmodified version of the starter project, with the exception of the info for my Directus DB (Directus Cloud).

This error occurs after:

1. I have logged in on the home page
2. The page has been sitting idle for 15+ minutes (the session timeout or auth expiration)
3. I refresh the page

Errors are logged to the terminal.

✔ Nitro built in 239 ms                                                            nitro 10:29:43
Token found, fetching user from server                                                   10:45:19
Exception in PromiseRejectCallback:
@directus/sdk:848
    }
    ^

RangeError: Maximum call stack size exceeded
Exception in PromiseRejectCallback:
@directus/sdk:954
                    await this._auth.refreshIfExpired();
                                     ^

RangeError: Maximum call stack size exceeded
TransportError: Maximum call stack size exceeded                                         10:45:19
    at Transport.request (@directus/sdk:729:19)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Transport.get (@directus/sdk:733:16)
    at async MeHandler.read (@directus/sdk:455:26)
    at async /Users/kford/dev/nuxt3-directus-starter/plugins/directus.ts:67:19
    at async Object.callAsync (file:///Users/kford/dev/nuxt3-directus-starter/node_modules/unctx/dist/index.mjs:53:16)
    at async applyPlugin (/Users/kford/dev/nuxt3-directus-starter/node_modules/nuxt/dist/app/nuxt.mjs:97:23)
    at async Module.applyPlugins (/Users/kford/dev/nuxt3-directus-starter/node_modules/nuxt/dist/app/nuxt.mjs:107:5)
    at async createNuxtAppServer (/Users/kford/dev/nuxt3-directus-starter/node_modules/nuxt/dist/app/entry.mjs:29:7)
    at async default (file:///Users/kford/dev/nuxt3-directus-starter/node_modules/@nuxt/vite-builder/dist/runtime/vite-node.mjs:27:18) {
  parent: TransportError: Maximum call stack size exceeded
      at Transport.request (@directus/sdk:729:19)
      at processTicksAndRejections (node:internal/process/task_queues:96:5)
      at async Transport.post (@directus/sdk:748:16)
      at async refreshPromise (@directus/sdk:854:30)
      at async Auth.refreshIfExpired (@directus/sdk:843:13)
      at async Transport.beforeRequest (@directus/sdk:954:21)
      at async Transport.request (@directus/sdk:697:22)
      at async Transport.get (@directus/sdk:733:16)
      at async MeHandler.read (@directus/sdk:455:26)
      at async /Users/kford/dev/nuxt3-directus-starter/plugins/directus.ts:67:19 {
    parent: TransportError: Maximum call stack size exceeded
        at Transport.request (@directus/sdk:729:19)
        at processTicksAndRejections (node:internal/process/task_queues:96:5)
        at async Transport.post (@directus/sdk:748:16)
        at async refreshPromise (@directus/sdk:854:30)
        at async Auth.refreshIfExpired (@directus/sdk:843:13)
        at async Transport.beforeRequest (@directus/sdk:954:21)
        at async Transport.request (@directus/sdk:697:22)
        at async Transport.post (@directus/sdk:748:16)
        at async refreshPromise (@directus/sdk:854:30)
        at async Auth.refreshIfExpired (@directus/sdk:843:13) {
      parent: [TransportError],
      response: undefined,
      errors: []
    },
    response: undefined,
    errors: []
  },
  response: undefined,
  errors: []
}

This happens on both Chrome and Firefox (for Mac). I have not tested it on Safari or Windows. The user information is still displayed in the login form component and the user appears logged in. At the same time, I get a number of Hydration mismatch errors in the browser console from components linked to authorization like this one:

If it is useful, here's a look at the cookies:

update to directus v10

Will this repo be updated to directus v10 ?

Demo Problems

The demo currently has an issue with the demo AUTH account.

Also when grabbing pages the page images are broken.

Thanks!

Auth problem

When i already logged in after a while i get error in NUXT client:

`Token found, fetching user from server
Exception in PromiseRejectCallback:
@directus/sdk:819
}
^

RangeError: Maximum call stack size exceeded
Exception in PromiseRejectCallback:
@directus/sdk:923
await this._auth.refreshIfExpired();
^

RangeError: Maximum call stack size exceeded
Token is eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU0ZmRlYmJjLTdkZTYtNGY5Ni05N2ExLWZhNTdkNzk3YzVlNCIsInJvbGUiOiI0YTE2NWVlNS0wZDgzLTRjYjQtOGYwZC1hMjBmMGNkY2RjZjciLCJhcHBfYWNjZXNzIjoxLCJhZG1pbl9hY2Nlc3MiOjEsImlhdCI6MTY2MjkwMTU4NCwiZXhwIjoxNjYyOTAyNDg0LCJpc3MiOiJkaXJlY3R1cyJ9.LcCnF_3xGtR4KVbc6lAJFe7_eU-pKyRjHHGu_GzY4Cg
TransportError: Maximum call stack size exceeded
at Transport.request (@directus/sdk:700:19)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Transport.get (@directus/sdk:704:16)
at async MeHandler.read (@directus/sdk:429:26)
at async Proxy.getUser (/Users/53rg0/Sites/TEST/store/auth.ts:56:22)
at async /Users/53rg0/Sites/TEST/plugins/directus.ts:39:85
at async Object.callAsync (file:///Users/53rg0/Sites/TEST/node_modules/unctx/dist/index.mjs:53:16)
at async applyPlugin (/Users/53rg0/Sites/TEST/node_modules/nuxt/dist/app/nuxt.mjs:74:23)
at async Module.applyPlugins (/Users/53rg0/Sites/TEST/node_modules/nuxt/dist/app/nuxt.mjs:84:5)
at async createNuxtAppServer (/Users/53rg0/Sites/TEST/node_modules/nuxt/dist/app/entry.mjs:30:7) {
parent: TransportError: Maximum call stack size exceeded
at Transport.request (@directus/sdk:700:19)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Transport.post (@directus/sdk:719:16)
at async refreshPromise (@directus/sdk:825:30)
at async Auth.refreshIfExpired (@directus/sdk:814:13)
at async Transport.beforeRequest (@directus/sdk:923:21)
at async Transport.request (@directus/sdk:668:22)
at async Transport.get (@directus/sdk:704:16)
at async MeHandler.read (@directus/sdk:429:26)
at async Proxy.getUser (/Users/53rg0/Sites/TEST/store/auth.ts:56:22) {
  parent: TransportError: Maximum call stack size exceeded
  at Transport.request (@directus/sdk:700:19)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async Transport.post (@directus/sdk:719:16)
  at async refreshPromise (@directus/sdk:825:30)
  at async Auth.refreshIfExpired (@directus/sdk:814:13)
  at async Transport.beforeRequest (@directus/sdk:923:21)
  at async Transport.request (@directus/sdk:668:22)
  at async Transport.post (@directus/sdk:719:16)
  at async refreshPromise (@directus/sdk:825:30)
  at async Auth.refreshIfExpired (@directus/sdk:814:13) {
    parent: [TransportError],
      response: undefined,
      errors: []
  },
  response: undefined,
    errors: []
},
response: undefined,
  errors: []
}

ERROR  [h3] [unhandled] Parse Error: Header overflow                                                                                                             16:35:08

at Socket.socketOnData (node:_http_client:521:22)
at Socket.emit (node:events:513:28)
at Socket.emit (node:domain:489:12)
at addChunk (node:internal/streams/readable:324:12)
at readableAddChunk (node:internal/streams/readable:297:9)
at Readable.push (node:internal/streams/readable:234:10)
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)

Token found, fetching user from server
Exception in PromiseRejectCallback:
@directus/sdk:819
}
^

RangeError: Maximum call stack size exceeded
Exception in PromiseRejectCallback:
@directus/sdk:923
await this._auth.refreshIfExpired();
^

RangeError: Maximum call stack size exceeded
Token is eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjU0ZmRlYmJjLTdkZTYtNGY5Ni05N2ExLWZhNTdkNzk3YzVlNCIsInJvbGUiOiI0YTE2NWVlNS0wZDgzLTRjYjQtOGYwZC1hMjBmMGNkY2RjZjciLCJhcHBfYWNjZXNzIjoxLCJhZG1pbl9hY2Nlc3MiOjEsImlhdCI6MTY2MjkwMTU4NCwiZXhwIjoxNjYyOTAyNDg0LCJpc3MiOiJkaXJlY3R1cyJ9.LcCnF_3xGtR4KVbc6lAJFe7_eU-pKyRjHHGu_GzY4Cg
TransportError: Maximum call stack size exceeded
at Transport.request (@directus/sdk:700:19)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Transport.get (@directus/sdk:704:16)
at async MeHandler.read (@directus/sdk:429:26)
at async Proxy.getUser (/Users/53rg0/Sites/TEST/store/auth.ts:56:22)
at async /Users/53rg0/Sites/TEST/plugins/directus.ts:39:85
at async Object.callAsync (file:///Users/53rg0/Sites/TEST/node_modules/unctx/dist/index.mjs:53:16)
at async applyPlugin (/Users/53rg0/Sites/TEST/node_modules/nuxt/dist/app/nuxt.mjs:74:23)
at async Module.applyPlugins (/Users/53rg0/Sites/TEST/node_modules/nuxt/dist/app/nuxt.mjs:84:5)
at async createNuxtAppServer (/Users/53rg0/Sites/TEST/node_modules/nuxt/dist/app/entry.mjs:30:7) {
parent: TransportError: Maximum call stack size exceeded
at Transport.request (@directus/sdk:700:19)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async Transport.post (@directus/sdk:719:16)
at async refreshPromise (@directus/sdk:825:30)
at async Auth.refreshIfExpired (@directus/sdk:814:13)
at async Transport.beforeRequest (@directus/sdk:923:21)
at async Transport.request (@directus/sdk:668:22)
at async Transport.get (@directus/sdk:704:16)
at async MeHandler.read (@directus/sdk:429:26)
at async Proxy.getUser (/Users/53rg0/Sites/TEST/store/auth.ts:56:22) {
  parent: TransportError: Maximum call stack size exceeded
  at Transport.request (@directus/sdk:700:19)
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
  at async Transport.post (@directus/sdk:719:16)
  at async refreshPromise (@directus/sdk:825:30)
  at async Auth.refreshIfExpired (@directus/sdk:814:13)
  at async Transport.beforeRequest (@directus/sdk:923:21)
  at async Transport.request (@directus/sdk:668:22)
  at async Transport.post (@directus/sdk:719:16)
  at async refreshPromise (@directus/sdk:825:30)
  at async Auth.refreshIfExpired (@directus/sdk:814:13) {
    parent: [TransportError],
      response: undefined,
      errors: []
  },
  response: undefined,
    errors: []
},
response: undefined,
  errors: []
}

ERROR  [h3] [unhandled] Parse Error: Header overflow                                                                                                             16:35:18

at Socket.socketOnData (node:_http_client:521:22)
at Socket.emit (node:events:513:28)
at Socket.emit (node:domain:489:12)
at addChunk (node:internal/streams/readable:324:12)
at readableAddChunk (node:internal/streams/readable:297:9)
at Readable.push (node:internal/streams/readable:234:10)
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
`

Running Build in a fresh cloned repo gets the error 500

Cloned the repo and ran npx nuxi build. Generates for production, when accessed, it gives the next error:

Im using this template for building a real production app (because Nuxt 3 is officialy out) and found this error when trying to preview. Before touching anything on my project I wanted to be sure that this error is not from my code, so I reclonated a fresh new repo and ran the build command only to found that gives me the same error.
What could it be?

Hotreload with Tailwind classes

I test some modules with tailwind and run into a problem.

In some cases new tailwind classes (which I never used before in template) applied on template (style doesnt work) with live reload.

I have to resave tailwind.config.js so the page reload, after that my style was applied.

For example:

I never used the pt-32 class -> pt-32 wasn't applied

after resave tailwind.config.js the page reload and the style for pt-32 was applied.

Any Idea to resolve this? :(

Good, but might need an update?

Hi,

I think your project is really looking good and see it as the perfect starter for my next project, but the repo might need an update?
Because at the moment I'm facing some errors. For example the following one:

Uncaught SyntaxError: The requested module '/_nuxt/node_modules/.vite/deps/ufo.js?v=107dadee' does not provide an export named 'isEqual' (at router.mjs:8:23)

Any idea what is causing this?
Keep up the good work!

getFriendlyDate Always returns "th" as date suffix

When passing a date to getFriendlyDate() in /utils/time.js the function always returns a "th" for the suffix. For example, passing in 2022-12-02T22:38:48.632Z it returns Fri, December 2th, 2022. I believe the issue is on line #86. The date constant is not passed into the dateSuffix function. The corrected version should look like:

const formatted = `${dayName}, ${monthName} ${date}${dateSuffix(date)}, ${year}`

Readme followed, but Nuxt app not working?

Hi @bryantgillespie,

I've followed the exact steps you have specified in the readme.
First I had a local manual install of Directus, and then I tried the Directus Cloud install, but both don't seem to work.
The Nuxt install is working, but is not fetching any pages or users. Am I missing something?
I really like your setup, so I definitely want to start using it. I hope you can help me out.

Thanks!

Auth (Pinia) doesn't seem to work anymore?

Hi Bryant,

When trying to launch locally I get the error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia) This will fail in production.

I did not have this issue before, and have Pinia installed. Any idea how to fix this?
Thanks!

Issue with auth.ts

Hi,

I am facing an issue with the authentication.
When signing in, everything goes fine, but then I later on I get the error:

TypeError: Cannot read properties of undefined (reading 'users')

Seems like it's coming form the function:

async getLoggedinUser() {
      const { $directus } = useNuxtApp();
      try {
        // Try to fetch the user data
        const user = await $directus.users.me.read({
          fields: ['*'],
        });

        // Update the auth store with the user data
        this.loggedIn = true;
        this.user = user;
      } catch (e) {
        console.log(e);
      }
    },

Also, when reloading a page I will have to sign-in again.
This might have to do with the same error?

Hope anyone knows a fix for this.

Update to new SDK?

Any chance you could update this to use the new Directus SDK? The Directus docs do not provide enough detail or real-world examples, yet the AgencyOS, as an amazing production-ready app, is too complex. I've always found the nuxt3-directus-starter to be a "just-right" implementation. Simple, but fairly complete.

Will this package be upgraded to new Nuxt Versions?

Are there any plans for new Nuxt Releases?

API issue

Hi
I struggle to make the API call in the ExamplesApiRoutes to work.
the sayHello function doesnt work with a dynamic name.value using v-bind but it does with a static param (see bellow)

async function sayHello() {
  const { data } = await useFetch('/api/hello', {
    params: {
       name: name.value,
      //name: 'quentin', this works but name.value doesnt ?
    },
  })
  response.value = data.value
  loading.value = false
}

Maybe it comes from the useQuery in the hello.js file ?

const query = useQuery(event)
  return {
    message: `Hello ${query.name} 👋`,
  }
})

Any idea ?

Scrollposition the same as previous page (slug pages)

Hey,

I run into a problem after experiment with the slug page stuff.

My slug pages are a longer as the basic examples here.

After clicking on links (within index) the slug page load, but the scroll position are the same as on the index.

Any idea how I can fix this?

Cheers