Awesome

<a href="https://directus.io" target="_blank"> <img alt="Agency OS - Complete Nuxt3 + Directus project" src="./public/logos/agencyos.png"> <h1 align="center">AgencyOS</h1> </a> AgencyOS is everything you need to get your agency off the ground, or improve tooling for your existing company. Nuxt 3 Website / Application + Directus Backend. Brought to you by partnership magic ✨ between <a href="https://directus.io" target="_blank">Directus</a> and <a href="https://nuxtlabs.com" target="_blank">NuxtLabs</a>. <a href="#introduction">Introduction</a> · <a href="#features">⭐ Features</a> · <a href="#installation-and-development">🚧 Installation and Development</a> · <a href="#deployment">🚢 Deployment</a> · <a href="#-tech-stack">🧰 Tech Stack</a> · <a href="#community-help">🛟 Community Help</a> · <a href="#%EF%B8%8F-contributing">❤️ Contributing</a>

Introduction

One of the easiest parts of running a successful digital agency is doing the actual work. I mean - who doesn’t love to put their head down to collaborate, design, and build amazing stuff for clients?

The hard bits are everything else that goes along with that – managing large projects with tons of moving pieces, communicating with clients to properly manage expectations, ensuring you’re paid on time, and more.

When every billable hour counts, you don’t have the time to build your own tools from scratch. And you shouldn’t be forced to settle for off-the-shelf tech that falls short of your preferred workflow.

AgencyOS is the open source operating system to help you run (or start) your digital agency. It’s built on open source tools (Nuxt and Directus) and designed to be 100% hackable so you can build YOUR solution, YOUR project management app, YOUR agency’s operating system – in record time.

Why?

Quite a few folks on the Directus core team have experience running agencies and we know it’s not all rainbows and sunshine. We wanted to build an tool that our agency partners (and any other agency) would get a lot of value from. It was also created as a complete example to showcase the power and flexibility of Directus as a platform to rapidly build your own apps and tools.

Getting Started

⭐ Features

Website

When you’re hard at work delivering for clients - your own site tends to suffer. AgencyOS includes beautiful website template that’s easily customizable and already integrated with an easy-to-use headless CMS.

It’s not a starter template. It’s a complete website project for you customize or inspire you to build an even better solution.

Dynamic page builder with live preview
Blog posts and categories
Dynamic form generation with validation
Dynamic OG image generation
Full SEO support out of the box – (meta tags, sitemap, redirects, JSON-LD, and more)
Global search functionality
Common utilities so you don't need to include yet another package
Google Fonts support
ESLint and Prettier pre-configured
Full dark mode support
Themeable with easy config file

CRM / Project Tracker

Maintaining important client relationships doesn’t just fall to the sales team. So why maintain separate project management and CRM tools? AgencyOS includes a completely customizable CRM so you can work the way you want.

Organizations and contacts
Sales pipeline and activities
Dynamic project proposal builder
Project and task management
Customizable project templates
Invoicing and expense tracking
Customize and build your own dashboards without writing code
Automate processes using Directus Flows

Client Portal

Communication is probably the biggest driver of project success. With AgencyOS’s private client portal - you can insure your clients stay up to date and even hold them accountable for delivering the files and information you need to complete their project

Private authenticated portal for clients to self-serve
Clients can view their projects, tasks, and files
Clients can pay invoices through Stripe
Assign tasks to clients as part of project templates

🚧 Installation and Development

There are two main pieces to AgencyOS - the backend and APIs powered by Directus and the frontend website and application powered by Nuxt.

🐰 Directus - Backend + Headless CMS

1 - Create a Directus project

There are two ways you can quickly setup a Directus project to use for AgencyOS.

1a - Register for a Directus Cloud account

https://directus.cloud/register

This is the easy button. You don’t have to mess with Docker or working out how to deploy a Directus instance at AWS, Digital Ocean, or similar hosts. A couple of clicks and in less than 2 minutes you’ll have a ready to go Directus project.

Directus offers a 14 day free trial for Cloud projects which is plenty of time to give AgencyOS a spin. Note: After the 14 day trial you will need to pay for the service. Consult the Directus pricing page for the latest pricing information.

1b - Self Host a Directus Instance

If you're prefer to self-host Directus, we highly recommend you do so with Docker.

Important Note: This is a free and open source community release. Therefore, we cannot provide support for self-hosted instances WITHOUT an Enterprise Self-Hosted license or formal support agreement. Learn more and contact our team for details on Enterprise Self-Hosted.

You’ll find a docker-compose.yaml inside the repo that you can use to quickly spin up a local instance of Directus to test with. You should have Docker installed and running on your machine first. You can download it here.

PostgreSQL is the tested and preferred database vendor for this project. The project has been tested and verified to work against the docker-compose.yaml file included in the repo. Directus does support many different SQL database vendors, but we ONLY test this project against PostgreSQL.

# Navigate to the .directus directory
$ cd .directus

# Run docker compose
$ docker compose up

# Docker does it's thing and your Directus project will be available at http://localhost:8055/ or http://0.0.0.0:8055/

You can find more install instructions using Docker here on the Directus documentation.

For deploying the project live, please see the Deployment section.

2 - Generate a static token for the admin user

You need the static token to seed the project.

Go to the User Directory
Choose the Administrative User
Scroll down to the Token field
Generate token and copy it
Save the user (do NOT forget to save because you’ll get an error that shows Invalid token!)

3 - Apply the AgencyOS Template

Open your terminal, run the following command, and simply follow the prompts.

npx directus-template-cli@latest apply

Using the @latest tag ensures you download the most up to date version of our templates - in case you've ran the command previously.

Choose the Agency OS template.
Paste the URL to your Directus instance
Paste your Admin user static token
Wait for script to finish

You can learn more about the Directus Template CLI tool here. Note: It can take a few minutes for the template script to run if you’re using a remotely hosted Directus instance.

⛰️ Nuxt - Frontend

For your website and client portal, AgencyOS uses Nuxt as the frontend framework of choice.

1 - Clone the repo

Use This Template

Or from the terminal

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

Navigate to the project

cd 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

Your .env file should look similar to this.

# Directus Setup
DIRECTUS_URL="https://your-instance.directus.app"
DIRECTUS_SERVER_TOKEN="your_directus_server_token_for_server_only_routes"
SITE_URL="http://localhost:3000"

# Stripe Setup (If you want to allow payments within the portal)
STRIPE_SECRET_KEY=sk_test_xxxxxxxxxxxxxxx
STRIPE_PUBLISHABLE_KEY=pk_xxxxxxxxxxxxxxx
STRIPE_WEBHOOK_SECRET=whsec_xxxxxxxxxxxxxxx

3 - Install your dependencies

pnpm i

4 - Start the development server

pnpm dev

http://localhost:3000

5 - Build for production when you're ready

pnpm build

🚢 Deployment

Deploying Nuxt - Frontend

Please check the official Nuxt Deployment Documentation for the supported providers. Here’s a few of the more popular hosts that work well with Nuxt.

One Click Options

Note: Vercel is the recommended deployment target for AgencyOS at the moment because of a few memory issues with the build process on Netlify.

Vercel

Netlify

Deploying Directus - Backend

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

Resources for Self Hosting Directus

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

Learn more about Directus

UI

Nuxt UI - Fully styled and customizable components for Nuxt. Nuxt UI is the official UI component library for Nuxt.
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.

🛟 Community Help

For community help or support, please see the Directus Discord server.

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

❤️ Contributing

AgencyOS is a community driven project so we'd love to have your contributions.

Here's how you can contribute:

Open an issue if you believe you've encountered a bug.
Make a pull request to add new features/make quality-of-life improvements/fix bugs.

🙏 Thanks To

AgencyOS was created by Bryant Gillespie (@bryantgillespie). But big thank yous are owed to...

@rijkvanzanten and @benhaynes for building Directus and including me on the journey.
@atinux and @alexchopin for creating the Nuxt framework.
@intevel and @becem-gharbi for each of their separate nuxt-directus modules which served as source of inspiration.