{"id":16398075,"url":"https://github.com/becem-gharbi/nuxt-directus","last_synced_at":"2025-07-24T02:38:44.574Z","repository":{"id":65799600,"uuid":"599708392","full_name":"becem-gharbi/nuxt-directus","owner":"becem-gharbi","description":"Unofficial Directus client for Nuxt","archived":false,"fork":false,"pushed_at":"2025-02-23T09:36:36.000Z","size":2687,"stargazers_count":50,"open_issues_count":0,"forks_count":9,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-30T10:06:39.188Z","etag":null,"topics":["directus","graphql","nuxt","realtime","sdk"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/becem-gharbi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"becem-gharbi"}},"created_at":"2023-02-09T18:02:39.000Z","updated_at":"2025-03-29T19:14:33.000Z","dependencies_parsed_at":"2024-02-13T14:42:49.449Z","dependency_job_id":"59512670-f42f-4e7d-bf51-c7f8d9c523dc","html_url":"https://github.com/becem-gharbi/nuxt-directus","commit_stats":{"total_commits":398,"total_committers":5,"mean_commits":79.6,"dds":0.0653266331658291,"last_synced_commit":"03611d5a07a273468076ffb9f223566cf7a46704"},"previous_names":[],"tags_count":72,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/becem-gharbi%2Fnuxt-directus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/becem-gharbi%2Fnuxt-directus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/becem-gharbi%2Fnuxt-directus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/becem-gharbi%2Fnuxt-directus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/becem-gharbi","download_url":"https://codeload.github.com/becem-gharbi/nuxt-directus/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247471517,"owners_count":20944158,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["directus","graphql","nuxt","realtime","sdk"],"created_at":"2024-10-11T05:11:47.053Z","updated_at":"2025-04-06T11:07:34.751Z","avatar_url":"https://github.com/becem-gharbi.png","language":"TypeScript","funding_links":["https://github.com/sponsors/becem-gharbi"],"categories":[],"sub_categories":[],"readme":"## Nuxt Directus\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\nDirectus SDK for Nuxt.\n\n- ✔️ SSR support\n- ✔️ Rest client via `useDirectusRest` composable based on the new [Directus SDK](https://github.com/directus/directus/tree/main/sdk)\n- ✔️ Graphql client based on [Nuxt Apollo](https://github.com/becem-gharbi/nuxt-apollo) module\n- ✔️ Auth handler via `useDirectusAuth` with auto refresh of token and auto redirection.\n- ✔️ Ready to use [starter](https://github.com/becem-gharbi/directus-starter)\n\n## Installation\n\nAdd `@bg-dev/nuxt-directus` dependency to your project\n\n```bash\n# Using npm\nnpm install --save-dev @bg-dev/nuxt-directus\n\n# Using pnpm\npnpm install --save-dev @bg-dev/nuxt-directus\n\n# Using yarn\nyarn add --dev @bg-dev/nuxt-directus\n```\n\n## Setup\n\nAdd `@bg-dev/nuxt-directus` to the `modules` section of `nuxt.config.ts` and set directus options\n\n```js\nexport default defineNuxtConfig({\n  modules: [\"@bg-dev/nuxt-directus\"],\n\n  directus: {\n    rest: {\n      baseUrl: \"http://localhost:8055\", // Directus app base url\n      nuxtBaseUrl: \"http://localhost:3000\", // Nuxt app base url\n    },\n    graphql: {\n      enabled: true,\n      httpEndpoint: \"http://localhost:8055/graphql\",\n      wsEndpoint: \"\", // Omit to disable Websockets\n    },\n    auth: {\n      enabled: true,\n      mode: \"session\", // Auth mode 'session' or 'cookie'\n      enableGlobalAuthMiddleware: false, // Enable auth middleware on every page\n      userFields: [\"*\"], // Select user fields\n      refreshTokenCookieName: \"directus_refresh_token\",\n      sessionTokenCookieName: \"directus_session_token\",\n      loggedInFlagName: \"directus_logged_in\",\n      msRefreshBeforeExpires: 10000,\n      redirect: {\n        login: \"/auth/login\", // Path to redirect when login is required\n        logout: \"/auth/login\", // Path to redirect after logout\n        home: \"/home\", // Path to redirect after successful login\n        resetPassword: \"/auth/reset-password\", // Path to redirect for password reset\n        callback: \"/auth/callback\", // Path to redirect after login with provider\n      },\n    },\n  },\n});\n```\n\nThat's it! You can now use `@bg-dev/nuxt-directus` in your Nuxt app ✨\n\n## REST\n\nThe 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.\nFor better DX, you can get the types definition of your directus project via [directus-extension-generate-types](https://github.com/maltejur/directus-extension-generate-types). The generated `types.ts` file can be used in your Nuxt project via the global `DirectusSchema` type.\n\n```ts\nimport type { CustomDirectusTypes } from \"./types\";\n\ntype DirectusTypes =\n  | \"directus_activity\"\n  | \"directus_collections\"\n  | \"directus_dashboards\"\n  | \"directus_fields\"\n  | \"directus_files\"\n  | \"directus_flows\"\n  | \"directus_folders\"\n  | \"directus_migrations\"\n  | \"directus_notifications\"\n  | \"directus_operations\"\n  | \"directus_panels\"\n  | \"directus_permissions\"\n  | \"directus_presets\"\n  | \"directus_relations\"\n  | \"directus_revisions\"\n  | \"directus_roles\"\n  | \"directus_sessions\"\n  | \"directus_settings\"\n  | \"directus_shares\"\n  | \"directus_translations\"\n  | \"directus_users\"\n  | \"directus_webhooks\"\n  | \"directus_extensions\"\n  | \"directus_versions\";\n\ndeclare global {\n  interface DirectusSchema extends Omit\u003cCustomDirectusTypes, DirectusTypes\u003e {}\n}\n\nexport {};\n```\n\n## Graphql\n\nThe module uses [nuxt-apollo](https://github.com/becem-gharbi/nuxt-apollo) for Graphql data fetching with auto refresh of access token. Please refer to docs for API usage and DX optimizations.\n\nTo use graphql subscription make sure to set:\n\n- The module's auth mode to `cookie`\n- `WEBSOCKETS_ENABLED` env variable to `true`\n- `WEBSOCKETS_GRAPHQL_ENABLED` env variable to `true`\n\n## Auth\n\n\u003e [!IMPORTANT]\n\u003e\n\u003e - When SSR is enabled:\n\u003e   - Directus and Nuxt apps should share the same domain name because cookies's sameSite policy is set to `lax`.\n\u003e   - Please make sure to add `NODE_OPTIONS=--dns-result-order=ipv4first` env variable in order to resolve `localhost` domain on Node +v17.\n\u003e - For SSO login with `cookie` mode, please make sure to set `AUTH_\u003cPROVIDER\u003e_MODE=cookie` env variable on Directus +v10.10.\n\nThe module has `useDirectusAuth` composable for handling authentication.\n\n- `login` login with email/password and redirect to login page\n- `logout` logout, clear states and redirect to logout page\n- `fetchUser` call to refetch and refresh `user` state\n- `loginWithProvider` login with SSO provider and redirect to login page on success and callback page otherwise\n- `requestPasswordReset`\n- `resetPassword`\n\nTo implement a custom logic on user login/logout events, you can use `directus:loggedIn` hook\n\n```js\nexport default defineNuxtPlugin({\n  hooks: {\n    \"directus:loggedIn\": (state) =\u003e {},\n  },\n});\n```\n\nFor protecting page routes, 2 possible approachs can be used:\n\n- Globally enable and locally disable\n\n```js\nenableGlobalAuthMiddleware: true;\n```\n\n```js\ndefinePageMeta({ auth: false });\n```\n\n- Locally enable\n\n```js\ndefinePageMeta({ middleware: \"auth\" }); // Redirects to login path when not loggedIn\n```\n\n```js\ndefinePageMeta({ middleware: \"guest\" }); // Redirects to home path when loggedIn\n```\n\n## License\n\n[MIT License](./LICENSE)\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/@bg-dev/nuxt-directus/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/@bg-dev/nuxt-directus\n[npm-downloads-src]: https://img.shields.io/npm/dt/@bg-dev/nuxt-directus.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/@bg-dev/nuxt-directus\n[license-src]: https://img.shields.io/npm/l/@bg-dev/nuxt-directus.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://npmjs.com/package/@bg-dev/nuxt-directus\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbecem-gharbi%2Fnuxt-directus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbecem-gharbi%2Fnuxt-directus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbecem-gharbi%2Fnuxt-directus/lists"}