becem-gharbi / nuxt-directus

Unofficial Directus client for Nuxt

nuxt-directus's Issues

Custom fields for users.me.read

For a site I made i'm requesting extra information in the user object, with the Directus SDK i would use the following

.users.me.read({
  fields:[
    'email',
    'first_name',
    'last_name',
    'id',
    'role',
    'status',
    // groups
    'groups.groups_id',
    'groups.id',
    'groups.status',
    'groups.type',
    //favs
    'favourites.id',
    'favourites.collection',
    'favourites.item'
  ],
})

My thought was to crate an option here in the fetchUser that could be configured to add fields?

https://github.com/becem-gharbi/nuxt-directus/blob/ed7108052df1585a5587ea2478583de79416a83f/src/runtime/composables/useDirectusAuth.ts#LL67-L72C4

Any thoughts on this? I think this is simple enough that i can make a PR for if you want.

List of auth providers doesn't list mine

Hi! Thanks for your great module, works like a charm.

I have one problem though, since you build the SSO login link for directus with a fixed list of providers here:

nuxt-directus/src/runtime/composables/useDirectusAuth.ts

Line 15 in c082b18

type AuthProvider =

I'm unable to use my provider, which has a custom/different name than the ones in the list.

Would it be possible to make this list just any string? Not sure why you would want to fix this list.

Cheers!

SECURITY / DISCUSSION: use HttpOnly cookie for accessToken

Currently the module stores the accessToken in a httpOnly: false,. In order to secure the token I'd suggest to store it in a more secure httpOnly cookie, so that it's secured against XSS attacks.

nuxt-directus/src/runtime/composables/useDirectusSession.ts

Lines 37 to 49 in 5bb18b8

	set: (value: string) => {
	if (process.server) {
	event.context[accessTokenCookieName] = value;
	setCookie(event, accessTokenCookieName, value, {
	sameSite: "lax",
	secure: true,
	});
	} else {
	useCookie(accessTokenCookieName, {
	sameSite: "lax",
	secure: true,
	}).value = value;
	}

As the cookie than can't be read anymore from the JS, the auth-plugin as well as the useDirectusSession composable needs to be refactored:

1. The access token needs to be passed via cookie (instead of a bearer-header right now)
2. The expiracy-time needs to be stored separately (e.g via useState())
3. Some other things I might have missed in this first checkup

Looking forwards to your thoughts on this :)

SSO Callback

Implementing the callback just like in the demo on my own project just takes me to the callback page like so:

It just sits there.

Do I need a callback page or can I just redirect to the dashboard I made?

Feature request: Redirect on login

Instead of redirecting users to the home page or a generic dashboard upon logging in, it should remember the last page the user was on before clicking on the 'Login' button. After successful login, users should then be redirected back to this page.

Thinking about a solution where we can add the redirect page to the login function

const { data, error } = await login({
    email: email.value,
    password: password.value,
    redirect: route
  })

Where route could be string or route object.

Meta data not available.

Hi, Still in love with your module!

I love that it directly returns data but I think this part makes it also that meta data is not returned when requested.

nuxt-directus/src/runtime/directus.ts

Line 91 in 41d33ca

data: response._data["data"],

https://docs.directus.io/reference/query.html#metadata

Example of pulling item content

Got auth setup on my own custom app. But I am wondering if you could provide an example on how to call a field from a collection.

It hasn't clicked yet when looking at the demo. Something like pulling a string or image from a collection.

Thanks!

Download a File

Can you share some examples how to download a file (say a PDF) file using this extension?

Struggling to get filters on parent and child collections working.

I have a collection called Topics and it has a one-to-many relationship with another collection called Articles. The one-to-many field name on Posts to Articles is called “articles”

Using t "@bg-dev/nuxt-directus": "2.3.1-beta", REST, I want to query for Topics where Status = “published” and for Topics ->articles where Status = “published”

I can filter Topics but filtering on Topics ->articles does not seem to work at all
Here is my code:
const fields = ['id', 'topic', 'default_open', { articles: ['id', 'title', 'status'] }]; const filter = { status: { _eq: 'published' } }; const _res = await useDirectusRest(readItems('learn_topics', { fields, filter }));

Update SDK to v12

There's been a major release on the directus sdk due to a small breaking change: https://github.com/directus/directus/releases/tag/v10.6.2.
Shouldn't need any changes in this module except from increasing the version. V12 also has some (type) optimisations and fixes.

Demo Not Found

Seeing this, this morning:

In a new session that has a refresh token, no new access token is fetched.

Summary:
Access tokens are lost upon reopening the browser, while refresh tokens persist.

Steps to Reproduce:

1. Log in to the site and obtain the access and refresh tokens.
2. Quit the browser completely.
3. Reopen the browser and navigate back to the site.
4. Observe that the user is no longer logged in; the access token is gone (since it's session-based), but the refresh token still exists.

Expected Behavior:
In version 1, all tokens used to be stored in cookies. Although I appreciate the new approach with session-based tokens, it's problematic that the browser still retains the refresh token while losing the access token. Ideally, the system should be able to obtain a new access token using the existing refresh token without requiring the user to log in again.

Possible Solution:
I suggest implementing a mechanism that retrieves an access token during initialization if a refresh token exists and the access token is either empty or gone. This would maintain user authentication across browser sessions without compromising the benefits of using session-based tokens.

Draft: Collection of Issues with authentication.

working on this issue to complete it and test some more.

Going to collect some issues with authentication.

There is a big chance issues can still be caused upstream by the SDK

• directus/directus#19354

Currently experiencing issues with

• automatic refreshing of tokens (with or without provider)
• logout (provider) with custom cookiename (refresh token not found)

Testing different scenario + results

• access_token is session based,
  • closing the browser and reopening the site should in theory get a new access_token with the refresh_token in the cookie? ❌
  • Should a refresh be added here when there is a refresh token but no access token?

    nuxt-directus/src/runtime/plugins/auth.ts

    Line 44 in 1bf7278
  • or here? when it tries to use access_token, but we only have refresh_token-> get a new access token

    nuxt-directus/src/runtime/composables/useDirectusAuth.ts

    Line 170 in 1bf7278

    async function getToken(): Promise<AuthStorageData["access_token"]> {

• (seperate issue for later) Redirects are only query string based, makes it harder to do some more advanced middleware login/logout flows

login()

• auto refresh after inactivity
• navigate to other page with directus content after inactivity
• after inactivity (15min) -> refresh the browser -> tokens still exist but user data not filled -> refresh browser again -> user data filled. ** will try to create a better reproduction path for this one

loginWithProvider()

• refresh after inactivity - Works✅
• navigate to other page with directus content after inactivity

New release breaks my installation

Hey there!

Thanks for upgrading to the new session mode for auth in your module so fast!

I just try to reinstall your module and got all sorts of dependencies errors (see below).

Any thoughts on what changed in the interim? My earlier nuxt-directus packages installed fine.

Cheers!

My package.json dependencies:

"devDependencies": {
    "@nuxt/devtools": "latest",
    "@nuxt/eslint-config": "^0.2.0",
    "@nuxtjs/eslint-config-typescript": "^12.1.0",
    "@nuxtjs/i18n": "^8.1.1",
    "@types/node": "^18.17.0",
    "@typescript-eslint/eslint-plugin": "^7.2.0",
    "@typescript-eslint/parser": "^7.2.0",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.1.3",
    "firebase-admin": "^11.10.1",
    "firebase-functions": "^4.4.1",
    "firebase-functions-test": "^3.1.0",
    "nuxt": "npm:nuxt3@latest",
    "prettier": "^3.2.5",
    "typescript": "^5.4.2"
  },
  "dependencies": {
    "@pinia/nuxt": "^0.4.11",
    "@vueform/slider": "^2.1.7",
    "bootstrap": "^5.3.0",
    "dayjs": "^1.11.9",
    "pinia": "^2.1.6",
    "sass": "^1.64.1",
    "swiper": "^10.0.4",
    "vee-validate": "^4.11.1",
    "vue-clipboard3": "^2.0.0",
    "vue-timer-hook": "^1.0.84",
    "vue3-carousel": "^0.3.1",
    "vue3-toastify": "^0.1.12",
    "yup": "^1.2.0"
  }

The error:

# npm resolution error report

While resolving: nuxt-app@undefined
Found: [email protected]
node_modules/vue
  peer vue@"^3.3.4" from @nuxt/[email protected]
  node_modules/@nuxt/vite-builder
    @nuxt/vite-builder@"3.11.0" from [email protected]
    node_modules/nuxt
      peer nuxt@"^3.9.0" from @nuxt/[email protected]
      node_modules/@nuxt/devtools
        @nuxt/devtools@"^1.0.8" from [email protected]
        dev @nuxt/devtools@"latest" from the root project
      peer nuxt@"^3.9.0" from @nuxt/[email protected]
      node_modules/@nuxt/devtools-kit
        @nuxt/devtools-kit@"1.0.8" from @nuxt/[email protected]
        node_modules/@nuxt/devtools
          @nuxt/devtools@"^1.0.8" from [email protected]
          dev @nuxt/devtools@"latest" from the root project
      dev nuxt@"npm:nuxt3@latest" from the root project
  peer vue@">=2.7 || >=3" from @unhead/[email protected]
  node_modules/@unhead/vue
    @unhead/vue@"^1.8.20" from [email protected]
    node_modules/nuxt
      peer nuxt@"^3.9.0" from @nuxt/[email protected]
      node_modules/@nuxt/devtools
        @nuxt/devtools@"^1.0.8" from [email protected]
        dev @nuxt/devtools@"latest" from the root project
      peer nuxt@"^3.9.0" from @nuxt/[email protected]
      node_modules/@nuxt/devtools-kit
        @nuxt/devtools-kit@"1.0.8" from @nuxt/[email protected]
        node_modules/@nuxt/devtools
          @nuxt/devtools@"^1.0.8" from [email protected]
          dev @nuxt/devtools@"latest" from the root project
      dev nuxt@"npm:nuxt3@latest" from the root project
  peer vue@"^3.2.25" from @vitejs/[email protected]
  node_modules/@vitejs/plugin-vue
    @vitejs/plugin-vue@"^5.0.4" from @nuxt/[email protected]
    node_modules/@nuxt/vite-builder
      @nuxt/vite-builder@"3.11.0" from [email protected]
      node_modules/nuxt
        peer nuxt@"^3.9.0" from @nuxt/[email protected]
        node_modules/@nuxt/devtools
          @nuxt/devtools@"^1.0.8" from [email protected]
          dev @nuxt/devtools@"latest" from the root project
        peer nuxt@"^3.9.0" from @nuxt/[email protected]
        node_modules/@nuxt/devtools-kit
          @nuxt/devtools-kit@"1.0.8" from @nuxt/[email protected]
          node_modules/@nuxt/devtools
            @nuxt/devtools@"^1.0.8" from [email protected]
            dev @nuxt/devtools@"latest" from the root project
        dev nuxt@"npm:nuxt3@latest" from the root project
  peer vue@"^3.0.0" from @vitejs/[email protected]
  node_modules/@vitejs/plugin-vue-jsx
    @vitejs/plugin-vue-jsx@"^3.1.0" from @nuxt/[email protected]
    node_modules/@nuxt/vite-builder
      @nuxt/vite-builder@"3.11.0" from [email protected]
      node_modules/nuxt
        peer nuxt@"^3.9.0" from @nuxt/[email protected]
        node_modules/@nuxt/devtools
          @nuxt/devtools@"^1.0.8" from [email protected]
          dev @nuxt/devtools@"latest" from the root project
        peer nuxt@"^3.9.0" from @nuxt/[email protected]
        node_modules/@nuxt/devtools-kit
          @nuxt/devtools-kit@"1.0.8" from @nuxt/[email protected]
          node_modules/@nuxt/devtools
            @nuxt/devtools@"^1.0.8" from [email protected]
            dev @nuxt/devtools@"latest" from the root project
        dev nuxt@"npm:nuxt3@latest" from the root project
  peerOptional vue@"^2.7.0 || ^3.2.25" from @vue-macros/[email protected]
  node_modules/@vue-macros/common
    @vue-macros/common@"^1.8.0" from [email protected]
    node_modules/unplugin-vue-router
      unplugin-vue-router@"^0.7.0" from [email protected]
      node_modules/nuxt
        peer nuxt@"^3.9.0" from @nuxt/[email protected]
        node_modules/@nuxt/devtools
          @nuxt/devtools@"^1.0.8" from [email protected]
          dev @nuxt/devtools@"latest" from the root project
        peer nuxt@"^3.9.0" from @nuxt/[email protected]
        node_modules/@nuxt/devtools-kit
          @nuxt/devtools-kit@"1.0.8" from @nuxt/[email protected]
          node_modules/@nuxt/devtools
            @nuxt/devtools@"^1.0.8" from [email protected]
            dev @nuxt/devtools@"latest" from the root project
        dev nuxt@"npm:nuxt3@latest" from the root project
  peer vue@"3.4.21" from @vue/[email protected]
  node_modules/@vue/server-renderer
    @vue/server-renderer@"3.4.21" from [email protected]
  vue@"^3.4.21" from [email protected]
  node_modules/nuxt
    peer nuxt@"^3.9.0" from @nuxt/[email protected]
    node_modules/@nuxt/devtools
      @nuxt/devtools@"^1.0.8" from [email protected]
      dev @nuxt/devtools@"latest" from the root project
    peer nuxt@"^3.9.0" from @nuxt/[email protected]
    node_modules/@nuxt/devtools-kit
      @nuxt/devtools-kit@"1.0.8" from @nuxt/[email protected]
      node_modules/@nuxt/devtools
        @nuxt/devtools@"^1.0.8" from [email protected]
        dev @nuxt/devtools@"latest" from the root project
    dev nuxt@"npm:nuxt3@latest" from the root project
  peer vue@"^2.6.14 || ^3.3.0" from [email protected]
  node_modules/pinia
    pinia@">=2.1.0" from @pinia/[email protected]
    node_modules/@pinia/nuxt
      @pinia/nuxt@"^0.4.11" from the root project
    pinia@"^2.1.6" from the root project
  peer vue@"^3.0.0-0 || ^2.6.0" from [email protected]
  node_modules/pinia/node_modules/vue-demi
    vue-demi@">=0.14.5" from [email protected]
    node_modules/pinia
      pinia@">=2.1.0" from @pinia/[email protected]
      node_modules/@pinia/nuxt
        @pinia/nuxt@"^0.4.11" from the root project
      pinia@"^2.1.6" from the root project
  peer vue@"^3.3.11" from [email protected]
  node_modules/vee-validate
    vee-validate@"^4.11.1" from the root project
  peer vue@"^3.0.0" from [email protected]
  node_modules/vue-i18n
    peerOptional vue-i18n@"*" from @intlify/[email protected]
    node_modules/@intlify/unplugin-vue-i18n
      @intlify/unplugin-vue-i18n@"^2.0.0" from @nuxtjs/[email protected]
      node_modules/@nuxtjs/i18n
        dev @nuxtjs/i18n@"^8.1.1" from the root project
    vue-i18n@"^9.9.0" from @nuxtjs/[email protected]
    node_modules/@nuxtjs/i18n
      dev @nuxtjs/i18n@"^8.1.1" from the root project
  peer vue@"^3.2.0" from [email protected]
  node_modules/vue-router
    vue-router@"^4.2.5" from @nuxtjs/[email protected]
    node_modules/@nuxtjs/i18n
      dev @nuxtjs/i18n@"^8.1.1" from the root project
    vue-router@"^4.3.0" from [email protected]
    node_modules/nuxt
      peer nuxt@"^3.9.0" from @nuxt/[email protected]
      node_modules/@nuxt/devtools
        @nuxt/devtools@"^1.0.8" from [email protected]
        dev @nuxt/devtools@"latest" from the root project
      peer nuxt@"^3.9.0" from @nuxt/[email protected]
      node_modules/@nuxt/devtools-kit
        @nuxt/devtools-kit@"1.0.8" from @nuxt/[email protected]
        node_modules/@nuxt/devtools
          @nuxt/devtools@"^1.0.8" from [email protected]
          dev @nuxt/devtools@"latest" from the root project
      dev nuxt@"npm:nuxt3@latest" from the root project
    peerOptional vue-router@"^4.1.0" from [email protected]
    node_modules/unplugin-vue-router
      unplugin-vue-router@"^0.7.0" from [email protected]
      node_modules/nuxt
        peer nuxt@"^3.9.0" from @nuxt/[email protected]
        node_modules/@nuxt/devtools
          @nuxt/devtools@"^1.0.8" from [email protected]
          dev @nuxt/devtools@"latest" from the root project
        peer nuxt@"^3.9.0" from @nuxt/[email protected]
        node_modules/@nuxt/devtools-kit
          @nuxt/devtools-kit@"1.0.8" from @nuxt/[email protected]
          node_modules/@nuxt/devtools
            @nuxt/devtools@"^1.0.8" from [email protected]
            dev @nuxt/devtools@"latest" from the root project
        dev nuxt@"npm:nuxt3@latest" from the root project
  peer vue@"^3.2.0" from [email protected]
  node_modules/vue-timer-hook
    vue-timer-hook@"^1.0.84" from the root project
  peer vue@"^3.2.0" from [email protected]
  node_modules/vue3-carousel
    vue3-carousel@"^0.3.1" from the root project
  peerOptional vue@">=3.2.0" from [email protected]
  node_modules/vue3-toastify
    vue3-toastify@"^0.1.12" from the root project

Could not resolve dependency:
dev @bg-dev/nuxt-directus@"*" from the root project

Conflicting peer dependency: [email protected]
node_modules/vue
  peer vue@">= 2.5 < 2.7" from @vue/[email protected]
  node_modules/@vue/composition-api
    peerOptional @vue/composition-api@"^1.0.0" from @vue/[email protected]
    node_modules/@vue/apollo-composable
      peer @vue/apollo-composable@"^4.0.1" from @bg-dev/[email protected]
      node_modules/@bg-dev/nuxt-directus
        dev @bg-dev/nuxt-directus@"*" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Argument of type 'string' is not assignable to parameter of type 'never'.

My TS compiler gives error Argument of type 'string' is not assignable to parameter of type 'never'. when using your example code for readItems through rest. The error is shown at the collection name ("country" in this example.) Typescript complier is 5.4.5

import {
  readItems,
  useAsyncData,
  useDirectusRest,
} from "#imports";

const { data, refresh } = await useAsyncData(() =>
  useDirectusRest(readItems("country")),
);

How does this compare to https://github.com/Intevel/nuxt-directus?

Just wondering, I'm not sure which one to use, thanks!

Failed to find useDirectusSession

In src/runtime/plugins/rest.ts, import { useDirectusSession } from '#imports' raises an error when auth.enabled is false because useDirectusSession is not auto imported anymore.

useCookie is not defined

Finally getting around to updating this from 2.0.1 to 2.1.1 and on the latest version I am seeing this now. I don't see anything different in the config thats needed for nuxt. Am I supposed to be setting something new on pages now?

User get unlogged when trying to access not found page

Hi !

Thanks again for your work !

I noticed that as soon as I try to access a page that doesn't exists, the cookie get destroyed and therefor the user get disconnected.

Log in -> Cookie inserted -> type <yoursite>/unknownpage -> Cookie is destroyed -> Nuxt error 404 -> click on back to home -> user is now unlogged.

Another behavior with global auth:

Log in -> Cookie inserted -> type <yoursite>/unknownpage -> Redirect to /login page (even tho we're still supposed to be logged in) -> type user + password + submit form -> Nuxt error 404 -> Back to home -> still unlogged

Is it supposed to happen ?

Missing aggregate() function from Nuxt's auto import

Hi,
I'm noticing that there isn't aggregate() function, so it's impossible to use it with useDirectusRest(), for now I installed the SDK and I imported the aggregate function myself.

I tried to understand why in the repo, but honestly I don't understand how auto import works in Nuxt (part of why I'm not a fan of it), is it supposed to globally import all functions from what you are using inside composables folder inside your module ?

REQUEST: New SDK

This module looks really promising but as there's a new SDK coming soon (currently in beta) I'm wondering if you already do have plans to upgrade the module.

The new SDK doesn't rely on axios anymore but on fetch, so that some refactoring wold be necessary.

Invalid payload. \"refresh_token\" is required

When I call the logout() composable I get the error below even though I actually get logged out. i.e the user is null.
I'm using:

  "@bg-dev/nuxt-directus": "2.3.0-beta",
  "nuxt": "^3.6.5",

console.log is printing this

Uncaught (in promise) FetchError:  (400 Bad Request (http://127.0.0.1:8055/auth/logout))

and the network log is showing this error

message: "Invalid payload. \"refresh_token\" is required in either the JSON payload or Cookie."

I called logout as follows:

<script lang="ts" setup>
const { logout } = useDirectusAuth();
const handleSignout = async () => await logout();
</script>

<template>
  <div>
       <UButton label="Sign Out" @click="handleSignout"></UButton>
  </div>
<template>

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• fix(deps): update all non-major dependencies (@bg-dev/nuxt-naiveui, @nuxtjs/tailwindcss, eslint)
• fix(deps): update nuxt 3 to v3.6.0 (@nuxt/kit, @nuxt/schema, nuxt)

Detected dependencies

npm

demo/package.json

• @bg-dev/nuxt-directus ^0.1.4
• @bg-dev/nuxt-naiveui ^1.1.1
• @nuxtjs/tailwindcss ^6.7.0
• nuxt 3.5.3

package.json

• @directus/sdk ^10.3.3
• @nuxt/kit ^3.5.0
• defu ^6.1.2
• @nuxt/module-builder ^0.4.0
• @nuxt/schema ^3.5.0
• @nuxtjs/eslint-config-typescript ^12.0.0
• changelogen ^0.5.3
• eslint ^8.41.0
• nuxt ^3.5.0

playground/package.json

---

• Check this box to trigger a request for Renovate to run again on this repository

Update SDK to v13

It's that time again where the SDK had a version bump from v12 to v13. The main reason for the increase was the possible breaking changes due to adding support for reading/updating extensions in the SDK (came with directus release v10.7.0). Therewith I don't think this module needs any changes, as but haven't tested it yet.

Apart from that, these are the changes that could have an impact on the module:

• Type-Fixes
• New Asset functions (probably unimportant, as the module doesn't includes a full function-map either)

Whole changelog

Do you want me to open a PR, or will you check / test it yourself? :)

Thanks as always!

Possible bug: No fields returned when I add a large set of fields to query

Upon using an array to add fields in the query, the query tends to become considerably lengthy, particularly when there are more than 15-ish fields. I managed to resolve this issue for myself by incorporating the .join(',') function; however, this solution may inadvertently introduce unanticipated issues for other users.

There are two methods to include fields in the query:

Utilizing a string: fields: "field1,field2,field3,field4"
Utilizing an array: fields: ['field1','field2','field3','field4']
The root of the problem appears to be related to the QS library, specifically the line const query = qs.stringify(options?.params);. Unfortunately, I am yet to identify a definitive fix for this issue.

Here is an example of fields that caused problems when used with nuxt-directus, but did not pose any issues with the SDK itself:

export const fieldsUserSimple = [
  'email',
  'first_name',
  'last_name',
  'id',
  'role',
  'status',
  'groups.groups_id',
  'groups.id',
  'groups.status',
  'groups.type',
  'favourites.id',
  'favourites.collection',
  'favourites.item',
  'broadcasts.id',
  'broadcasts.broadcasts_id',
  'user_module_state.id',
  'user_module_state.video_time',
  'user_module_state.status',
  'user_module_state.date_completed',
  'user_module_state.custom_state',
  'user_module_state.module_content',
    // >>>>> it was broken after adding this ones.
  'user_module_state.module_content.id',
  'user_module_state.module_content.module',
  'user_module_state.module_content.duration',
]

use runtimeConfig for module configuration

Hi!

Is it possible to use runtimeConfig with this plugin? At the moment the config values for this (wonderful) module are not using runtimeConfig.

Cheers!

Kees.

PNPM?

Question as I'm new to PNPM. Does anything need changed in your awesome module to be able to install it via PNPM since thats the package manager of choice from Directus now?

Excited to use this. Thanks!

url arguments

Hey! Noticed that url arguments are sanitized when you are redirected to auth page and than back to where you were going.

Wondering if that could be added when you have time.

Thanks!

Logout 400

Great new release. Just moved to the new beta and for some reason anytime I call logout its giving me a 400 error.

Updated logout to use the method.

Refresh Logs Me Out

Hey! Been working on a new project and for some reason refreshing the page seems to log me out. But when using NuxtLink, it routes me fine throughout my app while maintaining auth.

Not sure if I am missing something. Everything is set as it should be I believe

no issue: Just a thank you

This project deserves more attention, 100x times better compared to other nuxt3 module <3
1000 times thanks.

Command imports is missing user-utils

Hey again 👋🏼

The command import is missing the user-util commands (view in directus SDK)

nuxt-directus/src/module.ts

Lines 149 to 155 in 2225380

	commands.forEach((name) => {
	addImports({
	name,
	as: name,
	from: '@directus/sdk'
	})
	})

I haven't checked all commands, but in general it feels like a bunch of commands are missing.

What do you think about replacing the list and importer with addImportsDir to always have all rest-commands available?

Remove console.log, forgot to remove console log.

Amateur 😅

nuxt-directus/src/runtime/composables/useDirectusAuth.ts

Line 70 in b1a2bbc

console.log(publicConfig.auth.userFields);

Question - user info not persistent & refresh request fail

Hi,
I discovered your nuxt-directus plugin and it seems perfect - using just plain directus SDK and introducing simple authentication.

But when I was experimenting with it I had some unexpected issues. Maybe I just don't understand properly how it is supposed to work.

1. I am able to log in and then display user info (using useUser composable). But when I refresh the page in the browser, user info is gone. Is that how it's supposed to be?

2. Refresh request is not working. When the plugin sends the request, there is no JWT token attached. There is this error response from Directus:

{
    "errors": [
        {
            "message": "Invalid payload. \"refresh_token\" is required in either the JSON payload or Cookie.",
            "extensions": {
                "code": "INVALID_PAYLOAD",
                "reason": "\"refresh_token\" is required in either the JSON payload or Cookie"
            }
        }
    ]
}

I can see that there is the auth_token cookie set, but just for localhost:3000.

I am using the default ports for both nuxt (3000) and directus (8055).

I appreciate any advice about what I'm doing wrong (or maybe just don't understand the logic behind this plugin).

Thanks!

Nuxt Warning from middleware.

[nuxt] Calling `useRoute` within middleware may lead to misleading results. Instead, use the (to, from) arguments passed to the middleware to access the new and old routes.

I think its pointing to

nuxt-directus/src/runtime/composables/useDirectusAuth.ts

Line 41 in 3b386ba

const route = useRoute();

called via

nuxt-directus/src/runtime/middleware/auth.ts

Line 20 in 3b386ba

const { useUser } = useDirectusAuth();

It's just a warning but maybe there is a way to get around it.

500 error. failed to find clearNuxtState

Seeing this when upgrading to 2.3.

ERROR [unimport] failed to find "clearNuxtState" imported from "#imports" (x4)

get folder by name

Hey,

I don't get the way to get a folder by name. Can someone help me :(

Best regards

npm install failed

Not happening with pnpm i

Tried npm i with and without shamefully-hoist=true

❯ npm i

> postinstall
> nuxt prepare

Nuxi 3.6.5                                                                                                                                                 1:50:14 PM

 ERROR  Error while requiring module nuxt-apollo: Error: Cannot find module '/Users/username/Sites/xxxx/gh-tpl/nuxt-apollo'                     1:50:15 PM
Require stack:
- /Users/username/Sites/xxxx/gh-tpl/index.js


 ERROR  Cannot find module '/Users/username/Sites/xxxx/gh-tpl/nuxt-apollo'                                                                      1:50:15 PM
Require stack:
- /Users/username/Sites/xxxx/gh-tpl/index.js

  Require stack:
  - index.js
  at Module._resolveFilename (node:internal/modules/cjs/loader:1077:15)
  at Function.resolve (node:internal/modules/cjs/helpers:116:19)
  at Function._resolve [as resolve] (node_modules/jiti/dist/jiti.js:1:250100)
  at resolveModule (node_modules/@nuxt/kit/dist/index.mjs:2230:29)
  at requireModule (node_modules/@nuxt/kit/dist/index.mjs:2240:24)
  at loadNuxtModuleInstance (node_modules/@nuxt/kit/dist/index.mjs:2435:90)
  at async installModule (node_modules/@nuxt/kit/dist/index.mjs:2408:47)
  at async setup (node_modules/@bg-dev/nuxt-directus/dist/module.mjs:60:7)
  at async normalizedModule (node_modules/@nuxt/kit/dist/index.mjs:2140:17)
  at async installModule (node_modules/@nuxt/kit/dist/index.mjs:2409:95)

npm ERR! code 1
npm ERR! path /Users/username/Sites/xxxx/gh-tpl
npm ERR! command failed
npm ERR! command sh -c nuxt prepare

Will try on a fresh nuxt installation later today

Couldn't get the `DirectusSchema` global working in a pnpm workspace

Hi,
I can't get to work the DirectusSchema interface augmentation through d.ts. But without pnpm workspace it works great.

My current workspace is:

- apps
  - directus
  - frontend
    - types/global.d.ts
    - tsconfig.ts
- libs
  - now empty

Inside the global.d.ts I have the exact same code as the documentation in the readme
Inside the tsconfig I properly added the type roots to the correct folder.

BUT readItems Function for example is typed as readItems<object> since it can't seem to find the global schema declared in global.d.ts, and it defaults it at object.

What I also noticed is that pnpm seems to hoist the SDK in the root workspace node_module folder via symlink, and nuxt auto import it but not from the symlink but from root ../../../../node_modules/.pnpm/.... I'm wondering if it's what is causing the issue, and the SDK can't find the Schema because of the hoisting.

Does it makes sense ?
I'm not sure at all though

useLocalePath in login config

Hi,

Let me start with, this is not a bug but merely a question.

I'm using nuxt i18n in my project and whenever the auth middleware is hit it will forward me to /login (as is configured in nuxt.config.ts).

The question is, any idea on how to use locale paths in that configuration in nuxt.config.ts? The middleware should redirect me to /en/login or /nl/login for example.

Thanks!

useDirectusRest picking up wrong DirectusSchema global type

Hi,
I added a directus.d.ts like in your starter, but useDirectusRest is picking up your global instead of mine

declare global {
  interface DirectusSchema {}
}

Do you know in which order (if there is) d.ts are overriding each other ?

Is there a way to ad hoc refresh user data with changes made in directus

How does the user data get fetched from directus?

If I made some changes to the user data directly in directus
The changes are not instantly reflected in the frontend. Even if I do a hard browser refresh or call the fetchUser() or readMe() functions on app startup, login page, or at the press of a button.

However, the changes do get reflected in the frontend after some time delay.
It looks like changes to user data are fetched on a timely basis and not ad hoc at an event

[Question] Get (relational) translations content

Hi!

I'm using this to pick up content:

this.webshopBanners = await useDirectusRest<
        DirectusCollections["banners"]
      >(
        readItems("banners", {
          fields: ["*", "translations"],
        }),
      );

I would like to also get relational fields from the translations relation. However, if I type "translations.*" as I would normally do, my Typescript compiler says that this is not a valid entry in the fields array.

What is the best approach?

Cheers!

Request: Directus 10.10 Session Based Authentication

Directus 10.10 introduced a new authentication mode "session" which stores a session token as cookie.
This makes a bunch of things a bit easier, as multi-tabs logins are handled by default and assets can be requested without a token in the query.
What do you think of adding this as an option to the module so that it relies on the sdk for that part too?

Haven't checked the possibilities in details, and how it works with nuxt yet, but would like to hear you thoughts about it 🎉

More information: directus/directus#21239

Logout user if token refresh fails

Hi,
I have forced token refresh to fail on purpose to see how this case is handled. I can see that after unsuccessful refresh the auth cookies are gone, but useUser() still keeps the user data, until I refresh the browser window.

Is it somehow possible to logout user automatically in case of token refresh failure?