Customization

Setup

1. Logo
   • Create a logo (PNG, ~50×50px recommended)
   • Save to:

     public/images/logo.png 

   • Update your config:
     shared/config.ts

     brandingImages: {  logo: '/images/logo.png',  openGraphImage: '/images/open-graph.png', }, 

2. Open Graph Image (Social Preview)
   • Create an OG image using Canva or OG Image Generator.
   • Recommended size: 1200×630px
   • Save to:

     public/images/open-graph.png 

3. Favicon
   • Generate favicon assets using Favicon.io.
   • Place them in public/images/:
     • android-chrome-512x512.png → pwa-icon-48x48.png
     • android-chrome-192x192.png → pwa-icon-192x192.png
     • android-chrome-512x512.png → pwa-icon-512x512.png
     • apple-touch-icon.png
     • favicon.ico
4. Font Family
   • Choose a font and apply it globally:
     app/assets/styles/main.css

     @theme {  --font-sans: 'Inter', sans-serif; } 

5. Theme (Radius & Colors)
   • Radius:
     app/assets/styles/main.css

     :root {  --ui-radius: 0.5rem; } 

   • Colors:
     app/app.config.ts

     ui: {  colors: {  primary: 'blue',  neutral: 'neutral',  }, }, 

6. Icons (Icones.js)
   • Browse icons at icones.js.org and use the icon name in your components:

     <UIcon name="lucide:heart" /> 

Usage

• Run npm run dev to preview changes
• Verify logo, favicon, fonts, and theme in the browser
• Use a social preview checker to confirm the OG image
• UI Components: For customizing UI elements (buttons, cards, modals, etc.), refer to the NuxtUI