Configuration
app.config.ts and runtimeConfig reference for @xenterprises/nuxt-x-cards.
Configuration
app.config.ts
export default defineAppConfig({
x: {
cards: {
colors: {
primary: 'cream',
neutral: 'olive',
accents: {
gold: '#C9A96E',
goldHover: '#B8965D',
blue: '#4A90D9',
green: '#5A9E6F',
},
},
fonts: {
sans: "'Inter', system-ui, sans-serif",
serif: "'Playfair Display', Georgia, serif",
display: "'Inter', system-ui, sans-serif",
googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap',
},
radius: {
card: '0.75rem',
panel: '1rem',
},
spacing: {
baseUnit: 4,
},
defaults: {
filter: 'cinematic', // 'cinematic' | 'moody' | 'golden' | 'cool' | 'dramatic' | 'none'
overlay: 'gradient',
mediaAspectRatio: '16/9',
productAspectRatio: '3/4',
},
brand: {
appName: 'My App',
logoIcon: 'i-lucide-box',
},
},
},
})
Schema Reference
| Key | Type | Default | Description |
|---|---|---|---|
x.cards.colors.primary | string | 'cream' | Primary color name token. |
x.cards.colors.neutral | string | 'olive' | Neutral color name token. |
x.cards.colors.accents.gold | string | '#C9A96E' | Gold accent hex value. |
x.cards.colors.accents.goldHover | string | '#B8965D' | Gold hover state hex value. |
x.cards.colors.accents.blue | string | '#4A90D9' | Blue accent hex value. |
x.cards.colors.accents.green | string | '#5A9E6F' | Green accent hex value. |
x.cards.fonts.sans | string | Inter stack | Sans-serif font stack. |
x.cards.fonts.serif | string | Playfair Display stack | Serif font stack used in testimonial quotes. |
x.cards.fonts.display | string | Inter stack | Display font stack. |
x.cards.fonts.googleFontsUrl | string | Playfair Display URL | Google Fonts URL injected into the document. |
x.cards.radius.card | string | '0.75rem' | Border radius applied to cards. |
x.cards.radius.panel | string | '1rem' | Border radius applied to panels. |
x.cards.spacing.baseUnit | number | 4 | Grid base unit in pixels. |
x.cards.defaults.filter | 'cinematic' | 'moody' | 'golden' | 'cool' | 'dramatic' | 'none' | 'cinematic' | Default image filter applied to media components. |
x.cards.defaults.overlay | string | 'gradient' | Default overlay style for media cards. |
x.cards.defaults.mediaAspectRatio | string | '16/9' | Default aspect ratio for XCardMedia. |
x.cards.defaults.productAspectRatio | string | '3/4' | Default aspect ratio for XCardProduct. |
x.cards.brand.appName | string | 'My App' | App name used in component titles. |
x.cards.brand.logoIcon | string | 'i-lucide-box' | Iconify icon class for the logo. |
Runtime Config / Environment Variables
None required.
AI Context
package: "@xenterprises/nuxt-x-cards"
config-key: x.cards
use-when: >
Customising design tokens (colors, fonts, border radius, spacing, image
filter/overlay defaults, or brand name/logo) for the nuxt-x-cards layer.
All XCard* components read this config via useXCards() — override only the
keys you need; defu deep-merges your values over the built-in defaults.