How one would use directus API to generate a completely static site using Nuxt3? Simple html/js files that do not trigger backend requests.

I'm trying to implement the following:

export const asyncDirectusItems = async (key, config, transform) => {
  const { getItems } = useDirectusItems();
  const { data } = await useAsyncData(key, async () => await getItems(config), {transform});
  return data;
};

export const asyncDirectusItemById = async (collection, id, transform) => {
  const { getItemById } = useDirectusItems();
  const key = `${collection}#${id}`;
  const { data } = await useAsyncData(key, async () => await getItemById({ collection, id }), {transform});
  return data;
};

But recent Nuxt 3 RC's (9 and 12) either fail to generate directly accessible SSR pages or mix their markup with the front page. Also I'm having trouble to prevent Directus API calls (which are unnecessary for a completely static website).

<script setup>
const categories = await asyncDirectusItems('blog_categories', {
  collection: "Blog",
  params: {
    fields: "category",
    groupBy: "category"
  }
});

const posts = await asyncDirectusItems('published_blogs', {
  collection: "Blog",
  params: {
    filter: {
      status: "published"
    }
  }
});
</script>
```html

• [ ] Bug fix (a non-breaking change which fixes an issue)
• [x] New feature (a non-breaking change which adds functionality)
• [x] Breaking change (fix or feature that would cause existing functionality to change)

Description

add refresh token flow, to able to get a new token after it expired

Checklist:

• [x] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
• [ ] I have added tests to cover my changes (if not applicable, please state why)

Is your feature request related to a problem? Please describe.

You currently can't use the Directus access token method to authenticate to the API. Ie. I share the "token" from the User > Admin Settings section and provide that in the Query String or the Authorization Bearer header.

Describe the solution you'd like

login should accept a {"token" OR { email: string, password: string }

<script setup lang="ts">
const { login } = useDirectusAuth();
const router = useRouter();

const onSubmit = async () => {
  try {
    await login({ token: "" });
  } catch (e) {}
};
</script>

I am developing a little project based on nuxt 3 and Directus.

There is a problem when i'm trying to login logout. When i call login method, the user is fetch and setted and same for token and when i logout, i have the user and the token as undefined. But when i retry login with other user, the useDirectusUser returns last user and not new one. I don't know why but it's a real problem.

PS/ To avoid the problem and have new user, i have to refresh the page.

Implemented the authentification option for static tokens, normal token after login have priority!

Types of changes

• [ ] Bug fix (a non-breaking change which fixes an issue)
• [x] New feature (a non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

• [ ] My change requires a change to the documentation.
• [x] I have updated the documentation accordingly.
• [ ] I have added tests to cover my changes (if not applicable, please state why)

Will close #31 And answer the newest discussion #51

@craigharman @mklueh

some additions to handle autorefresh if token is expired. my tetsts with directus 9.5.2 worked well.

Types of changes

• [ ] Bug fix (a non-breaking change which fixes an issue)
• [x] New feature (a non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Description

Checklist:

• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
• [ ] I have added tests to cover my changes (if not applicable, please state why)

Version

nuxt-directus 3.2.2 nuxt: 3.0.0-rc.13

Steps to reproduce

use the useDirectus methods inside a pinia store...

What is Expected?

for it to work

What is actually happening?

pinia apparently does not have access to the nuxt instance. This is unfortunate as I would mainly like to use useDirectus inside my pinia store. Not sure if this is something you can fix, but wantesd to make really sure that this is not possible or if I'm doing something wrong.

Types of changes

• [ ] Bug fix (a non-breaking change which fixes an issue)
• [ ] New feature (a non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Description

New section with an example on how to use a middleware for auth redirect https://github.com/Intevel/nuxt-directus/issues/8

Checklist:

• [ ] My change requires a change to the documentation.
• [x] I have updated the documentation accordingly.
• [ ] I have added tests to cover my changes (if not applicable, please state why)

Types of changes

• [ ] Bug fix (a non-breaking change which fixes an issue)
• [x] New feature (a non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Description

Added all the endpoints for manipulating collections as per the Directus API You can now list, get (by name), update and delete a collection. Adds a new composable useDirectusCollection.

Checklist:

• [x] My change requires a change to the documentation.
• [x] I have updated the documentation accordingly.
• [x] I have added tests to cover my changes (if not applicable, please state why)

nuxt-directus 1.1.4 nuxt: 3.0.0-27478897.169aa35

Steps to reproduce

1. Create page /login.vue
2. Create page /index.vue and add

definePageMeta({
  middleware: ["auth"]
})

3. Add middleware /middleware/auth.ts

// /middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const user = useDirectusUser()

  if (!user.value) {
    return navigateTo("/login")
  }
})

What is Expected?

Using const { login } = useDirectusAuth(); I should be able to sign in, refresh the page and stay signed in, as user.value is still defined.

What is actually happening?

On refresh, the middleware kicks in again and this time returns user.value as undefined and redirects me to /login. Even though user.value is still defined.

Workaround

Using useDirectusToken()seems to stay defined, and can be used as a workaround for auth middleware.

// /middleware/auth.ts
export default defineNuxtRouteMiddleware((to, from) => {
  const token = useDirectusToken()

  if (!token.value) {
    return navigateTo("/login")
  }
})

The try catch on login always returns data undefined.

There is a method to catch errors generated upstream (400, the account does not exist, 401, credential invalid or another for an server error 404/500)?

Thanks

Types of changes

• [ x ] Bug fix (a non-breaking change which fixes an issue)
• [ x ] New feature (a non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Description

1. Describes different rendering modes, including static site rendering by example.
2. Small typo fix in options.md

Checklist:

• [ ] My change requires a change to the documentation.
• [ x ] I have updated the documentation accordingly.
• [ ] I have added tests to cover my changes (if not applicable, please state why)

Types of changes

• [ ] Bug fix (a non-breaking change which fixes an issue)
• [ x ] New feature (a non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to change)

Description

In the existing useDirectusItems composable, the users collection is not available due to hardcoded URL segment, /items in each request. In the examples, an Articles collection is available with an 'author' attribute, but you're unable to get the author's details with the existing composables. This update adds useDirectusUsers composable to allow access to the /users area in the exact same manner as useDirectusItems. The code is copied from useDirectusItems and modified to match the request and response patterns of the users endpoint.

Checklist:

• [ x ] My change requires a change to the documentation.
• [ x ] I have updated the documentation accordingly.
• [ x ] I have added tests to cover my changes (if not applicable, please state why)

Types of changes

• [ ] Bug fix (a non-breaking change which fixes an issue)
• [ ] New feature (a non-breaking change which adds functionality)
• [x] Breaking change (fix or feature that would cause existing functionality to change)

Description

Besides all changes in https://github.com/Intevel/nuxt-directus/pull/77, this PR changes the usage of most methods in the useDirectusCollections and useDirectusItems in order to provide better typings. By providing a collection ID first (i.e. createItems('news', { items: { title: 'Hi' }} instead of createItems({ collection: 'news', items: { title: 'Hi' }}) we can make TypeScript aware of the correct collection types in the remaining parameters. This makes sure we can type check item data in createItems and updateItem.

In my opinion, this also improves the API, because users have to type less code, e.g. getCollection({ collection: 'news' }) simply becomes getCollection('news').

Checklist:

• [x] My change requires a change to the documentation.
• [x] I have updated the documentation accordingly.
• [ ] I have added tests to cover my changes (if not applicable, please state why)

Types of changes

• [x] Bug fix (a non-breaking change which fixes an issue)
• [x] New feature (a non-breaking change which adds functionality)
• [x] Breaking change (fix or feature that would cause existing functionality to change)

Description

Fixes

This PR fixes some examples in the docs (getCollection and using const instead of var). It also fixes some minor issues, like removing the import for defineNuxtConfig that can be left out of Nuxt 3 modules. Furthermore, it fixes some ESLint warnings, like reordering imports and removing redundant async keywords.

Using pnpm

As many packages in the Vue ecosystem have switched to pnpm, it makes sense to apply that change here as well.

Typed composables changes

Instead of passing the expected return type to every separate composable method, with the changes made in this PR, you can pass along all your Collections to useDirectusCollections and useDirectusItems and all its methods will be typed automatically. This can be seen in action in the playground, which I updated accordingly. For example, when running:

type News = {
  id: number;
  title: string;
  content: string;
  status: string;
};

type Books = {
  id: number;
  title: string;
  content: string;
  status: string;
};

type Collections = {
  news: News;
  books: Books;
};

const { getItems } = useDirectusItems<Collections>();

// 'news' is now automatically typed as 'News[]'
const news = await getItems({
  // Your IDE will now autosuggest 'news' and 'books',
  // as these are the only available collections
  collection: 'news',
  params: {
    filter: {
      content: 'yyeeet',
      title: 'Test1',
    },
  },
})

// 'books' is now automatically typed as { meta: { total_count?: number; filter_count?: number;}; data: Books[]; }
const books = await getItems({
  // Your IDE will now autosuggest 'news' and 'books',
  // as these are the only available collections
  collection: 'books',
  params: {
    // Adding 'meta' will automatically change the return
    // type of the 'getItems' method, because `getItems`
    // now has proper function overloads.
    meta: '*',
  },
})

One thing of importance is that in order to keep it simple with the typings, I removed the possibility of passing a type to methods like getItems directly, like getItems<News>({ collection: 'news' }). But in my opinion, this breaking change is justified because the changes in this PR allow you to type less code.

The return type of useDirectusUser has been updated to align with what the latest version of Directus returns (used to be export type DirectusUser = object | null;). You can also override this by passing your own type to useDirectusUser<MyUserType> and useDirectusAuth<MyUserType>.

Checklist:

• [ ] My change requires a change to the documentation.
• [ ] I have updated the documentation accordingly.
• [ ] I have added tests to cover my changes (if not applicable, please state why)

Actually, none of the examples in the docs include passing a type to any of the composables at all. This would be a big improvement, but is probably unrelated to this PR.

Is your feature request related to a problem? Please describe.

Besides the createUser({ ... }) method, I think there should be an updateUser({ ... }) method that updates the current user.

Describe the solution you'd like

N/A

Describe alternatives you've considered

N/A

Additional context

N/A