Skip to content

Updated Nuxt UI information & instructions #501

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kheiner wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Updated Nuxt UI information & instructions #501

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 15 additions & 13 deletions content/tutorials/2.projects/create-a-cms-using-directus-and-nuxt.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,15 +55,15 @@ 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:

```ts
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly API_URL: string;
readonly NUXT_PUBLIC_API_URL: string;
}

interface ImportMeta {
Expand All @@ -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:
Expand Down