@bg-dev/nuxt-directus
v2.4.5
Published
[![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href] [![License][license-src]][license-href] [![Nuxt][nuxt-src]][nuxt-href]
Downloads
304
Readme
Nuxt Directus
Directus SDK for Nuxt.
- ✔️ SSR support
- ✔️ Rest client via
useDirectusRest
composable based on the new Directus SDK - ✔️ Graphql client based on Nuxt Apollo module
- ✔️ Auth handler via
useDirectusAuth
with auto refresh of token and auto redirection. - ✔️ Ready to use starter
Installation
Add @bg-dev/nuxt-directus
dependency to your project
# Using npm
npm install --save-dev @bg-dev/nuxt-directus
# Using pnpm
pnpm install --save-dev @bg-dev/nuxt-directus
# Using yarn
yarn add --dev @bg-dev/nuxt-directus
Setup
Add @bg-dev/nuxt-directus
to the modules
section of nuxt.config.ts
and set directus options
export default defineNuxtConfig({
modules: ["@bg-dev/nuxt-directus"],
directus: {
rest: {
baseUrl: "http://localhost:8055", // Directus app base url
nuxtBaseUrl: "http://localhost:3000", // Nuxt app base url
},
graphql: {
enabled: true,
httpEndpoint: "http://localhost:8055/graphql",
wsEndpoint: "", // Omit to disable Websockets
},
auth: {
enabled: true,
mode: "session", // Auth mode 'session' or 'cookie'
enableGlobalAuthMiddleware: false, // Enable auth middleware on every page
userFields: ["*"], // Select user fields
refreshTokenCookieName: "directus_refresh_token",
sessionTokenCookieName: "directus_session_token",
loggedInFlagName: "directus_logged_in",
msRefreshBeforeExpires: 10000,
redirect: {
login: "/auth/login", // Path to redirect when login is required
logout: "/auth/login", // Path to redirect after logout
home: "/home", // Path to redirect after successful login
resetPassword: "/auth/reset-password", // Path to redirect for password reset
callback: "/auth/callback", // Path to redirect after login with provider
},
},
},
});
That's it! You can now use @bg-dev/nuxt-directus
in your Nuxt app ✨
REST
The module has useDirectusRest
composable for data fetching with REST API. It is a wrapper around Directus SDK request
API with auto refresh of access token and auto-imported commands.
For better DX, you can get the types definition of your directus project via directus-extension-generate-types. The generated types.ts
file can be used in your Nuxt project via the global DirectusSchema
type.
import type { CustomDirectusTypes } from "./types";
type DirectusTypes =
| "directus_activity"
| "directus_collections"
| "directus_dashboards"
| "directus_fields"
| "directus_files"
| "directus_flows"
| "directus_folders"
| "directus_migrations"
| "directus_notifications"
| "directus_operations"
| "directus_panels"
| "directus_permissions"
| "directus_presets"
| "directus_relations"
| "directus_revisions"
| "directus_roles"
| "directus_sessions"
| "directus_settings"
| "directus_shares"
| "directus_translations"
| "directus_users"
| "directus_webhooks"
| "directus_extensions"
| "directus_versions";
declare global {
interface DirectusSchema extends Omit<CustomDirectusTypes, DirectusTypes> {}
}
export {};
Graphql
The module uses nuxt-apollo for Graphql data fetching with auto refresh of access token. Please refer to docs for API usage and DX optimizations.
To use graphql subscription make sure to set:
- The module's auth mode to
cookie
WEBSOCKETS_ENABLED
env variable totrue
WEBSOCKETS_GRAPHQL_ENABLED
env variable totrue
Auth
[!IMPORTANT]
- Directus and Nuxt apps should share the same domain name because cookies's sameSite policy is set to
lax
.- Make sure to add
NODE_OPTIONS=--dns-result-order=ipv4first
env variable in order to resolvelocalhost
domain on Node +v17.- For SSO login with
cookie
mode please make sure to setAUTH_<PROVIDER>_MODE=cookie
env variable on Directus +v10.10.
The module has useDirectusAuth
composable for handling authentication.
login
login with email/password and redirect to login pagelogout
logout, clear states and redirect to logout pagefetchUser
call to refetch and refreshuser
stateloginWithProvider
login with SSO provider and redirect to login page on success and callback page otherwiserequestPasswordReset
resetPassword
To implement a custom logic on user login/logout events, you can use directus:loggedIn
hook
export default defineNuxtPlugin({
hooks: {
"directus:loggedIn": (state) => {},
},
});
For protecting page routes, 2 possible approachs can be used:
- Globally enable and locally disable
enableGlobalAuthMiddleware: true;
definePageMeta({ auth: false });
- Locally enable
definePageMeta({ middleware: "auth" }); // Redirects to login path when not loggedIn
definePageMeta({ middleware: "guest" }); // Redirects to home path when loggedIn