Oyl
Oyl
NNuxt
Created by Oyl on 3/27/2025 in #❓・help
Weird date error with callender element
No description
13 replies
NNuxt
Created by Oyl 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 Oyl 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 Oyl on 3/21/2025 in #❓・help
Help setting up nuxt ui with vue
No description
10 replies