@nuxtus/nuxtus 1.0.5 → 1.0.6

package/README.md

@@ -1,11 +1,19 @@
 # Nuxtus
 
-A website w/ CMS boilerplate using [Directus](https://directus.io) for backend CMS and [Nuxt](https://nuxtjs.org) (w/ Tailwind CSS) for frontend.
+A website w/ CMS boilerplate using [Directus](https://directus.io) for backend CMS and [Nuxt](https://nuxtjs.org) (w/ Tailwind CSS) for frontend that can also **automagically** create pages when you create Directus collections.
+
+
+https://user-images.githubusercontent.com/324026/175020548-57ee94b3-dee4-4b12-a8c8-6c0f1a94fab4.mov
+
 
 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]("https://github.com/nuxtus/cli") which provides a command line interface for quickly creating multiple index/detail pages from any Directus collections.
 
+https://user-images.githubusercontent.com/324026/175452950-46bd51a6-3fd9-441d-80fd-c6bbfaa01929.mp4
+
+## Features
+
 - [Directus](https://directus.io)
 - [Nuxt](https://nuxtjs.org)
   - [Tailwind CSS](https://tailwindcss.nuxtjs.org/)
@@ -49,7 +57,27 @@ From inside your project folder:
 $ npm start
 ```
 
-### Creating pages
+### Automatically creating pages
+
+**Nuxtus automagically creates Nuxt pages as soon as you create a new Directus collection!**
+
+Nuxtus includes a POST endpoint located /api/directus/collection that will run in development. If you used `npx create-nuxtus` to create your Nuxtus project and selected "yes" to automatically creating pages from Directus then this is already configured in Directus for you.
+
+If not, create a new Flow in Directus as follows:
+
+#### Trigger
+
+Type: action
+Scope: items.create
+Collections: directus_collections
+
+#### Webhook / Request URL
+
+URL: http://localhost:3000/api/directus/collection
+Method: POST
+Request Body: `{{$last.payload}}`
+
+### Manually creating pages
 
 Nuxtus includes Nuxtus CLI which will automatically generate listing and view pages of any Directus collections. To use it:
 
@@ -64,6 +92,8 @@ For more details on [Nuxtus CLI](https://github.com/nuxtus/cli) click [here](htt
 
 By default Directus is configured to accept CORS from any origin. Nuxtus suggests modifying this for your production deployment.
 
+If you chose to install, remove the Nuxtus hook extension by deleting the folder `server/extensions/hooks/nuxtus-hook` from your project.
+
 ## 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](#directus).

package/TODO

@@ -11,5 +11,7 @@ Todo:
   ✔ Check node version for compatibility in create-app.js @done(22-06-16 22:07)
   ☐ Look at https://renovatebot.com/
   ☐ Documentation: https://docusaurus.io/ or https://vuepress.vuejs.org/
-  ☐ Look into using a Directus hook to automatically generate the Nuxt pages!
+  ✔ Create Directus flow via Directus API @done(22-07-04 17:46)
   ☐ Add ability to automatically update .env for none SQLite databases
+  ☐ Can I HMR when adding new pages/routes?
+  ☐ Add all questions in create-app to start of process for better user flow

package/changelog.md

@@ -1,5 +1,11 @@
 # Nuxtus
 
+## 1.0.6
+
+- Add server api endpoint to be used as Directus webhook
+- Update to Directus 9.13.0
+- Update readme with details on using Collections hook
+
 ## 1.0.5
 
 - Update nuxtus-cli to v1.0.3

package/client/package.json

@@ -9,8 +9,9 @@
   "devDependencies": {
     "@nuxtjs/google-fonts": "^1.3.0",
     "@nuxtjs/tailwindcss": "^5.0.4",
-    "nuxt": "3.0.0-rc.4",
-    "@nuxtus/cli": "^1.0.3"
+    "@nuxtus/cli": "^1.0.5",
+    "@nuxtus/generator": "1.0.0",
+    "nuxt": "3.0.0-rc.4"
   },
   "dependencies": {
     "@headlessui/vue": "^1.6.1",

package/client/server/api/directus/collection.post.ts

@@ -0,0 +1,12 @@
+import { createPage } from "@nuxtus/generator"
+
+export default defineEventHandler(async (event) => {
+	if (process.env.NODE_ENV !== "production") {
+		const body = await useBody(event)
+		// TODO: Wrap in try/catch and return HTTP error if errors
+		createPage(body.collection, body.singleton)
+		return {
+			api: "ok",
+		}
+	}
+})

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@nuxtus/nuxtus",
 	"description": "Directus/Nuxt boilerplate with Tailwind CSS.",
-	"version": "1.0.5",
+	"version": "1.0.6",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/nuxtus/nuxtus.git"

package/server/package.json

@@ -11,7 +11,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "directus": "^9.10.0",
+    "directus": "^9.13.0",
     "sqlite3": "^5.0.8"
   }
 }