Fully complete, opinionated agency website template. Nuxt 3 Frontend + Directus for Headless CMS / Backend.
Brought to you by partnership magic β¨ between Directus and NuxtLabs.
Introduction Β· π§ Installation and Development Β· π’ Deployment Β· β Features Β· π§° Tech Stack Β· πΌ Other Resources Β· π₯ Contributors
Spin up a beautiful site for your agency or freelancing business in minutes. Or use Agency OS as the foundation for your next client project.
Features
- Complete Nuxt 3 website example
- Built-in Directus - Headless CMS support
- Tailwind CSS and HeadlessUI
- Dynamic Page Builder (M2A Interface) within Directus
- Blog posts and categories
- Projects pages
- Dynamic form generation with validation
- Dynamic social image generation
- SEO support
- Global search component and API route
- Redirects module
- Ready to use common components like modals, dropdowns, and file upload input
- Common utilities so you don't need to include yet another package
- Easy SVG Icons using Nuxt Icon module
- Google Fonts support
- ESLint and Prettier already configured
- Full Dark mode support
- Written in Typescript
https://directus.cloud/register
If you're prefer the self-hosted version, you can find install instructions using Docker here.
Make sure you save your project URL.
You need the static token to seed the project.
- Go to the User Directory
- Choose the Adminstrative User
- Scroll down to the Token field
- Generate token and copy it
- Save the user (don't forget to save!)
Open your terminal run the following command and simply follow the prompts.
npx directus-template-cli apply
- Choose the
Agency OS
template. - Paste the URL to your Directus instance
- Paste your Admin user static token
- Wait for script to finish
Or from the terminal
git clone https://github.com/directus-community/agency-os.git your-project
- Change the filename
env.example
to.env
- Add the url to your Directus instance
- Add the static token for your admin user you generated above
If you're using Directus Cloud, it should look something like this.
DIRECTUS_URL="https://youruniquedomain.directus.app"
DIRECTUS_ADMIN_TOKEN="your_admin_static_token_here"
If you're using the self hosted version, it should look something like this.
DIRECTUS_URL="http://localhost:8055"
DIRECTUS_ADMIN_TOKEN="your_admin_static_token_here"
yarn install
yarn dev
yarn build
Please check the official Nuxt Deployment Documentation.
Netlify
Vercel
If you don't want to mess with DevOps or spinning up servers, you can spin up a new project on Directus Cloud in about 90 seconds.
If you prefer self-hosting, Docker is the recommended way to deploy Directus. Please check the official Directus Docker Guide
Includes 15 ready-to-go page blocks
- Hero
- Columns
- FAQs
- Call To Action
- Form
- Card Group
- Logo Cloud
- Rich Text
- Quote
- Steps
- Gallery
- Team
- Testimonial Slider
- Video
- Raw HTML
Agency OS has full dark mode support.
Dark mode is already enabled in the tailwind.config.js
and all the base components included have full support.
Dark mode toggling is provided by VueUse useDark
composable. And there is an example toggle component you can use.
If you don't wish to use dark mode, you can simply remove the composable and the dark:
classes from the components.
- Deploy Your Site
- Generate Social Images
- Create Slugs Automatically
- Post Approval Notifications
Global Search
Typography
- Title
- Headline
- Prose
Image Gallery
Accordion
Badges
Modals
Dropdown
Alert
Video
Buttons
Build your next Vue.js application with confidence using Nuxt. An open source framework under MIT license that makes web development simple and powerful. The leading Vue framework that handles routing, server side rendering, and more.
Directus is a headless CMS that instantly turns your SQL database into REST and GraphQL APIs and gives you a beautiful, intuitive no-code app to manage all your content and data. But it's also more than just a headless CMS. Itβs an open data platform that has all the tools you need for creating, managing, serving, visualizing, and even automating your data for your next web, mobile, or digital project.
For a smooth experience, the Directus SDK is already integrated for you and availably globally as a Nuxt plugin.
- Tailwind CSS β Utility-first CSS framework that allows you to rapidly build sites and maintain consistency across team members. There are several Tailwind Plugins installed and ready to use as well β Typography and Forms.
- Headless UI β Completely unstyled, fully accessible UI components.
- FormKit β Form library for Vue that saves you hours of time by simplifying form creation. Includes error handling, validation, theming, and even generation from a schema out of the box.
- Nuxt Icon - Adds
<Icon>
component that allows you use tons of icons. See available icons here.
- VueUse β Collection of Vue Composition Utilities. Already installed and configured so you can just import any of the composables in their library straight away.
- VueUse Motion β Composables putting your components in motion. Makes it easy to provide tasteful animations with less effort.
- Directus Discord β Join over 10k+ developers and community members to ask questions and live discussion around Directus.
- Nuxt Discord
- Bryant Gillespie (@bryantgillespie)