OlyverChan
OlyverChan
PostsComments
NNuxt
Created by OlyverChan on 4/2/2025 in #❓・help
"Missing Required Prop" when I never defined any propss
No description
5 replies
NNuxt
Created by OlyverChan on 3/27/2025 in #❓・help
Weird date error with callender element
No description
13 replies
NNuxt
Created by OlyverChan on 3/26/2025 in #❓・help
Nuxt-ui tailwind themeing
I am trying to configure my tailwind 4 themes and set them for my nuxt-ui but i seem to be doing it wrong main.css 
@import "tailwindcss" theme(static);
@import "@nuxt/ui";



@theme {
    --color-charcoal-900: #1E2124;
    --color-charcoal-700: #282B30;
    --color-charcoal-500: #36393E;
    --color-charcoal-300: #424549;

    --color-primary: #5865F2;
    --color-secondary: #E0E3FF;

    --color-success: #74FF97;
    --color-warning: #FFFD74;
    --color-danger: #FF7476;
  }
@import "tailwindcss" theme(static);
@import "@nuxt/ui";



@theme {
    --color-charcoal-900: #1E2124;
    --color-charcoal-700: #282B30;
    --color-charcoal-500: #36393E;
    --color-charcoal-300: #424549;

    --color-primary: #5865F2;
    --color-secondary: #E0E3FF;

    --color-success: #74FF97;
    --color-warning: #FFFD74;
    --color-danger: #FF7476;
  }
vite.config.ts 
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        colors: {
          primary: 'primary',
          neutral: 'charcoal-300',
          gray: 'charcoal-300'
        }
      }
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        colors: {
          primary: 'primary',
          neutral: 'charcoal-300',
          gray: 'charcoal-300'
        }
      }
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})
I am trying to make custom themes to override nuxt's custom colors but idk it seems im doing it wrong
13 replies
NNuxt
Created by OlyverChan on 3/22/2025 in #❓・help
How to edit with of nuxt ui navigation menu
<template>
    <div class="fixed top-0 left-0 z-50 px-2">
        <div class="fixed top-0 left-0 shadow-lg w-full h-12"></div>
        <UNavigationMenu highlight :items="items" class="text-white">
        </UNavigationMenu>
    </div>
    <UAlert v-if="enableAlert" :title="alertMessage" class="fixed top-12"/>
    
</template>

<script setup lang="js">
import { inject } from 'vue';
import { Ref } from 'vue';


const alertMessage = inject<Ref<string>>('alertMessage')
const enableAlert = inject<Ref<boolean>>('enableAlert')

// navigation item
const items = [
    {
        label:'Home',
        to: '/'
    },
    {
        label:'About',
        to: '/about'
    },
    {
        label:'Examples',
        children: [
            {
                label: 'messageApp',
                to: '/message'
            }
        ]
    },
    {
        label:'Projects',
        to: '/projects'
    },
    {
        label:'For \"you\"',
        to: '/you'
    }
]

</script>
<template>
    <div class="fixed top-0 left-0 z-50 px-2">
        <div class="fixed top-0 left-0 shadow-lg w-full h-12"></div>
        <UNavigationMenu highlight :items="items" class="text-white">
        </UNavigationMenu>
    </div>
    <UAlert v-if="enableAlert" :title="alertMessage" class="fixed top-12"/>
    
</template>

<script setup lang="js">
import { inject } from 'vue';
import { Ref } from 'vue';


const alertMessage = inject<Ref<string>>('alertMessage')
const enableAlert = inject<Ref<boolean>>('enableAlert')

// navigation item
const items = [
    {
        label:'Home',
        to: '/'
    },
    {
        label:'About',
        to: '/about'
    },
    {
        label:'Examples',
        children: [
            {
                label: 'messageApp',
                to: '/message'
            }
        ]
    },
    {
        label:'Projects',
        to: '/projects'
    },
    {
        label:'For \"you\"',
        to: '/you'
    }
]

</script>
I have this vue / vite nuxt ui project How do i make it so the children doesnt take the full width of the u nav menu? I just want it to take a fixed width
9 replies
NNuxt
Created by OlyverChan on 3/21/2025 in #❓・help
Help setting up nuxt ui with vue
No description
10 replies