Configuration
app.config.ts and runtimeConfig reference for @xenterprises/nuxt-x-cards.
Configuration
All configuration lives under the x.cards namespace in the consumer's app/app.config.ts (must live in app/, not the project root — a root-level app.config.ts is silently ignored by Nuxt layers). Override only the keys you need; defu deep-merges your values over the built-in defaults shown below.
app.config.ts
export default defineAppConfig({
x: {
cards: {
colors: {
primary: 'cream',
neutral: 'olive',
accents: {
gold: '#FFAC00',
goldHover: '#E69B00',
blue: '#8BA8BD',
green: '#1BC651',
},
},
fonts: {
sans: "'Inter', ui-sans-serif, system-ui, sans-serif",
serif: "'Playfair Display', 'Editorial New', serif",
display: "'Inter', ui-sans-serif, system-ui, sans-serif",
googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap',
},
radius: {
card: '0.75rem',
panel: '1.5rem',
pill: '9999px',
},
spacing: {
baseUnit: 4,
},
defaults: {
filter: 'cinematic', // 'cinematic' | 'moody' | 'golden' | 'cool' | 'dramatic' | 'warm' | 'clean' | 'product' | 'none'
overlay: 'bottom-blur',
mediaAspectRatio: 'landscape',
productAspectRatio: 'product',
},
brand: {
appName: 'nuxt-x-cards',
logoIcon: 'i-lucide-square-x',
},
},
},
})
Schema Reference
| Key | Type | Default | Description |
|---|---|---|---|
x.cards.colors.primary | string | 'cream' | Tailwind palette name mapped to primary. Must have shades 50–950 in @theme static. |
x.cards.colors.neutral | string | 'olive' | Tailwind palette name mapped to neutral. Must have shades 50–950 in @theme static. |
x.cards.colors.accents.gold | string | '#FFAC00' | Gold accent — star ratings, comparison checkmarks, primary CTAs. |
x.cards.colors.accents.goldHover | string | '#E69B00' | Gold hover state. |
x.cards.colors.accents.blue | string | '#8BA8BD' | Secondary cool accent. |
x.cards.colors.accents.green | string | '#1BC651' | Success/positive accent. |
x.cards.fonts.sans | string | 'Inter', ui-sans-serif, system-ui, sans-serif | Sans-serif font stack used for body and UI. |
x.cards.fonts.serif | string | 'Playfair Display', 'Editorial New', serif | Serif font stack used for italic accent phrases and testimonial quotes. |
x.cards.fonts.display | string | 'Inter', ui-sans-serif, system-ui, sans-serif | Display font stack (defaults to sans). |
x.cards.fonts.googleFontsUrl | string | Inter + Playfair Display URL | Google Fonts stylesheet URL — must include all families referenced in the font stacks. Set empty string to disable. |
x.cards.radius.card | string | '0.75rem' | Border radius applied to cards. |
x.cards.radius.panel | string | '1.5rem' | Border radius applied to panels. |
x.cards.radius.pill | string | '9999px' | Border radius applied to pill/button elements. |
x.cards.spacing.baseUnit | number | 4 | Base grid unit in pixels — all padding, margin, and line-height values are multiples of this. |
x.cards.defaults.filter | 'cinematic' | 'moody' | 'golden' | 'cool' | 'dramatic' | 'warm' | 'clean' | 'product' | 'none' | 'cinematic' | Default image filter applied to hero and media cards when no explicit filter prop is provided. |
x.cards.defaults.overlay | 'bottom' | 'bottom-fade' | 'bottom-blur' | 'top' | 'full' | 'cinematic' | 'oura' | 'none' | 'bottom-blur' | Default gradient overlay applied to image cards when no explicit overlay prop is provided. |
x.cards.defaults.mediaAspectRatio | 'cinematic' | 'landscape' | 'square' | 'portrait' | 'landscape' | Default aspect ratio for XCardMedia. |
x.cards.defaults.productAspectRatio | 'square' | 'product' | 'portrait' | 'landscape' | 'product' | Default aspect ratio for XCardProduct. |
x.cards.brand.appName | string | 'nuxt-x-cards' | App name shown in footer and SEO. |
x.cards.brand.logoIcon | string | 'i-lucide-square-x' | 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.