These frontend examples showcase how to integrate Directus JavaScript SDK, GraphQL, or official Directus plugins/modules with other frameworks in order to use Directus as the data source.
ℹ These examples were created for demonstration purposes. They are not intended to be production ready, but PRs that address this and any other issues are always welcome!
These examples are frontend only, you will still need a Directus instance running to use them, this can be a Cloud instance, self hosted, or locally by first running the provided Directus project running first before proceeding with examples.
| Logo | Framework | Blog Example |
|---|---|---|
 |
Angular v13 |
source [1] |
  |
Astro v1.0 |
source |
 |
Blitz v0.45.4 |
source |
 |
Eleventy v1 |
source |
 |
Gatsby v5 |
source |
 |
îles v0.7 |
source |
  |
Next.js v13 |
source |
 |
Nuxt.js v2 |
source |
 |
Nuxt.js v3 |
source |
 |
React v17 |
source [1] |
  |
Remix v1 |
source |
 |
Svelte v3 |
source [1] |
|
SvelteKit beta |
source |
 |
Vue v3 |
source [1] |
[1]: These additionally uses full read permissions on articles & directus_users in Public role for simplicity sake.
- ✨ Official Website — https://directus.io
- 📘 Documentation — https://docs.directus.io
- 👥 Community — GitHub discussions
- 🎬 Youtube — Video tutorials
- 🐦 Twitter — @directus
- 💬 Chat — Discord server