@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 { 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)) }, },})
<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 itemconst 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>