@nuxtus/nuxtus 1.0.4 → 1.1.0

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/)
@@ -13,6 +21,7 @@ It also includes [nuxtus/cli]("https://github.com/nuxtus/cli") which provides a
   - [HeroIcons](https://heroicons.com/)
   - [Google Fonts](https://github.com/nuxt-community/google-fonts-module)
   - [Nuxtus CLI](https://github.com/nuxtus/cli)
+  - Typescript types
 
 ## Quickstart (preferred)
 
@@ -22,7 +31,7 @@ $ npx create-nuxtus app-name
 
 > Replace `app-name` with the name of your website or application.
 
-Nuxtus will automatically start Directus and Nuxt in development mode if you are using SQLite. Otherwise follow the directions below to manually configure your database and get started.
+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).
 
@@ -49,9 +58,24 @@ 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.
+
+Collections are also typed automatically, simply prepend "Items" to the collection name as per below:
+
+```typescript
+import { components } from "../interfaces/nuxtus";
+type Test = components["schemas"]["ItemsTest"];
+```
+
+> Because OpenAPI schemas may have invalid TypeScript characters as names, the square brackets are a safe way to access every property.
 
-Nuxtus includes Nuxtus CLI which will automatically generate listing and view pages of any Directus collections. To use it:
+### Manually creating pages
+
+Nuxtus includes Nuxtus CLI which will generate listing and view pages of any Directus collection on demand. To use it:
 
 1. Log in to Directus ([http://0.0.0.0:8055/admin/login](http://0.0.0.0:8055/admin/login)) and [create a collection](https://docs.directus.io/configuration/data-model/#creating-a-collection)
 2. From the client folder (`cd client`) run `nuxtus create` and follow the prompts
@@ -64,10 +88,19 @@ 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).
 
 > For further instructions visit `[http://localhost:3000](http://localhost:3000)`
 
+## Acknowledgements
+
+Nuxtus wouldn't be possible without the following amazing technologies:
 
+[Directus](https://directus.io)
+[Nuxt](https://nuxt.js.org)
+[Nuxt-Directus](https://nuxt-directus.netlify.app/)
+[OpenApi Typescript](https://www.npmjs.com/package/openapi-typescript)

package/TODO

@@ -7,8 +7,19 @@ Todo:
   ✔ Set up [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) @done(22-06-16 20:23)
   ☐ Setup [semantic release](https://github.com/semantic-release/semantic-release)
   ✔ Add interactive/pretty CLI for create-app.js @done(22-06-16 20:23)
-  ☐ Query database use (via interactive shell) in create-app.js
+  ✔ Query database use (via interactive shell) in create-app.js @done(22-06-21 20:26)
   ✔ 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? - requires Nuxt to fix bug
+  ☐ Add all questions in create-app to start of process for better user flow
+  ☐ Allow use of different ports/URLs for Directus and Nuxt (currently hard-coded)
+  ☐ Add "types" to cli to update types from Directus when not using hook
+  ☐ Make opening browser window on start optional using npm run start
+  ☐ Make sure separate packages can be used without Nuxt Boilerplate if required
+  ☐ Console.log messages from directus extension should be formatted like other directus messages
+  ☐ When adding a new collection the new page triggers a nuxt restart then directus tries to send a field.create which fails. We get around this by getting the create field first but Directus still returns a 404 for the second request.
+  ✔ interfaces/nuxtus.ts should not be in .gitignore other than during my development (remove in create-nuxtus?) @done(22-07-11 12:52)
+  ☐ Add test coverage

package/changelog.md

@@ -1,5 +1,21 @@
 # Nuxtus
 
+## 1.1.0
+
+- Automatically generate types from collections
+- Tidy up server end point
+- Automatically open browser window on Nuxt start
+
+## 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
+
 ## 1.0.4
 
 - Hard delete the data.db file

package/client/package.json

@@ -9,8 +9,10 @@
   "devDependencies": {
     "@nuxtjs/google-fonts": "^1.3.0",
     "@nuxtjs/tailwindcss": "^5.0.4",
+    "@nuxtus/cli": "^1.0.6",
+    "@nuxtus/generator": "1.1.0",
     "nuxt": "3.0.0-rc.4",
-    "@nuxtus/cli": "^1.0.2"
+    "openapi-typescript": "^5.4.1"
   },
   "dependencies": {
     "@headlessui/vue": "^1.6.1",

package/client/plugins/{directusLogin.ts → directusLogin.client.ts}

@@ -1,7 +1,7 @@
 export default defineNuxtPlugin(async (nuxtApp) => {
-	const config = useRuntimeConfig()
-	const { login } = useDirectusAuth()
 	try {
+		const config = useRuntimeConfig()
+		const { login } = useDirectusAuth()
 		await login({
 			email: config.public.directusEmail,
 			password: config.public.directusPassword,

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

@@ -0,0 +1,17 @@
+import { createPage } from "@nuxtus/generator"
+
+export default defineEventHandler(async (event) => {
+	if (process.env.NODE_ENV !== "production") {
+		const body = await useBody(event)
+		try {
+			const collection = body.collection
+			createPage(collection, body.singleton)
+		} catch (err) {
+			console.error(err.message)
+			throw new Error("Unable to create page: " + err.message)
+		}
+		return {
+			api: "ok",
+		}
+	}
+})

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

@@ -0,0 +1,32 @@
+import axios from "axios"
+import fs from "fs"
+import openapiTS from "openapi-typescript"
+
+export default defineEventHandler(async (event) => {
+	if (process.env.NODE_ENV !== "production") {
+		const config = useRuntimeConfig()
+		// TODO: Can't seem to share login from directusLogin (currently client only plugin)
+		try {
+			const { data } = await axios.post("http://localhost:8055/auth/login", {
+				email: config.public.directusEmail,
+				password: config.public.directusPassword,
+			})
+			axios.defaults.headers.common[
+				"Authorization"
+			] = `Bearer ${data.data.access_token}`
+		} catch (err) {
+			console.error("Failed to login to Directus: " + err.message)
+			throw err
+		}
+		const openapi = await axios.get("http://localhost:8055/server/specs/oas")
+		// console.log(JSON.stringify(openapi.data.components.schemas))
+		const types = await openapiTS(openapi.data)
+		if (!fs.existsSync("interfaces")) {
+			fs.mkdirSync("interfaces")
+		}
+		fs.writeFileSync("interfaces/nuxtus.ts", types)
+		return {
+			api: "ok",
+		}
+	}
+})

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@nuxtus/nuxtus",
 	"description": "Directus/Nuxt boilerplate with Tailwind CSS.",
-	"version": "1.0.4",
+	"version": "1.1.0",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/nuxtus/nuxtus.git"
@@ -24,7 +24,7 @@
 		"registry": "https://registry.npmjs.org/"
 	},
 	"scripts": {
-		"client": "cd client && npm run dev",
+		"client": "cd client && npm run dev -- -o",
 		"server": "cd server && npx directus start",
 		"start": "concurrently \"npm run client\" \"npm run server\""
 	},

package/server/package.json

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