Nuxt + Directus

This is a Nuxt module to integrate rstore with Directus directly.

1. Install the @rstore/nuxt-directus module:

npm

npm install @rstore/nuxt-directus

pnpm

pnpm add @rstore/nuxt-directus

2. Go in your Directus project instance with an admin user and create a new Admin Token.

Why the Admin Token is needed?

This Admin Token will be used to automatically retrieve the collections in your Directus instance - then the module will generate from this introspection all of the necessary rstore collections for you.

3. Create an .env entry with your Directus Admin Token:

DIRECTUS_TOKEN=<paste-your-token-here>

4. Configure Nuxt by adding the module and setting up the directus options in your nuxt.config.ts file:

export default defineNuxtConfig({
  modules: [
    '@rstore/nuxt-directus',
  ],

  runtimeConfig: {
    // Server-only
    directusToken: process.env.DIRECTUS_TOKEN,
  },

  rstoreDirectus: {
    url: 'https://your-directus-instance.com', // The URL of your Directus instance
    adminToken: process.env.DIRECTUS_TOKEN, // or use runtime config indirection
  },
})

WARNING

Keep the admin token server-side only. Do not expose it in public runtime config.

5. Now you can use the useStore composable in your components to access the Directus collections:

<script lang="ts" setup>
const store = useStore()

const filter = ref<'all' | 'unfinished' | 'finished'>('all')
const { data: todos } = await store.Todos.query(q => q.many({
  filter: filter.value === 'all'
    ? undefined
    : {
        completed: {
          _eq: filter.value === 'finished',
        },
      },
}))
</script>

In this example, Todos is the Directus collection name exposed on the store API. The query uses standard Directus filter rules, which are also computed client-side because rstore is local-first.

Filtering

You can use the filter option in your queries to filter the data returned from Directus. The filter rules are the same as the ones used in Directus, so you can refer to the Directus documentation for more information.

Some options are not supported just yet:

• Relation filters
• $CURRENT_USER and $CURRENT_ROLE dynamic variables
• $FOLLOW