Vertical Navigation badge not rendered properly

[BayBreezy]

Version

@nuxthq/ui: 2.1.0
nuxt: v3.5.0

Reproduction Link

https://stackblitz.com/edit/nuxt-starter-pfevqw?file=app.vue

Steps to reproduce

• Create a project & install the package
• Configure the app.config.ts file with the colors
• Add the example from Vertical Navigation to your page.
• Update the link array to include the badge prop

What is Expected?

I expected the badge to be rendered on the far right based on the default config below:

// ... 
"badge": {
    "base": "ml-auto inline-block py-0.5 px-2 text-xs rounded-md -mr-1 -my-0.5",
    "active": "bg-white dark:bg-gray-900",
    "inactive": "bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 group-hover:bg-white dark:group-hover:bg-gray-900"
  }

// ...

What is actually happening?

The badge styles seem to not be applied

[benjamincanac]

Thanks for noticing this! 😊

[BayBreezy]

YW :)
I want this to be the perfect UI library for Nuxt, so I will be testing every single component that is published lololol
I hope you guys don't find me annoying at any point

[benjamincanac]

Not at all, feel free to open as many issues as needed so we can make this library perfect altogether 😊