EmanueleDB
EmanueleDB
PostsComments
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
Yes in the nuxt doc it does, but a little reminder also in the nuxt ui doc wouldn't be bad. Yes I believe examples are the best way and people, like me, understand better
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
Thanks @HugoRCD . I would an example also with a custom color in the doc and specify that app.config.ts needs to be in the /app folder when running compatibility version 4
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
ok I made it working finally.
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
I believe I'm obliged to overwrite the primary, secondary, etc to make it working with the nuxt ui components
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
I tried to move app.config.ts in /app folder (im using compatibility version 4) and it still doesn't work
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
No description
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
No description
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
I dont want to use primary, secondary etc, I want to use active in my Nuxt UI components
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
there are no example with custom colors in this doc https://ui.nuxt.com/getting-started/theme
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
I made this in my main.css 
--color-active-50: #ecfdf5;
  --color-active-100: #d1fae5;
  --color-active-200: #a7f3d0;
  --color-active-300: #6ee7b7;
  --color-active-400: #34d399;
  --color-active-500: #10b981;
  --color-active-600: #059669;
  --color-active-700: #047857;
  --color-active-800: #065f46;
  --color-active-900: #064e3b;
  --color-active-950: #022c22;
--color-active-50: #ecfdf5;
  --color-active-100: #d1fae5;
  --color-active-200: #a7f3d0;
  --color-active-300: #6ee7b7;
  --color-active-400: #34d399;
  --color-active-500: #10b981;
  --color-active-600: #059669;
  --color-active-700: #047857;
  --color-active-800: #065f46;
  --color-active-900: #064e3b;
  --color-active-950: #022c22;
what do i still need to do in app.config.ts?
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
my colors are listed also in the nuxt.config.ts ui: { theme: { colors: [ 'primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'active', 'notRequested', 'requested', 'expired', 'cancelled', 'scheduled' ] } }, but I dont need all the shades 50,100, etc
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
Doing it like this the colors will be recognised also by the Nuxt Ui components?
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
No description
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
I'm still confused about the colors. I mapped them like this in my main.css 
@theme static {
  --font-montserrat: 'Montserrat';
  --font-inconsolata: 'Inconsolata';

  --ui-active: #10b981;
  --ui-notRequested: #3b82f6;
  --ui-scheduled: #a855f7;
  --ui-expired: #f97316;
  --ui-requested: #eab308;
  --ui-cancelled: #ef4444;
}
@theme static {
  --font-montserrat: 'Montserrat';
  --font-inconsolata: 'Inconsolata';

  --ui-active: #10b981;
  --ui-notRequested: #3b82f6;
  --ui-scheduled: #a855f7;
  --ui-expired: #f97316;
  --ui-requested: #eab308;
  --ui-cancelled: #ef4444;
}
and in my app.config.ts 
export default defineAppConfig({
  ui: {
    colors: {
      active: 'var(--ui-active)',
      'not-requested': 'var(--ui-notRequested)',
      scheduled: 'var(--ui-scheduled)',
      expired: 'var(--ui-expired)',
      requested: 'var(--ui-requested)',
      cancelled: 'var(--ui-cancelled)'
    }
  }
})
export default defineAppConfig({
  ui: {
    colors: {
      active: 'var(--ui-active)',
      'not-requested': 'var(--ui-notRequested)',
      scheduled: 'var(--ui-scheduled)',
      expired: 'var(--ui-expired)',
      requested: 'var(--ui-requested)',
      cancelled: 'var(--ui-cancelled)'
    }
  }
})
to be able to use them like this 
<UButton color="expired" ... />
<UButton color="expired" ... />
IS this the correct way?
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
I downgrade vue-tsc to 2.2.0 as suggested here https://github.com/nuxt/ui/issues/3405
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
@HugoRCD I can confirm that the plugin is not needed, just the tailwindcss installed in the dependencies.
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
Tomorrow when I'm in front of my project I will try to remove it but here I dont see either to install tailwindcss, on the tailwind doc, about nuxt, it says to install those packages. I think I could remove the plugin but I still need tailwindcss in my dependencies.
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
Maybe it works for new projects, I migrated from Nuxt Ui 2.21.1, I haven't tried to make a new project. I'm going to deploy my app in a few weeks and yesterday was a rough day updating everything, it is scary refactor everything just a few days before going public
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
you get this error without the plugin @HugoRCD
89 replies
NNuxt
Created by EmanueleDB on 3/14/2025 in #❓・help
Nuxt UI 2.21.1 migration to v 3.0.0
If you dont install the plugin it doesn't work. That was I though as well when I saw the update doc, but it doesn't work without that plugin
89 replies