UI3 & Tailwind v4 Safelisting
Hello Kapa,
I would like to use this syntax in may .css available in Tailwind v4 to use the safelist system :
```css
@source inline("{dark:,}bg-secondary-{50,{100...900...100},950}")...
Define colors per checkbox in checkboxgroup
How can I define custom colors per checkbox in a checkboxgroup? I have an hexcode per box along with the label and value. It shows the hexcode if i include it in the title, but it seems to error when setting indicator color through :ui syntax.
`const categoryItems = computed<CheckboxGroupItem[]>(() => {
return allCategories.value.map((cat: any) => ({
label: cat.name,...
Tailwind color issue
I used npm install tailwindcss @tailwindcss/vite which is what tailwind said, installed npm install --save-dev @nuxtjs/tailwindcss according to Nuxt's site, and most styling works, but some button styles and all coloring doesn't work
My files:
```
nuxt.config.js...
environment variable not overriding for production
I have set env variables on docker-compose.yml file, but it still takes default value which is empty string
This is my config:
```
export default defineNuxtConfig({...
Supabase or Appwrite
Hello, i have question what's suits best nuxt appwrite or supabase ? which is more flexible for nuxt ?
How to customise the leading icon / avatar for UNavigationMenu Component
So I needed to customise how the UDashboardSidebar looks and this is what I'm using
```
<UDashboardSidebar collapsible resizable :ui="{ body: 'flex flex-row p-0 gap-0' }" :min-size="4" :default-size="30"
:max-size="40" :collapsed-size="4">...
Why is a file that is not required by any vue component get loaded client-side ?
Hey all,
I'm working on a nuxt project and was trying to get a typesafe env object working with arktype (though I have since switched to zod). It works great server-side, but apparently it also gets loaded on the client and throws because the values do not exist in that context (which is expected). The thing I don't get is why it gets loaded there in the first place xD.
Trying to use better-auth & drizzle, if it helps. The only thing I'm importing on the client side is the better-auth client, but in that file I'm not using that validated env....
Nuxt UI Navbar Width Breaks on Small Screen
The background stop covering the full width of the screen for some reason. I cant figure it out.
NavBar.vue:
```html
<template>...
Dark or Coloured DashboardSidebar on light theme
This is a fairly common design pattern where even for light theme the dark mode style dashboard sidebar is used or alternatively a coloured sidebar is used with text that may be set as light or dark depending on contrast values (a dribbble reference image provided)
what would be the recommended way to accomplish this using nuxt-ui-pro...
Nuxt UI Pro v3.1.3 - Use an official template - Dashboard
When following the installation guide here
https://ui.nuxt.com/getting-started/installation/pro/nuxt#use-an-official-template
I get an error
[plugin:vite:import-analysis] Failed to resolve import "#build/ui-pro/page-card" ... full error below...
nuxt fonts global css file is not loaded in dev environment
When I run ...
bun dev and visit localhost:3000. the console logs this error:
The resource from “http://localhost:3000/_nuxt/virtual:nuxt:%2Fhome%2Fuser%2Fproject%2F.nuxt%2Fnuxt-fonts-global.css” was blocked due to MIME type (“application/json”) mismatch (X-Content-Type-Options: nosniff).
The resource from “http://localhost:3000/_nuxt/virtual:nuxt:%2Fhome%2Fuser%2Fproject%2F.nuxt%2Fnuxt-fonts-global.css” was blocked due to MIME type (“application/json”) mismatch (X-Content-Type-Options: nosniff).
Selecting map library
I have a project where i need integration of a map with custom points and polygons. All data is stored in postgres and PostGIS(supabase) with some extra data like titles and layer. What is your preferred map solution. Is see both maplibre and mapbox have modules but im not sure which too choose. I do need popups for both points and polygons and to be able to toggle layers but I assume both would support that. Any other options?
For now i fetch data as GeoJson but that is easily changed...
In a Nuxt layer, the tsconfig.json file extends to a non existing file inside .playground
When we create the layer with the command
npx nuxi init -t layer layers/my-layer-1, the created layer have the following in the tsconfig.json:
```json
{
"extends": "./.playground/.nuxt/tsconfig.json"
}...Typography with Nuxt UI without Nuxt Content
I have an example of it not working, and some embedded attempts to get it working.
https://github.com/sosensible/prose-challenge/blob/main/app/pages/typography-demo.vue...
NuxtUI: Use Custom IconSet with Vue.js Setup
Hey there! 👋
I'd love to use NuxtUI in a Vue.js setup and integrate a custom icon set (FontAwesome Pro). Does anyone have tips or ideas on how to achieve this?
I followed this guide to generate my icon sets: https://iconify.design/docs/libraries/tools/examples/import-fa-pro.html — it works great with Nuxt, but I couldn't find any information on how to use the resulting JSON files in a plain Vue + Vite setup (without Nuxt)....
Long running thread on Nuxt startup
My app requires a thread (e.g, nitro task) to start on application startup. It will run as long as the app is running.
It performs some logic - fetch data from database, do some calculations and update rows. It's a timely process, so rows are handled at certain time.
How can I achieve this with Nuxt? I tried server/plugins, but it blocks other plugins and feels wrong (it's not a plugin, it's a long running task). I can't use tasks as it's not a scheduled task.
I thought about maybe creating this as a task, and have a plugin that triggers this task on startup. Would that work? Is there another way to achieve triggering long running tasks on startup?...
i18n can't handle nested arrays / arrays of objects
I'm having a weird issue with i18n
everything works with the locales I have, then I tried to use arrays inside locales, and I did this:
const { t } = useI18n();
const items = ref(t("faq.questions", { returnObjects: true }));
...
QR Code on server side
What is the best library to generate a QR code in Nuxt server side? I want to generate a QR code, get the image, and save it in HuxtHub blob. I can't find any libraries that do it on the server side, I only find client components.
Referencing css variables directly in app.config.ts
Hello Kapa
I have a neutral palette defined in my custom theme under
assets/themes/default.css where i want to map neutral to a custom palette so i checked there does not seem to be a --ui-neutral in https://ui.nuxt.com/getting-started/theme#theme where it mentions "This is how the @theme is generated for each color alias:"
so inconvenient but fine i mapped the full -50 to -950 mapping using the tailwind color vars...Custom hook to emit/broadcast message
Hello Kapa
I want to emit/broadcast a message to all my components when my user click on a specific button of a page.
I found this : https://nuxt.com/docs/guide/going-further/events, but it looks like it's only with pre-defined hooks that happen at specific moments.
How can I broadcast just a very simple event that all my components can listen to ?...