From ea4a661aa7a193e44a883561fafed6f9bf675af2 Mon Sep 17 00:00:00 2001 From: kheiner Date: Mon, 10 Nov 2025 12:02:21 -0800 Subject: [PATCH] Updated Nuxt UI information & instructions Adopted conventions for Nuxt 4 and Nuxt UI. --- .../create-a-cms-using-directus-and-nuxt.md | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/content/tutorials/2.projects/create-a-cms-using-directus-and-nuxt.md b/content/tutorials/2.projects/create-a-cms-using-directus-and-nuxt.md index 0cae4e83..100dd969 100644 --- a/content/tutorials/2.projects/create-a-cms-using-directus-and-nuxt.md +++ b/content/tutorials/2.projects/create-a-cms-using-directus-and-nuxt.md @@ -55,7 +55,7 @@ Configure Nuxt so that it is able to communicate with the (external) Directus AP Create a `.env` file with the Directus URL: ``` -API_URL="http://0.0.0.0:8055" +NUXT_PUBLIC_API_URL="http://0.0.0.0:8055" ``` Add a type definition for our new environment variable by creating an `env.d.ts` file with the following content: @@ -63,7 +63,7 @@ Add a type definition for our new environment variable by creating an `env.d.ts` ```ts /// interface ImportMetaEnv { - readonly API_URL: string; + readonly NUXT_PUBLIC_API_URL: string; } interface ImportMeta { @@ -75,32 +75,34 @@ Depending on your project configuration and if you are in development or product ```ts routeRules: { - "/directus/**": { proxy: `${import.meta.env.API_URL}/**` }, + "/directus/**": { proxy: `${import.meta.env.NUXT_PUBLIC_API_URL}/**` }, }, ``` This will allow your Nuxt project to access Directus via your Nuxt URL, eg. [http://localhost:3000/directus](http://localhost:3000/directus) -Configure Nuxt UI by: +Configure [Nuxt UI](https://ui.nuxt.com/docs/getting-started/installation/nuxt): -1. Creating a CSS file in `assets/css/main.css` and adding the following content: +1. Install Nuxt UI: + +```bash +npm i @nuxt/ui +``` + +3. Create a CSS file in `app/assets/css/main.css` and add the following content: ```css @import "tailwindcss"; -@import "@nuxt/ui-pro"; +@import "@nuxt/ui"; ``` -2. Adding the Nuxt UI module to your `nuxt.config.ts`: +3. Add the Nuxt UI module to your `nuxt.config.ts`: ```ts -modules: ['@nuxt/ui-pro'], -css: ['~/assets/css/main.css'], +modules: ['@nuxt/ui'], +css: ['./app/assets/css/main.css'], ``` -This will give you a design starting point for your CSS and UI components using [NuxtUI](https://ui.nuxt.com/). - -> Note: This tutorial is using Nuxt UI Pro, which is a paid version of Nuxt UI (although it is free in development). It contains default layouts for some of the components in the CMS template. You can always remove this and use custom CSS or another UI library. - ### Additional packages To assist in development install the following packages: