Viridian Comments - Answer Overflow

Viridian

Explore posts from servers

•Created by Viridian on 12/4/2024 in #❓・help

Strange error when trying to run dev mode on a fresh install

@kapa.ai how can I set a custom color (e.g. a tailwind class red-100) for my UProgress element? I can only use predefined ones like 'primary' for now

22 replies

NNuxt

•Created by Viridian on 1/29/2025 in #❓・help

<USelect> in #trailing slot in <UInput> does not appear clickable

@kapa.ai How do I improve performance in my UItemInput? Can I use something like vue-virtual-scroller? Here's my code:

<UInputMenu
      v-model="value"
      :items="items"
      placeholder="Search for resources..."
      class="w-full"
      size="xl"
      icon="i-lucide-search"
    >
      <template #item-leading="{ item, index }">
        <UIcon v-if="item.type === 'route'" class="text-green-500" name="i-lucide-map" />
        <img v-if="item.type === 'pokemon'" :src="`https://raw.githubusercontent.com/May8th1995/sprites/master/${parseMonName(item.label)}.png`">
        <UIcon v-if="item.type === 'trainer'" class="text-green-500" name="mdi-pokeball" />
      </template>
    </UInputMenu>

<UInputMenu
      v-model="value"
      :items="items"
      placeholder="Search for resources..."
      class="w-full"
      size="xl"
      icon="i-lucide-search"
    >
      <template #item-leading="{ item, index }">
        <UIcon v-if="item.type === 'route'" class="text-green-500" name="i-lucide-map" />
        <img v-if="item.type === 'pokemon'" :src="`https://raw.githubusercontent.com/May8th1995/sprites/master/${parseMonName(item.label)}.png`">
        <UIcon v-if="item.type === 'trainer'" class="text-green-500" name="mdi-pokeball" />
      </template>
    </UInputMenu>

16 replies

NNuxt

•Created by Viridian on 1/29/2025 in #❓・help

<USelect> in #trailing slot in <UInput> does not appear clickable

@kapa.ai Is there a way to make a search Input with autocomplete? What would I use?

16 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

USelect option values always turn into strings

@kapa.ai - Given this code:

const selectedPeriod = ref<'day' | 'month' | 'year'>('day');
const rateValue = ref<number | undefined>();

const periodOptions = [
  { label: 'per dag', value: 'day' },
  { label: 'per maand', value: 'month' },
  { label: 'per jaar', value: 'year' },
];

const dailyRate = computed(() => {
  if (rateValue.value === undefined) return undefined;
  switch (selectedPeriod.value) {
    case 'day':
      return rateValue.value;
    case 'month':
      return rateValue.value / 30; // Using 30 days as per existing constant
    case 'year':
      return rateValue.value / 365;
    default:
      return undefined;
  }
});

<UFormGroup :label="labels.daily" size="lg" :ui="{ label: { base: 'font-semibold text-md' } }">
      <UInput
        type="number"
        step="0.01"
        placeholder="3.14"
        input-class="no-spinner"
        :model-value="rateValue"
        @update:model-value="updateRateValue"
        icon="i-material-symbols-electric-bolt"
      >
        <template #trailing>
          <USelect
            v-model="selectedPeriod"
            :options="periodOptions"
            size="xs"
            :ui="{ base: 'w-28' }"
          />
        </template>
      </UInput>
    </UFormGroup>

const selectedPeriod = ref<'day' | 'month' | 'year'>('day');
const rateValue = ref<number | undefined>();

const periodOptions = [
  { label: 'per dag', value: 'day' },
  { label: 'per maand', value: 'month' },
  { label: 'per jaar', value: 'year' },
];

const dailyRate = computed(() => {
  if (rateValue.value === undefined) return undefined;
  switch (selectedPeriod.value) {
    case 'day':
      return rateValue.value;
    case 'month':
      return rateValue.value / 30; // Using 30 days as per existing constant
    case 'year':
      return rateValue.value / 365;
    default:
      return undefined;
  }
});

<UFormGroup :label="labels.daily" size="lg" :ui="{ label: { base: 'font-semibold text-md' } }">
      <UInput
        type="number"
        step="0.01"
        placeholder="3.14"
        input-class="no-spinner"
        :model-value="rateValue"
        @update:model-value="updateRateValue"
        icon="i-material-symbols-electric-bolt"
      >
        <template #trailing>
          <USelect
            v-model="selectedPeriod"
            :options="periodOptions"
            size="xs"
            :ui="{ base: 'w-28' }"
          />
        </template>
      </UInput>
    </UFormGroup>

For some reason, the select inside the input isn't able to be clicked to select another option.

66 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

USelect option values always turn into strings

@kapa.ai How can I set ~ as an alias?

66 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

USelect option values always turn into strings

@kapa.ai I have these settings for Nuxt:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  // https://nuxt.com/modules

  modules: [
    '@nuxthub/core',
    '@nuxt/eslint',
    '@nuxt/ui',
  ],

  // https://devtools.nuxt.com
  devtools: { enabled: true },

  css: ['~/assets/css/main.css'],

  // Env variables - https://nuxt.com/docs/getting-started/configuration#environment-variables-and-private-tokens
  runtimeConfig: {
    public: {
      // Can be overridden by NUXT_PUBLIC_HELLO_TEXT environment variable
      helloText: 'Hello from the Edge 👋',
    },
  },
  // https://nuxt.com/docs/getting-started/upgrade#testing-nuxt-4
  future: { compatibilityVersion: 4 },
  compatibilityDate: '2024-07-30',

  nitro: {
    experimental: {
      tasks: true,
    },
  },

  // https://hub.nuxt.com/docs/getting-started/installation#options
  hub: {
    database: true,
  },

  // https://eslint.nuxt.com
  eslint: {
    config: {
      stylistic: {
        quotes: 'single',
      },
    },
  },
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  // https://nuxt.com/modules

  modules: [
    '@nuxthub/core',
    '@nuxt/eslint',
    '@nuxt/ui',
  ],

  // https://devtools.nuxt.com
  devtools: { enabled: true },

  css: ['~/assets/css/main.css'],

  // Env variables - https://nuxt.com/docs/getting-started/configuration#environment-variables-and-private-tokens
  runtimeConfig: {
    public: {
      // Can be overridden by NUXT_PUBLIC_HELLO_TEXT environment variable
      helloText: 'Hello from the Edge 👋',
    },
  },
  // https://nuxt.com/docs/getting-started/upgrade#testing-nuxt-4
  future: { compatibilityVersion: 4 },
  compatibilityDate: '2024-07-30',

  nitro: {
    experimental: {
      tasks: true,
    },
  },

  // https://hub.nuxt.com/docs/getting-started/installation#options
  hub: {
    database: true,
  },

  // https://eslint.nuxt.com
  eslint: {
    config: {
      stylistic: {
        quotes: 'single',
      },
    },
  },
})

For some reason, I get this error: 500 [vite-node] [ERR_LOAD_URL] ~/assets/css/main.css at ~/assets/css/main.css I have the assets folder in the root.

66 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

USelect option values always turn into strings

@kapa.ai Can I add multiple css files to the assets/css folder and use Tailwind classes in there to separate concerns?

66 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

USelect option values always turn into strings

@kapa.ai - How can I make a UButton only be as long as its content is?

66 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

USelect option values always turn into strings

@kapa.ai How can I disable the default number input behavior (adding a number incrementor/decrementor on the right side of the input) on UInput elements?

66 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

USelect option values always turn into strings

@kapa.ai How can I change the color of label text inside a UFormGroup:

<UFormGroup label="Ik betaal per kWh:">
          <UInput>
            
          </UInput>
        </UFormGroup>

<UFormGroup label="Ik betaal per kWh:">
          <UInput>
            
          </UInput>
        </UFormGroup>

66 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

USelect option values always turn into strings

@kapa.ai - On phone, focusing on NuxtUI elements makes the user unable to zoom out again. How can I prevent this behavior?

66 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

USelect option values always turn into strings

@kapa.ai This is our app.vue:

<template>
  <div>
    <!--    <NuxtWelcome />-->
    <MarketingDecorator />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

<template>
  <div>
    <!--    <NuxtWelcome />-->
    <MarketingDecorator />
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

And this is our default.vue in /layouts:

<template>
  <div>
    <Header/>
    <slot />
    <Footer/>
  </div>
</template>

<template>
  <div>
    <Header/>
    <slot />
    <Footer/>
  </div>
</template>

I want to disable this layout for a specific page. How can I achieve this?

66 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

USelect option values always turn into strings

@kapa.ai How can I change the space between a label and the input in a <UFormGroup>? I'd like to make it so that all formgroups have a bit more space between the label and the input(s).

66 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

NuxtUI Tooltip/Popover not rendering on live website

The issue was a faulty nuxt.config.ts!

10 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

NuxtUI Tooltip/Popover not rendering on live website

...This actually also happens on my UForm component as well

10 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

NuxtUI Tooltip/Popover not rendering on live website

For some reason, the events are removed from the Tooltip/Popover components in the production build while they are still there locally

10 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

NuxtUI Tooltip/Popover not rendering on live website

10 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

NuxtUI Tooltip/Popover not rendering on live website

Would like some help on this, it's a very strange issue

10 replies

NNuxt

•Created by Viridian on 11/13/2024 in #❓・help

USelect option values always turn into strings

@kapa.ai I am using Tooltips and Popovers as NuxtUI elements. For some reason, on the production site, there is a v-if missing from the component itself which causes it to not render. What could be the issue?

66 replies

NNuxt

•Created by Viridian on 11/5/2024 in #❓・help

Label templates for <UInput> elements

@kapa.ai Can I disable the number arrows in an <UInput> when I specify type="number"?

19 replies

Gaming

Programming