Nuxtus
A website w/ CMS boilerplate using Directus for backend CMS and Nuxt (w/ Tailwind CSS) for frontend.
The purpose of this template is to be a quick-start for developing a website with Nuxt.js using Directus as the backend. The end result can be a static website or dynamically pull data from Directus depending on your preference.
It also includes nuxtus/cli which provides a command line interface for quickly creating multiple index/detail pages from any Directus collections.
Quickstart (preferred)
$ npx create-nuxtus app-name
Replace
app-name
with the name of your website or application.
Nuxtus will automatically migrate the Directus DB if you are using SQLite. Otherwise follow the directions below to manually configure your database and get started.
Your project will contain 2 folders server (Directus) and client (Nuxt).
Directus
By default Nuxtus uses an SQLite database. If you wish to use an alternative database simply edit the server/.env
file as suggested in the Directus documentation then follow the steps below.
$ cd server
# From within the root of the project
$ npm run cli bootstrap
Nuxt
No set up for Nuxt is required.
Starting Nuxtus
From inside your project folder:
$ npm start
Creating pages
Nuxtus includes Nuxtus CLI which will automatically generate listing and view pages of any Directus collections. To use it:
- Log in to Directus (http://0.0.0.0:8055/admin/login) and create a collection
- From the client folder (
cd client
) runnuxtus create
and follow the prompts
Pages will be created for each collection you select in clients/pages
. These are a starting point for you to customise.
For more details on Nuxtus CLI click here.
Production deployment
By default Directus is configured to accept CORS from any origin. Nuxtus suggests modifying this for your production deployment.
Manual setup
Clone this repo onto your local machine, remove the remote git origin and add a new one. Then follow the manual install instructions.
For further instructions visit
[http://localhost:3000](http://localhost:3000)