Featuring authentication, realtime, file management, visual editing and more
npm install nuxt-directus-sdk// nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-directus-sdk'],
})# .env
DIRECTUS_URL=https://your-directus-instance.com
DIRECTUS_ADMIN_TOKEN=your_admin_tokenThat's it! The module handles:
Get started in minutes with full type safety and auto-imports:
<script setup>
// Everything is auto-imported and fully typed!
const { user, login, logout, loggedIn } = useDirectusAuth()
const directus = useDirectus()
// Fetch data with type safety
const { data: posts } = await useAsyncData('posts', () =>
directus.request(readItems('posts', {
fields: ['*'],
limit: 10
})))
// Subscribe to realtime updates
await directus.connect()
const { subscription } = await directus.subscribe('posts')
</script>
<template>
<div>
<!-- Authentication state -->
<div v-if="loggedIn">
<p>Welcome, {{ user.email }}</p>
<button @click="logout()">
Logout
</button>
</div>
<!-- Visual editing in preview mode -->
<div v-for="post in posts" :key="post.id">
<DirectusVisualEditor collection="posts" :item="post.id">
<h2>{{ post.title }}</h2>
<p>{{ post.content }}</p>
</DirectusVisualEditor>
</div>
</div>
</template>MIT License - Free to use in personal and commercial projects