Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/directus/examples

Integration Examples with Directus
https://github.com/directus/examples

angular astro blitz blog directus eleventy examples gatsby iles nextjs nuxt react remix svelte vue

Last synced: 7 days ago
JSON representation

Integration Examples with Directus

Host: GitHub
URL: https://github.com/directus/examples
Owner: directus-labs
License: mit
Archived: true
Created: 2021-10-14T13:14:17.000Z (about 3 years ago)
Default Branch: main
Last Pushed: 2024-01-18T13:23:49.000Z (11 months ago)
Last Synced: 2024-12-17T12:52:36.557Z (8 days ago)
Topics: angular, astro, blitz, blog, directus, eleventy, examples, gatsby, iles, nextjs, nuxt, react, remix, svelte, vue
Language: CSS
Homepage: https://directus.io/guides
Size: 20 MB
Stars: 258
Watchers: 11
Forks: 112
Open Issues: 16
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

awesome-directus - Official Examples - Integration examples with Directus. (Examples / Showcases / Personal)

README

        > [!WARNING]

> This repository is unmaintained and without support.

> Please take a look at the [framework guides](https://docs.directus.io/guides/frameworks) in our documentation for step-by-step tutorials on combining Directus and your favorite frameworks.

Directus Examples




    

    

    

    

 


These frontend examples showcase how to integrate [Directus JavaScript SDK](https://docs.directus.io/reference/sdk), GraphQL, or official Directus plugins/modules with other frameworks in order to use [Directus](https://github.com/directus/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](https://directus.cloud/) instance, self hosted, or locally by first running the provided [Directus project](./directus) running first before proceeding with examples.

## 🔌 Integrations

|                                                                      Logo                                                                      | Framework                                                |           Blog Example            |

| :--------------------------------------------------------------------------------------------------------------------------------------------: | -------------------------------------------------------- | :-------------------------------: |

|                                                                                             | **[Angular `v13`](https://github.com/angular/angular)**  | [source](/angular) ^[1] |

|    | **[Astro `v1.0`](https://github.com/withastro/astro)**   |         [source](/astro)          |

|                                                                                               | **[Blitz `v0.45.4`](https://github.com/blitz-js/blitz)** |         [source](/blitz)          |

|                                                                                            | **[Eleventy `v1`](https://github.com/11ty/eleventy)**    |        [source](/eleventy)        |

|                                                                                              | **[Gatsby `v5`](https://github.com/gatsbyjs/gatsby)**    |         [source](/gatsby)         |

|                                                                                                | **[îles `v0.7`](https://github.com/ElMassimo/iles)**     |          [source](/iles)          |

|  | **[Next.js `v13`](https://github.com/vercel/next.js)**   |         [source](/nextjs)         |

|                                                                                             | **[Nuxt.js `v2`](https://github.com/nuxt/nuxt.js)**      |         [source](/nuxtjs)         |

|                                                                                              | **[Nuxt.js `v3`](https://github.com/nuxt/nuxt.js)**      |         [source](/nuxt3)          |

|                                                                                               | **[React `v17`](https://github.com/facebook/react)**     |  [source](/react) ^[1]  |

|    | **[Remix `v1`](https://github.com/remix-run/remix)**     |         [source](/remix)          |

|                                                                                              | **[Svelte `v3`](https://github.com/sveltejs/svelte)**    | [source](/svelte) ^[1]  |

|                                                                                              | **[SvelteKit `beta`](https://github.com/sveltejs/kit)**  |       [source](/sveltekit)        |

|                                                                                                 | **[Vue `v3`](https://github.com/vuejs/core)**            |   [source](/vue) ^[1]   |

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

## 🔗 Links

- ✨ Official Website — [https://directus.io](https://directus.io)

- 📘 Documentation — [https://docs.directus.io](https://docs.directus.io)

- 👥 Community — [GitHub discussions](https://github.com/directus/directus/discussions)

- 🎬 Youtube — [Video tutorials](https://www.youtube.com/c/DirectusVideos)

- 🐦 Twitter — [@directus](https://twitter.com/directus)

- 💬 Chat — [Discord server](https://directus.chat)