Rohjans Posts - Answer Overflow

Rohjans

Explore posts from servers

•Created by Rohjans on 4/29/2025 in #❓・help

Nuxt UI 3 Dynamic Icons

I am in the process of migrating my project to Nuxt 3 and an issue I am having is with a dynamic icon feature I had in a form. Previsouly I had it setup the following way:

    const displayIcon = computed(() => {
        if (!state.icon) return ''

        return `i-heroicons-${state.icon}`
    })

<UIcon
                            class="h-full"
                            :name="displayIcon"
                            dynamic />

    const displayIcon = computed(() => {
        if (!state.icon) return ''

        return `i-heroicons-${state.icon}`
    })

<UIcon
                            class="h-full"
                            :name="displayIcon"
                            dynamic />

What do I have to change to make it work now? Yes I have the HeroIcons collection installed and I can use icons just fine if I hard code them in the prop.

17 replies

NNuxt

•Created by Rohjans on 4/20/2025 in #❓・help

Tailwind styles not working after migrating to NuxtUI v3

I followed the official NuxtUI migration guide to v3 and changed the tailwindcss versions, but the tailwind classes have no styles at all. Here a relevant part of my nuxt.config

import tailwindcss from "@tailwindcss/vite"

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    compatibilityDate: '2025-04-20',
    devtools: { enabled: true },
    vite: {
        plugins: [
            tailwindcss(),
        ],
    },
    modules: [
      '@nuxt/ui',
      '@nuxtjs/color-mode',
      '@nuxt/icon',
      '@sidebase/nuxt-auth',
      '@pinia/nuxt',
      '@pinia-plugin-persistedstate/nuxt',
      '@nuxt/eslint',
      '@nuxtjs/i18n',
      '@compodium/nuxt'
    ],
    css: ['~/assets/css/main.scss'],
    build: {
        transpile: [
            '@vuepic/vue-datepicker',
            /echarts/,
            'vue-echarts',
            'resize-detector'
        ]
    },

import tailwindcss from "@tailwindcss/vite"

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
    compatibilityDate: '2025-04-20',
    devtools: { enabled: true },
    vite: {
        plugins: [
            tailwindcss(),
        ],
    },
    modules: [
      '@nuxt/ui',
      '@nuxtjs/color-mode',
      '@nuxt/icon',
      '@sidebase/nuxt-auth',
      '@pinia/nuxt',
      '@pinia-plugin-persistedstate/nuxt',
      '@nuxt/eslint',
      '@nuxtjs/i18n',
      '@compodium/nuxt'
    ],
    css: ['~/assets/css/main.scss'],
    build: {
        transpile: [
            '@vuepic/vue-datepicker',
            /echarts/,
            'vue-echarts',
            'resize-detector'
        ]
    },

main.scss

@import "tailwindcss" theme(static);
@import "@nuxt/ui";

...

@import "tailwindcss" theme(static);
@import "@nuxt/ui";

...

18 replies

NNuxt

•Created by Rohjans on 6/18/2024 in #❓・help

Nuxt ENV not working in docker container

Hello! I am working on a Nuxt3 project and I would like to have a docker container running it, but I'm facing some issues. When the image is built and the container is created, the ENV variables I pass through the docker compose are not being passed to Nuxt, I can confirm this through some console logs. What could I be doing wrong? Dockerfile:

# Use an official node image as the base image
FROM oven/bun:1 as builder
WORKDIR /usr/src/app

# Set the working directory
WORKDIR /app

# Copy package.json
COPY package*.json ./

# Install dependencies
RUN bun i

# Copy the rest of the application files
COPY . .

# Build the application
RUN bun run build

# Use a smaller image for the production environment
FROM node:22.3.0-alpine3.20

# Set the working directory
WORKDIR /app

# Copy only the necessary files for running the application
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/.output ./.output
COPY --from=builder /app/package*.json ./

# Expose the port the app runs on
EXPOSE 3000

# Command to run the application
CMD ["node", ".output/server/index.mjs"]

# Use an official node image as the base image
FROM oven/bun:1 as builder
WORKDIR /usr/src/app

# Set the working directory
WORKDIR /app

# Copy package.json
COPY package*.json ./

# Install dependencies
RUN bun i

# Copy the rest of the application files
COPY . .

# Build the application
RUN bun run build

# Use a smaller image for the production environment
FROM node:22.3.0-alpine3.20

# Set the working directory
WORKDIR /app

# Copy only the necessary files for running the application
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/.output ./.output
COPY --from=builder /app/package*.json ./

# Expose the port the app runs on
EXPOSE 3000

# Command to run the application
CMD ["node", ".output/server/index.mjs"]

Docker compose:

services:
    db:
        image: postgres:15
        container_name: 'postgres_db'
        environment:
            POSTGRES_DB: spenser
            POSTGRES_USER: admin
            POSTGRES_PASSWORD: 1234
        ports:
            - 5432:5432

    app:
        build: .
        container_name: 'spenser'
        ports:
            - 3000:3000
        environment:
            JWT_SECRET: changeme
            DB_NAME: spenser
            DB_HOST: db
            DB_USER: admin
            DB_PASSWORD: 1234
            DB_PORT: 5432
        depends_on:
            - db

services:
    db:
        image: postgres:15
        container_name: 'postgres_db'
        environment:
            POSTGRES_DB: spenser
            POSTGRES_USER: admin
            POSTGRES_PASSWORD: 1234
        ports:
            - 5432:5432

    app:
        build: .
        container_name: 'spenser'
        ports:
            - 3000:3000
        environment:
            JWT_SECRET: changeme
            DB_NAME: spenser
            DB_HOST: db
            DB_USER: admin
            DB_PASSWORD: 1234
            DB_PORT: 5432
        depends_on:
            - db

5 replies

NNuxt

•Created by Rohjans on 5/24/2024 in #❓・help

Use nested routes with an index file

23 replies

NNuxt

•Created by Rohjans on 5/9/2024 in #❓・help

Render UDropdown at the bottom of the DOM

1 replies

NNuxt

•Created by Rohjans on 5/6/2024 in #❓・help

Get route query params in the seriver side returns undefined

2 replies

Gaming

Programming