{"id":13650729,"url":"https://github.com/bryantgillespie/nuxt3-directus-starter","last_synced_at":"2025-04-11T17:40:37.773Z","repository":{"id":38679003,"uuid":"475698403","full_name":"bryantgillespie/nuxt3-directus-starter","owner":"bryantgillespie","description":"Nuxt 3 starter for Directus with Tailwind CSS and lots of other goodies","archived":false,"fork":false,"pushed_at":"2023-06-14T04:20:33.000Z","size":8450,"stargazers_count":142,"open_issues_count":11,"forks_count":28,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-04-10T12:42:03.592Z","etag":null,"topics":["directus","nuxt3","tailwindcss"],"latest_commit_sha":null,"homepage":"https://directus-nuxt3-starter.netlify.app/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bryantgillespie.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2022-03-30T03:00:20.000Z","updated_at":"2025-03-21T11:37:06.000Z","dependencies_parsed_at":"2024-01-07T13:43:43.292Z","dependency_job_id":"1d7a8cb5-6ec2-4923-9280-5ed21191deaa","html_url":"https://github.com/bryantgillespie/nuxt3-directus-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryantgillespie%2Fnuxt3-directus-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryantgillespie%2Fnuxt3-directus-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryantgillespie%2Fnuxt3-directus-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bryantgillespie%2Fnuxt3-directus-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bryantgillespie","download_url":"https://codeload.github.com/bryantgillespie/nuxt3-directus-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248451340,"owners_count":21105853,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["directus","nuxt3","tailwindcss"],"created_at":"2024-08-02T02:00:40.146Z","updated_at":"2025-04-11T17:40:37.752Z","avatar_url":"https://github.com/bryantgillespie.png","language":"Vue","funding_links":[],"categories":["Examples / Showcases"],"sub_categories":["Personal"],"readme":"# Nuxt 3 / Directus Starter\n\nOpinionated starter template for Nuxt 3 using Directus 9 as a backend. Develop internal or client applications faster with this batteries-included starter.\n\n**[View The Demo Site](https://directus-nuxt3-starter.netlify.app/)**\n\n**Features**\n\n- Built-in Directus 9 support to use as your backend, API, headless CMS - whatever your use case\n- Tailwind CSS with all plugins, HeadlessUI, and Heroicons (Now Using V2) icon support\n- Authentication and user store already configured for you\n- Ready to use common components like modals, dropdowns, and file upload input\n- Common utilities like relative time and currency formatting so you don't need to include yet another package\n- ESLint and Prettier already configured\n- Dark mode support\n\n## Stack\n\n### Nuxt 3\n\nThe leading Vue framework that handles routing, server side rendering, and more.\n\nBe sure to keep your eye on [their roadmap](https://nuxt.com/docs/community/roadmap) for the latest information.\n\n---\n\n### Directus 9 support via the Directus SDK\n\nIf you're not familiar - Directus is an open data platform backed by a SQL database that allows you to quickly created a ready-to-use backend / API to power your application without writing any code.\n\nFor a smooth experience, the [Directus SDK](https://docs.directus.io/reference/sdk/#javascript-sdk) is already integrated for you and availably globally as a Nuxt plugin.\n\n```vue\n\u003cscript setup\u003e\n// Get the $directus plugin from Nuxt App composable\nconst { $directus } = useNuxtApp()\n\n// Fetch content from Directus\nconst { data } = await $directus.items('your_collection_name').readByQuery({\n      filter: {\n        status: { _eq: 'published' },\n      },\n      limit: 5,\n    })\n\u003c/script\u003e\n```\n\nThere is also an included composable for getting the asset urls for your Directus files. Nuxt 3 auto-imports all your composables within the `/composables` directory so calling this helper is super simple.\n\n```vue\n\u003ctemplate\u003e\n\u003cimg :src=\"fileUrl(file.id)\" /\u003e\n\u003c/template\u003e\n\u003cscript setup\u003e\nconst { fileUrl } = useFiles()\n\nconst file = {\n\tid: 'lkerwfdafaddfgglk3242'\n}\n\u003c/script\u003e\n```\n\nThere are ready to go examples for:\n\n- Authentication\n- Fetching content from your Directus instance\n- Protecting content with Nuxt Middleware\n- Uploading files\n\n---\n\n### Tailwind CSS\n\n#### Primary Color\n\nAll the base components included in the starter use a `primary` class like `class=\"text-primary-600 bg-primary-500\"` for colors to make it simple to change your preferred base color.\n\nJust adjust it within your `tailwind.config.js`\n\n```vue\n// tailwind.config.js\n...\ntheme: {\n    extend: {\n      colors: {\n        primary: colors.violet, // Change this to your preferred Tailwind shade ie colors.yourShade\n        gray: colors.slate,\n      },\n    },\n  },\n...\n```\n\n#### Dark Mode\n\nDark mode is already enabled in the `tailwind.config.js` and all the base components included have full support.\n\nDark mode toggling is provided by [VueUse `useDark` composable](https://vueuse.org/core/usedark/#usedark). And there is an example toggle component you can use.\n\nIf you don't wish to use dark mode, you can simply remove the composable and the `dark:` classes from the components.\n\n#### Tailwind Plugins\n\nAll the official Tailwind Plugins are installed and ready to use as well.\n\n- [Typography](https://tailwindcss.com/docs/typography-plugin)\n- [Forms](https://tailwindcss.com/docs/plugins#forms)\n- [Aspect Ratio](https://github.com/tailwindlabs/tailwindcss-aspect-ratio)\n- [Line Clamp](https://tailwindcss.com/docs/plugins#line-clamp)\n\n---\n\n### Headless UI\n\n[Headless UI ](https://headlessui.dev/) makes it so simple to implement custom components like dropdowns, modals, and select boxes.\n\nAnd there's two include examples that you can use right away.\n\n#### Modals\n\n```vue\n\u003ctemplate\u003e\n  \u003cVButton @click=\"isModalOpen = true\" class=\"mt-2\" variant=\"primary\"\u003e\n    Open Modal\n  \u003c/VButton\u003e\n  \u003cVModal\n    title=\"Sample Modal\"\n    :is-open=\"isModalOpen\"\n    @close=\"isModalOpen = false\"\n  \u003e\n    \u003cdiv class=\"prose dark:prose-invert\"\u003e\n      \u003cp\u003e{{ modalContent }}\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/VModal\u003e\n\u003c/template\u003e\n\u003cscript setup\u003e\nconst isModalOpen = ref(false)\n\u003c/script\u003e\n```\n\n#### Dropdowns\n\n```vue\n\u003ctemplate\u003e\n  \u003cVDropdown\n    button-label=\"Dropdown Menu\"\n    variant=\"primary\"\n    :menu-items=\"dropdownItems\"\n  /\u003e\n\u003c/template\u003e\n\u003cscript setup\u003e\nconst dropdownItems = [\n  {\n    label: 'Console Log',\n    action: () =\u003e {\n      console.log('Dropdown button clicked!')\n    },\n  },\n  {\n    label: 'Visit Protected Page',\n    action: () =\u003e {\n      router.push('/protected-page')\n    },\n  },\n]\n\u003c/script\u003e\n```\n\n---\n\n### Heroicons\n\nIcon support is provided by Heroicons. The `@heroicons/vue` package is installed and configured to work correctly with Vite.\n\nJust import the icon you want in your `\u003cscript setup\u003e` and then call the Icon in your template.\n\n```vue\n\u003ctemplate\u003e\n\u003cCloudArrowUpIcon class=\"w-5 h-5 text-primary\"\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { CloudArrowUpIcon } from '@heroicons/vue/24/outline'\n// use '@heroicons/vue/24/solid' for the solid versions\n\u003c/script\u003e\n```\n\n---\n\n### Pinia\n\nThe template uses [Pinia](https://pinia.vuejs.org/) for stores instead of Vuex. It's much easier to use and less verbose.\n\nThe `auth` store is all setup and ready to go. Using it is also super easy.\n\n```vue\n\u003ctemplate\u003e\n  \u003cp\u003eThe logged-in user is: {{ auth.user }}\u003c/p\u003e\n\u003c/template\u003e\n\u003cscript setup\u003e\n  import { useAuth } from '~~/store/auth'\n  const auth = useAuth()\n\u003c/script\u003e\n```\n\nIf you like destructuring, make sure you use the `storeToRefs` helper from Pinia.\n\n```vue\n\u003cscript setup\u003e\n  import {storeToRefs} from 'pinia' import {useAuth} from '~~/store/auth' const\n  auth = useAuth() const {(isLoggedIn, user)} = storeToRefs(auth)\n\u003c/script\u003e\n```\n\n---\n\n### VueUse\n\n[VueUse](https://vueuse.org/) is already installed and configured so you can just import any of the composables in their library straight away.\n\n---\n\n### Common Utilities\n\nI always end up using these in most of my projects so I've chosen to include them in this starter.\n\n**Time**\n\n/utils/time.js\n\n`getRelativeTime(date)`\nTakes a date string and returns the relative time ie 3 days ago or 5 minutes ago\n\nDefaults to time from now, but you can pass in a second date `getRelativeTime(date, date2)` if you want to get the relative difference between the two.\n\n`getFriendlyDate(date)`\nTakes a date string and returns a nice readable format like: Sat April 2nd, 2022\n\n`greetUser()`\nReturns `Good Morning` , `Good Afternoon`, or `Good Evening` based on the time of day\n\n**Currency**\n\n/utils/currency.js\n\n`formatCurrency(number, {hideZeros: false})`\nTakes a number and outputs a string with the currency symbol and rounded to two decimals. If you want to round to the whole number just pass `hideZeros: true` in the options.\n\n`centsToDollars(cents)`\n`dollarsToCents(dollars)`\n\nThese two are helpful when you are working with third party ecommerce or billing APIs like Stripe.\n\n**Math**\n\n/utils/math.js\n\n`formatPercent(number)`\n\n`percentChange(num1, num2)`\n\n`roundToDecimal(value, decimals)`\n\n**Strings**\n\n/utils/strings.js\n\n`stripHTML(string)`\n\n`truncateString(string)`\n\n## Development\n\n### Directus - Backend\n\n#### 1 - Register for a free Directus Cloud account\n\nhttps://directus.cloud/register\n\nIf you're prefer the self-hosted version, you can find [install instructions here](https://docs.directus.io/getting-started/installation/cli/).\n\n#### 2 - Create a new project\n\nDirectus has a free Community Cloud tier that's perfect for tinkering or their Standard version has a bit more power if you're ready to start a live project.\n\nℹ Note: If you want to re-create the pages functionality from the demo site, follow the next 2 steps. If you're ready get cracking on your own thing, just skip the next two steps and start building out your own collections in Directus.\n\n#### 3 - Create pages collection\n\nWith the following fields:\n\n- title\n- slug\n- content\n- image\n\n![Pages Data Model](./examples/pages-data-model.png)\n\n#### 4 - Set public read permissions for the following collections\n\n- Files\n- Pages\n\n![Public Permissions](./examples/public-permissions.png)\n\n---\n\n### Nuxt - Frontend\n\n#### 1 - Clone the repo\n\n[Use This Template](https://github.com/bryantgillespie/nuxt3-directus-starter/generate)\n\n_Or from the terminal_\n\n```bash\ngit clone https://github.com/bryantgillespie/nuxt3-directus-starter.git your-project\n```\n\n#### 2 - Fix your .env file\n\n- Change the filename `env.example` to `.env`\n- Add the url to your Directus instance\n\nIf you're using Directus Cloud, it should look something like this.\n\n```\nDIRECTUS_URL=\"https://youruniquedomain.directus.app\"\n```\n\n#### 3 - Install your dependencies\n\n```bash\nyarn install\n```\n\n#### 4 - Start the development server\\*\\*\n\nhttp://localhost:3000\n\n```bash\nyarn dev\n```\n\n#### 5 - Remove all the example content\n\nWhen you're ready to tackle your own project instead of the example, just delete the following directories\n\n- `/examples`\n- `/components/Examples`\n- `/public/logos`\n\n#### 6 - Build for production when you're ready\n\n```bash\nyarn build\n```\n\n## Deployment\n\nBe sure to check out the Nuxt 3 official [deployment documentation](https://v3.nuxtjs.org/docs/deployment).\n\n**Netlify**\n\n\u003ca href=\"https://app.netlify.com/start/deploy?repository=https://github.com/bryantgillespie/nuxt3-directus-starter#DIRECTUS_URL=https://youruniqueid.directus.app\"\u003e\u003cimg src=\"https://www.netlify.com/img/deploy/button.svg\" alt=\"Deploy to Netlify\"\u003e\u003c/a\u003e\n\n**Vercel**\n\n\u003ca href=\"https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fbryantgillespie%2Fnuxt3-directus-starter%2F\u0026env=DIRECTUS_URL\u0026demo-title=Directus%20Nuxt%203%20Starter%20\u0026demo-description=Nuxt%203%20starter%20for%20Directus%20with%20Tailwind%20CSS%20and%20lots%20of%20other%20goodies\u0026demo-url=https%3A%2F%2Fdirectus-nuxt3-starter.netlify.app%2F\u0026demo-image=https%3A%2F%2F4bgd2mtg.directus.app%2Fassets%2F0d374f4a-9111-4b4f-90d0-cff45a92a784\"\u003e\u003cimg src=\"https://vercel.com/button\" alt=\"Deploy with Vercel\"/\u003e\u003c/a\u003e\n\n## Other Resources\n\n[**Directus Doc Search**](https://github.com/bryantgillespie/alfred-directus-docs)\n\nIf you're using a Mac and you have [Alfred](https://www.alfredapp.com/) check out my Directus Docs Search workflow for it so that you can quickly and easily search their documentation.\n\n[**Directus Discord**](https://discord.com/invite/directus)\n\n[**Nuxt Discord**](https://discord.com/invite/ps2h6QT)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbryantgillespie%2Fnuxt3-directus-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbryantgillespie%2Fnuxt3-directus-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbryantgillespie%2Fnuxt3-directus-starter/lists"}