Ponkhy Posts - Answer Overflow

Ponkhy

•Created by Ponkhy on 3/13/2025 in #❓・help

Custom Colors in Nuxt UI v3

Hello, I'm trying out Nuxt UI v3 now and I'm not able to introduce new colors like I've done in v2. In v2 I just have done the following: tailwind.config.ts:

import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        newcolor: {
          50: '#ffda7c',
          100: '#ffd466',
          200: '#ffcd50',
          300: '#ffc73a',
          400: '#ffc124',
          500: '#e6ae20',
          600: '#cc9a1d',
          700: '#b38719',
          800: '#997416',
          900: '#806112',
          950: '#664d0e',
        },
      },
    },
  },
}

import type { Config } from 'tailwindcss'

export default <Partial<Config>>{
  theme: {
    extend: {
      colors: {
        newcolor: {
          50: '#ffda7c',
          100: '#ffd466',
          200: '#ffcd50',
          300: '#ffc73a',
          400: '#ffc124',
          500: '#e6ae20',
          600: '#cc9a1d',
          700: '#b38719',
          800: '#997416',
          900: '#806112',
          950: '#664d0e',
        },
      },
    },
  },
}

app.config.ts:

export default defineAppConfig({
  ui: {
    primary: 'newcolor',
    gray: 'zinc',
  },
})

export default defineAppConfig({
  ui: {
    primary: 'newcolor',
    gray: 'zinc',
  },
})

Does anyone have an idea how I could resolve the issue?

7 replies

NNuxt

•Created by Ponkhy on 11/25/2024 in #❓・help

useFetch doesn't send new query

Hello, unfortunately I couldn't really find a simple answer to my problem. I have this useFetch:

const {
  status,
  refresh,
  data,
  error: errorData,
} = await useFetch(`/api/data/${route.params.id}`, {
  watch: false,
  query: { search: search, types: selectedTypes.value.map(type => type.id) },
})

const {
  status,
  refresh,
  data,
  error: errorData,
} = await useFetch(`/api/data/${route.params.id}`, {
  watch: false,
  query: { search: search, types: selectedTypes.value.map(type => type.id) },
})

selectedTypes is an array of multiple selected items of a USelectMenu Nuxt UI element and search a storeToRefs from Pinia. If a change search the new value of it will properly be send to the API, but if I select something else in selectedTypes it will always use the first value and not the updated one. I'm also watching both values and refresh them like this:

watch(
  [search, selectedTypes],
  useDebounceFn(() => {
    refresh()
  }, 300),
)

watch(
  [search, selectedTypes],
  useDebounceFn(() => {
    refresh()
  }, 300),
)

How can I active selectedTypes being send properly withe changed value without much overhead?

10 replies

Gaming

Programming