to /requestinfo
├── SectionTestimonialFalcon ← student success story
└── FooterStandard ← standard footer
Data: assets/content/home.json
Analytics: analyticsComposable.trackEvent() on all interactions
```
### Form Page Pattern
```vue
```
### Card Grid Pattern
```vue
```
### Parallax + Stats Pattern
```vue
{{ stat.value }}
{{ stat.label }}
```
---
## 5. Content JSON Pattern
All page content is driven by JSON files in `assets/content/`. This separates content from presentation and enables non-developer content updates.
### Convention
```
assets/
└── content/
├── home.json ← Homepage data
├── requestinfo.json ← Form page data
├── programs.json ← Program listings
└── shared.json ← Shared content (nav, footer)
```
### JSON Structure
Each JSON file maps directly to the components on its page:
```json
{
"hero": {
"title": "Transform Your Future",
"subtitle": "World-class online education for working professionals",
"bgImageSource": "images/hero-bg.jpg",
"displayGradient": true
},
"intro": {
"title": "Why Choose Our Programs?",
"body": "HTML content goes here with formatting preserved.
"
},
"accordion": [
{
"title": "Accessible online learning",
"body": "Our platforms are designed for flexibility...
",
"accordionId": "acc-1",
"image": "images/acc1.png"
},
{
"title": "Same faculty, same degree",
"body": "Online students learn from the same faculty...
",
"accordionId": "acc-2",
"image": "images/acc2.jpeg"
}
],
"testimonials": [
{
"quote": "This program changed my career trajectory.",
"author": "Jane Doe",
"authorTitle": "Class of 2024",
"image": "images/testimonial-jane.jpg"
}
],
"cards": [
{
"id": "card-1",
"title": "Business Administration",
"description": "Build leadership skills...",
"image": "images/card-business.jpg",
"link": "/programs/business"
}
],
"footer": {}
}
```
### Binding JSON to Components
```vue
{{ heroProps.title }}
```
### Key Rules
1. **All user-facing text lives in JSON**, not in `.vue` templates
2. **Images** are referenced by relative path from `public/` directory (e.g., `"images/hero.jpg"`)
3. **HTML in body fields** is rendered with `v-html` — sanitize if content is user-generated
4. **Each JSON key** corresponds to a page section and maps 1:1 to a component
5. **Shared data** (navigation, footer, site-wide text) goes in `shared.json`
---
## 6. Fallback Rules
When the 94 RDS components don't cover a specific visual requirement:
### Decision Order
1. **First: Find the closest RDS component** — an approximate match using an RDS component is always preferred over custom HTML. Customize with slots, CSS overrides, and creative prop usage.
2. **Second: Compose from multiple RDS components** — combine two or more RDS components to achieve the desired layout (e.g., `SectionApollo` wrapping a custom grid of `CardIcon` components).
3. **Third: Create a minimal custom component** in the `components/` directory:
```vue
```
### Custom Component Requirements
- **Must use** Bootstrap 5 grid system (`container`, `row`, `col-*`)
- **Must use** RDS theme CSS variables (e.g., `var(--rds-bg-primary)`, `var(--rds-text-primary)`)
- **Must include** a comment block explaining why no RDS equivalent exists
- **Must follow** the same prop-driven, JSON-content pattern as RDS components
- **Must be placed** in the `components/` directory (auto-imported by Nuxt)
---
## 7. Import & Configuration Notes
### Auto-Import (No Manual Imports Needed)
RDS components are automatically registered via `nuxt.config.ts`:
```typescript
// nuxt.config.ts
export default defineNuxtConfig({
components: [
{
path: "~/node_modules/@rds-vue-ui/",
ignore: ["**/index.ts", "**/index.js", "**/node_modules"],
}
],
build: {
transpile: [
'bootstrap',
'@rds-vue-ui/',
]
},
css: [
"@rds-vue-ui/rds-theme-base/style/rds-theme-base.scss",
"~/assets/scss/styles.scss"
],
})
```
**This means:**
- ❌ Do NOT write `import { HeroStandardApollo } from '@rds-vue-ui/hero-standard-apollo'`
- ✅ Just use `` directly in any template
- ✅ Use **PascalCase** component names in templates (e.g., ``, ``)
- ✅ Components are resolved automatically from `~/node_modules/@rds-vue-ui/`
### Installing New Components
```bash
yarn add --registry=https://npm.edpl.us @rds-vue-ui/{package-name}
```
After installation, the component is immediately available in all templates — no config changes needed.
### Theme Setup
The base theme **must** be included in `nuxt.config.ts` CSS:
```typescript
css: [
"@rds-vue-ui/rds-theme-base/style/rds-theme-base.scss",
// Additional theme overrides:
// "@rds-vue-ui/rds-theme-apollo/style/rds-theme-apollo.scss",
// "@rds-vue-ui/rds-theme-atlas/style/rds-theme-atlas.scss",
]
```
Available themes: `rds-theme-base`, `rds-theme-apollo`, `rds-theme-atlas`, `rds-theme-airuniversity`, `rds-theme-army`, `rds-theme-dsl`, `rds-theme-starbucks`.
### Analytics Composable
The `analytics-gs-composable` is not a visual component — it's a Vue composable for Google Analytics:
```vue
```
> **Note:** The analytics composable is the one exception to the "no manual imports" rule — composables must be imported explicitly.
---
## 8. Available Themes Reference
| Theme Package | Description | Use Case |
|---------------|-------------|----------|
| `rds-theme-base` | Base foundation styles (required) | Always include as the first CSS entry |
| `rds-theme-apollo` | Apollo design variant | Default landing page theme |
| `rds-theme-atlas` | Atlas design variant | Alternative modern theme |
| `rds-theme-airuniversity` | Air University branded | Military education sites |
| `rds-theme-army` | U.S. Army branded | Army-affiliated sites |
| `rds-theme-dsl` | DSL variant | Digital learning platforms |
| `rds-theme-starbucks` | Starbucks branded | Starbucks partnership sites |
---
## 9. Component Selection Examples
### Example 1: "I need a page with a big hero image, some FAQ questions, and a footer"
**Selection:**
1. `hero-standard-apollo` — Full-width hero with background image
2. `overlap-accordion-atlas` — FAQ accordion
3. `footer-standard` — Standard footer
### Example 2: "Show degree programs in a card layout with images"
**Selection:**
1. `section-card-apollo` — Wrapping section for the grid
2. `card-image-article` — Individual cards with image + title + description
3. Or `card-degree-text` if text-focused without images
### Example 3: "A form page to collect user information"
**Selection:**
1. `hero-standard-apollo` — Page hero
2. `section-apollo` — Form container section
3. `typeinput-text` — Name, email fields
4. `phone-input-apollo` — Phone field
5. `dropdown-apollo` — Program selection
6. `form-checkbox` — Consent checkbox
7. `footer-standard` — Page footer
### Example 4: "A page with parallax scrolling background and statistics"
**Selection:**
1. `section-parallax-apollo` — Parallax background section
2. Custom stats layout inside parallax using Bootstrap grid
3. Or `ranking-carousel-apollo` if stats are ranking-style
### Example 5: "Navigation that stays visible as user scrolls"
**Selection:**
1. `navbar-sticky-apollo` — Sticky nav (scrolls with page, sticks at top)
2. Or `navbar-fixed-atlas` — Fixed nav (always at top of viewport)