Agency OS

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

Introduction

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.

-> View The Demo Site

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

🚧 Installation and Development

Directus - Headless CMS

1 - Register for a Directus Cloud account

https://directus.cloud/register

If you're prefer the self-hosted version, you can find install instructions using Docker here.

2 - Create a new project

Make sure you save your project URL.

3 - Generate a static token for the admin user

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

4 - Apply the Template

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

Nuxt - Frontend

1 - Clone the repo

Use This Template

Or from the terminal

git clone https://github.com/directus-community/agency-os.git your-project

2 - Fix your .env file

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"

3 - Install your dependencies

yarn install

4 - Start the development server

yarn dev

http://localhost:3000

5 - Build for production when you're ready

yarn build

🚢 Deployment

Deploying Nuxt Front End

Please check the official Nuxt Deployment Documentation.

One Click Options

Netlify

Vercel

Deploying Directus

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

⭐ Features

Dynamic Page Builder

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

Dynamic Forms

Dynamic Navigation

Dynamic Social Image Generation

Dark Mode Support

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.

Dev Toolbar

Guest-Author Ready

Content Dashboard

Pre-Built Automations

Deploy Your Site
Generate Social Images
Create Slugs Automatically
Post Approval Notifications

Pre-Built Components

Global Search

Typography

Title
Headline
Prose

Image Gallery

Accordion

Badges

Modals

Dropdown

Alert

Video

Buttons

🧰 Tech Stack

Nuxt

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.

Learn more about Nuxt

Directus

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.

Learn more about Directus

UI

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.

Utilities

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.

💼 Other Resources

Directus Discord – Join over 10k+ developers and community members to ask questions and live discussion around Directus.
Nuxt Discord

👥 Contributors

Bryant Gillespie (@bryantgillespie)

notflip / agency-os