@nuxtus/nuxtus 1.0.6 → 1.1.0

package/README.md

@@ -21,6 +21,7 @@ https://user-images.githubusercontent.com/324026/175452950-46bd51a6-3fd9-441d-80
   - [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)
 
@@ -63,23 +64,18 @@ $ npm start
 
 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:
+Collections are also typed automatically, simply prepend "Items" to the collection name as per below:
 
-#### Trigger
-
-Type: action
-Scope: items.create
-Collections: directus_collections
-
-#### Webhook / Request URL
+```typescript
+import { components } from "../interfaces/nuxtus";
+type Test = components["schemas"]["ItemsTest"];
+```
 
-URL: http://localhost:3000/api/directus/collection
-Method: POST
-Request Body: `{{$last.payload}}`
+> Because OpenAPI schemas may have invalid TypeScript characters as names, the square brackets are a safe way to access every property.
 
 ### Manually creating pages
 
-Nuxtus includes Nuxtus CLI which will automatically generate listing and view pages of any Directus collections. To use it:
+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
@@ -100,4 +96,11 @@ Clone this repo onto your local machine, remove the remote git origin and add a
 
 > 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

@@ -13,5 +13,13 @@ Todo:
   ☐ Documentation: https://docusaurus.io/ or https://vuepress.vuejs.org/
   ✔ 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?
+  ☐ 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,11 @@
 # 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

package/client/package.json

@@ -9,9 +9,10 @@
   "devDependencies": {
     "@nuxtjs/google-fonts": "^1.3.0",
     "@nuxtjs/tailwindcss": "^5.0.4",
-    "@nuxtus/cli": "^1.0.5",
-    "@nuxtus/generator": "1.0.0",
-    "nuxt": "3.0.0-rc.4"
+    "@nuxtus/cli": "^1.0.6",
+    "@nuxtus/generator": "1.1.0",
+    "nuxt": "3.0.0-rc.4",
+    "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

@@ -3,8 +3,13 @@ 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)
+		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.6",
+	"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.13.0",
+    "directus": "^9.14.1",
     "sqlite3": "^5.0.8"
   }
 }