Configuration
All key configuration is located in nuxt.config.ts at the project root.
App Name & Theme Color
Update the app name and browser theme color inside the app.head and pwa.manifest sections:
app: {
head: {
meta: [
{
name: 'theme-color',
content: '#EFEDE6', // browser toolbar color
},
],
},
},
pwa: {
manifest: {
name: 'Rosavo', // full app name
short_name: 'Rosavo', // name shown under the icon on home screen
description: 'Rosavo - Fashion for the future',
theme_color: '#EFEDE6',
background_color: '#EFEDE6', // splash screen background
},
},
theme-color in app.head and theme_color in pwa.manifest in sync — they control the same visual element in different contexts.PWA Icons
Icons are organized into two folders inside public/, plus two root-level Apple touch icon files:
| File / Folder | Used for |
|---|---|
public/android/ | Android home screen (6 sizes: 48 → 512px) |
public/ios/ | iOS home screen and splash (26 sizes: 16 → 1024px) |
public/apple-touch-icon.png | iOS "Add to Home Screen" icon (180×180, Safari applies gloss on older iOS) |
public/apple-touch-icon-precomposed.png | Same as above, but iOS uses it as-is without adding gloss effects |
The two root-level Apple touch icons are declared in nuxt.config.ts under app.head.link so browsers and iOS devices pick them up automatically:
app: {
head: {
link: [
{
rel: 'apple-touch-icon',
sizes: '180x180',
href: '/apple-touch-icon.png'
},
{
rel: 'apple-touch-icon-precomposed',
sizes: '180x180',
href: '/apple-touch-icon-precomposed.png'
},
],
},
},
To replace the default icons, swap the PNG files while keeping the exact same filenames and sizes.
Brand Colors
Brand colors are defined in app/assets/scss/_variables.scss:
$white-color: #fff; // white backgrounds
$main-yellow: #f5c102; // accent / highlight color
$tomato-color: #fe724e; // secondary accent
$border-color: #efe4ca; // input / card borders
$main-color: #0f1620; // primary brand color
$gainsboro-color: #dadfe2; // dividers / disabled states
$text-color: #6c757d; // secondary text
$accent-color: #ff4343; // alerts, errors, badges, sale price
$alabaster-color: #efede6; // surface background
$background-color: #efede6; // surface / card background
$error-color: #e74c3c; // error states
$platinum-color: #e2e2e2; // light surfaces
$cerulean-frost-color: #60a2d5; // info / links
The file also contains layout constants:
$screen-width: 600px; // max app width
$header-height: 42px; // top header height
$border-radius: 10px; // default border radius
Fonts
The project uses the Mulish font loaded via @nuxt/fonts from Google Fonts. It is configured in nuxt.config.ts:
fonts: {
families: [
{
name: 'Mulish',
provider: 'google',
weights: [400, 500, 600, 700, 800, 900],
},
],
},
To change the font, replace 'Mulish' with any Google Fonts family name and update the $mulish variable in _variables.scss:
$mulish: 'Mulish', sans-serif;
Environment Variables
The project does not require environment variables by default — it reads data from static JSON files in app/mocks/. If you connect a real backend, create a .env file at the project root:
NUXT_PUBLIC_API_BASE=https://api.yourserver.com
Then register it in nuxt.config.ts with an empty default — Nuxt automatically picks up NUXT_PUBLIC_* variables:
runtimeConfig: {
public: {
apiBase: '',
},
},
Then use it anywhere in your app via useRuntimeConfig():
const config = useRuntimeConfig()
const response = await fetch(`${config.public.apiBase}/products`)
Or inside a component:
<script setup>
const config = useRuntimeConfig()
const baseUrl = config.public.apiBase
</script>
runtimeConfig.public are exposed to both server and client. Never put secrets (API keys, tokens) there — use runtimeConfig (without public) for server-only values.See the API Usage section for full details.