Nuxt•4d ago

Nuxt UI v3 as layer

I'm not able to use layer that contains Nuxt UI v.3 Problem is with css import in nuxt.config.ts. Once I try to run dev command, there is an error 500: '~/assets/css/main.css' can't be found. Does running v3 as layer requires some extra approach?

6 Replies

kapa.ai•4d ago

Hi @Angh0r. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing with Nuxt UI v3 as a layer is related to how paths are resolved in Nuxt layers. This is a common challenge when working with layers, especially when dealing with CSS imports. The Problem When using relative paths or aliases like ~/ in a layer's nuxt.config.ts file, they are resolved relative to the user's project instead of the layer itself. This is why you're getting the error that '~/assets/css/main.css' can't be found. Solution There are a few important things to note about Nuxt UI v3: 1. First, Nuxt UI Pro v3 is no longer designed to be used as a layer. According to the documentation, it's now considered a module:

Nuxt UIPro V3 is now considered as a module and no longer as a layer.

Nuxt UIPro V3 is now considered as a module and no longer as a layer.

UI Pro Docs Migration 2. For your specific CSS import issue, you need to use full resolved paths in your layer's nuxt.config.ts instead of aliases:

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  css: [
    join(currentDir, './assets/css/main.css')
  ]
})

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  css: [
    join(currentDir, './assets/css/main.css')
  ]
})

Relative Paths and Aliases This approach ensures that the path is resolved relative to the layer's directory rather than the user's project. Additional Considerations If you're specifically trying to use Nuxt UI v3, the recommended approach is to install it as a module rather than a layer:

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui-pro']
})

And then import it in your CSS:

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

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

UI Pro Migration This issue with CSS paths in layers is a known limitation, and similar issues have been reported and resolved using the approach described above, as seen in this GitHub issue. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4d ago

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

HugoRCD•4d ago

@Angh0r Would you be able to provide more information, such as the package.json, nuxt.config.ts, and so on?

Angh0rOP•4d ago

nuxt-ui-layer nuxt.config:

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  css: ['~/assets/css/main.css'],

  devtools: { enabled: true },
  modules: ["@nuxt/eslint", "@nuxt/ui"],
})

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  css: ['~/assets/css/main.css'],

  devtools: { enabled: true },
  modules: ["@nuxt/eslint", "@nuxt/ui"],
})

I understand that tilda is an issue but whateeve I've tried to put there error is always the same:


[11:26:38]  ERROR  Pre-transform error: Failed to resolve import "~/assets/css/main.css" from "virtual:nuxt:...

base app simply extends that layer

HugoRCD•4d ago

@Angh0r I'll try to have a look when I've got a bit more time but in the meantime if you want to have a look I've got a project that also uses layers and has configured Nuxt UI with a CSS file and so on https://github.com/HugoRCD/shelve/tree/main/apps

GitHub

shelve/apps at main · HugoRCD/shelve

Open-source secret & environment management. Secure, simple, collaborative. CLI & Github Sync - HugoRCD/shelve

Muhammad Mahmoud•13h ago

You're referencing the path directly (css: ['~/assets/css/main.css']) and that causes the error. You should refactor to use the code snippet kapa suggested. It's instructed in the Layers docs

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  css: [
    join(currentDir, './assets/css/main.css')
  ]
})

import { fileURLToPath } from 'url'
import { dirname, join } from 'path'

const currentDir = dirname(fileURLToPath(import.meta.url))

export default defineNuxtConfig({
  css: [
    join(currentDir, './assets/css/main.css')
  ]
})

Gaming

Programming

Nuxt UI v3 as layer

Did you find this page helpful?