Directus Examples

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
	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.

🔗 Links

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