Home

Awesome

[!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

LogoFrameworkBlog Example
<img height="36" src="./shared/logo/angular.svg" />Angular v13source <sup>[1]</sup>
<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.0source
<img height="32" src="./shared/logo/blitz.svg" />Blitz v0.45.4source
<img height="32" src="./shared/logo/eleventy.svg" />Eleventy v1source
<img height="32" src="./shared/logo/gatsby.svg" />Gatsby v5source
<img height="34" src="./shared/logo/iles.svg" />îles v0.7source
<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 v13source
<img height="28" src="./shared/logo/nuxtjs2.svg" />Nuxt.js v2source
<img height="36" src="./shared/logo/nuxtjs.svg" />Nuxt.js v3source
<img height="40" src="./shared/logo/react.svg" />React v17source <sup>[1]</sup>
<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 v1source
<img height="32" src="./shared/logo/svelte.svg" />Svelte v3source <sup>[1]</sup>
<img height="32" src="./shared/logo/svelte.svg" />SvelteKit betasource
<img height="32" src="./shared/logo/vue.svg" />Vue v3source <sup>[1]</sup>

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

🔗 Links