Examples

[!WARNING] This repository is unmaintained and without support. Please take a look at the framework guides in our documentation for step-by-step tutorials on combining Directus and your favorite frameworks.

<h1 align="center">Directus Examples</h1> <p align="center"> <a href="https://directus.io"><img src="https://img.shields.io/static/v1?style=flat-square&logo=Directus&logoColor=white&label=Directus&message=directus.io&color=4466ff" alt="Directus Website" /></a> <a href="https://docs.directus.io"><img src="https://img.shields.io/static/v1?style=flat-square&label=Docs&message=docs.directus.io&color=05ba8f" alt="Directus Website" /></a> <a href="./LICENSE"><img src="https://img.shields.io/static/v1?style=flat-square&label=License&message=MIT&color=62a4e2" alt="License"></a> <a href="https://directus.chat"><img src="https://img.shields.io/static/v1?style=flat-square&logo=Discord&logoColor=white&label=Discord&message=Join%20us&color=5865f2" alt="Directus Discord Server" /></a> </p>

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!

📌 Prerequisites

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.

🔌 Integrations

| Logo | Framework | Blog Example | | :--------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------- | :-------------------------------: | | <img height="36" src="./shared/logo/angular.svg" /> | Angular v13 | source ^[1] | | <img height="32" src="./shared/logo/astro.svg#gh-light-mode-only" /><img height="32" src="./shared/logo/astro-dark.svg#gh-dark-mode-only" /> | Astro v1.0 | source | | <img height="32" src="./shared/logo/blitz.svg" /> | Blitz v0.45.4 | source | | <img height="32" src="./shared/logo/eleventy.svg" /> | Eleventy v1 | source | | <img height="32" src="./shared/logo/gatsby.svg" /> | Gatsby v5 | source | | <img height="34" src="./shared/logo/iles.svg" /> | îles v0.7 | source | | <img height="32" src="./shared/logo/nextjs.svg#gh-light-mode-only" /><img height="32" src="./shared/logo/nextjs-dark.svg#gh-dark-mode-only" /> | Next.js v13 | source | | <img height="28" src="./shared/logo/nuxtjs2.svg" /> | Nuxt.js v2 | source | | <img height="36" src="./shared/logo/nuxtjs.svg" /> | Nuxt.js v3 | source | | <img height="40" src="./shared/logo/react.svg" /> | React v17 | source ^[1] | | <img height="32" src="./shared/logo/remix.svg#gh-light-mode-only" /><img height="32" src="./shared/logo/remix-dark.svg#gh-dark-mode-only" /> | Remix v1 | source | | <img height="32" src="./shared/logo/svelte.svg" /> | Svelte v3 | source ^[1] | | <img height="32" src="./shared/logo/svelte.svg" /> | SvelteKit beta | source | | <img height="32" src="./shared/logo/vue.svg" /> | Vue v3 | source ^[1] |

[1]: These additionally uses full read permissions on articles & directus_users in Public role for simplicity sake.

🔗 Links

• ✨ Official Website — https://directus.io
• 📘 Documentation — https://docs.directus.io
• 👥 Community — GitHub discussions
• 🎬 Youtube — Video tutorials
• 🐦 Twitter — @directus
• 💬 Chat — Discord server