Nuxt•3d ago

How to run the Nuxt UI 3 playground?

I wanted to play with the Nuxt UI 3 playground, so I ran:

git clone https://github.com/nuxt/ui.git nuxt-ui-3
cd nuxt-ui-3 
sudo npm install -g corepack   
pnpm i
nuxi prepare
pnpm dev

git clone https://github.com/nuxt/ui.git nuxt-ui-3
cd nuxt-ui-3 
sudo npm install -g corepack   
pnpm i
nuxi prepare
pnpm dev

The server boots to a 500:

500
[vite-node] [plugin:@tailwindcss/vite:generate:serve] [VITE_ERROR] /assets/css/main.css

@import "tailwindcss" source("../../../..");
@import "@nuxt/ui";

@theme static {
  --font-sans: 'Public Sans', sans-serif;

  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  ...

500
[vite-node] [plugin:@tailwindcss/vite:generate:serve] [VITE_ERROR] /assets/css/main.css

@import "tailwindcss" source("../../../..");
@import "@nuxt/ui";

@theme static {
  --font-sans: 'Public Sans', sans-serif;

  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  ...

Do I have to do something special to get this up and running? Is the process documented somewhere?

6 Replies

kapa.ai•3d ago

Hi @davestewart. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I don't see specific documentation about running the Nuxt UI 3 playground from the GitHub repository. However, I can provide some insights based on the error you're encountering and the configuration patterns shown in the documentation. The error you're seeing appears to be related to Tailwind CSS v4 configuration in the main.css file. Nuxt UI 3 uses Tailwind CSS v4, which takes a CSS-first configuration approach with directives like @theme and @source. Here are some suggestions to fix the issue: 1. Make sure you're using the correct branch. The v3 branch of Nuxt UI should be used:

git checkout v3

git checkout v3

2. The CSS file is trying to use the @source directive to include files from a parent directory. Try modifying the path in the CSS file to match your project structure:

@import "tailwindcss";
@import "@nuxt/ui";

@source "../.."; /* Adjust this path as needed */

@import "tailwindcss";
@import "@nuxt/ui";

@source "../.."; /* Adjust this path as needed */

3. Check if you need to install Tailwind CSS v4, as Nuxt UI 3 depends on it:

pnpm add -D tailwindcss@latest

pnpm add -D tailwindcss@latest

4. Make sure your CSS is properly imported in your Nuxt configuration:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

The documentation shows that for Nuxt UI Pro, you would need to import Tailwind CSS and Nuxt UI Pro in your CSS file like this:

@import "tailwindcss";
@import "@nuxt/ui-pro";

@import "tailwindcss";
@import "@nuxt/ui-pro";

But since you're working with Nuxt UI (not Pro), the import should be @import "@nuxt/ui"; as shown in your error message. If you're still encountering issues, you might want to check the Nuxt UI documentation on theming for more details on how to properly configure Tailwind CSS v4 with Nuxt UI. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3d ago

<@350257396503019542> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

davestewartOP•3d ago

OK, the issue is you need to at least run pnpm build in the main repo, as the ../../../../ line is referencing the main repo, and if that's not built, the exports fields in the main package.json point to a non-existent dist folder. It seems this may or may not work. Subsequent builds are blowing up the console with all kinds of crazy output, mainly to do with the form examples (which are the very elements I want to look at!) I don't know why Nuxt in particular is always like this.

manniL•3d ago

cc @HugoRCD

HugoRCD•3d ago

@davestewart Have you done a pnpm run dev:prepare before?

davestewartOP•3d ago

Hey Hugo (and Alex!), Thanks for chiming in! Ben was kind enough to solve it when I posted an issue. It turns out the only place that "contribution" is mentioned in the docs is a small side-link that doesn't show in the search, nor was it mentioned in the README (but Ben has added that now 👌): - https://github.com/nuxt/ui/issues/3757#issuecomment-2766705640 - https://github.com/nuxt/ui/pull/3758 Hopefully this will make it easier for the next guy!

Gaming

Programming

How to run the Nuxt UI 3 playground?

Did you find this page helpful?