# E Xode Vue Ssr Vue Ssr Architecture

> Vue SSR Architecture

- Skill: `tomevault-io/e-xode-vue-ssr-vue-ssr-architecture` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/e-xode-vue-ssr-vue-ssr-architecture`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/e-xode-vue-ssr-vue-ssr-architecture/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/e-xode-vue-ssr-vue-ssr-architecture

---


# Vue SSR Architecture

> Owns the full application architecture knowledge: stack, file structure, routing, SSR lifecycle, shared utilities, patterns, and conventions.

## Stack

| Layer        | Technology                                                   |
| ------------ | ------------------------------------------------------------ |
| Frontend     | Vue 3.5+ (Composition API) + Pinia 3 + Vue Router 5          |
| SSR          | Vite 7 + renderToString + Express middleware                 |
| UI           | Vuetify 4 (Material Design 3) + MDI icons (@mdi/js)          |
| i18n         | Vue i18n v11 (EN/FR, Composition API legacy: false)          |
| Backend      | Express 5 + express-session + session-file-store             |
| Database     | MongoDB 7 (native driver, connection pooling)                |
| Email        | Nodemailer 8                                                 |
| Sanitization | DOMPurify 3                                                  |
| Security     | Helmet 8 + CSP (production only) + express-rate-limit + CORS |
| Build        | Vite 7 (client + server bundles)                             |
| Tests        | Vitest 4 + @vue/test-utils + happy-dom                       |
| Lint         | ESLint 10 + eslint-plugin-vue + Prettier                     |
| SCSS         | sass-embedded (modern-compiler API)                          |

## File structure

See [references/file-structure.md](./references/file-structure.md) for the full annotated tree.

## Routing — locale-prefixed

All routes prefixed with `/:locale(en|fr)/`. See [references/routing-locale.md](./references/routing-locale.md).

## Layout system

| Layout  | Usage                     | Header | Footer |
| ------- | ------------------------- | ------ | ------ |
| public  | Landing, contact          | Yes    | Yes    |
| minimal | Auth pages                | No     | No     |
| app     | Dashboard, account, admin | Yes    | Yes    |

## SSR lifecycle

See [references/ssr-lifecycle.md](./references/ssr-lifecycle.md).

## Shared utilities inventory

| Module         | Exports                                                                                       |
| -------------- | --------------------------------------------------------------------------------------------- |
| `const.js`     | BCRYPT_ROUNDS, SECURITY_CODE_EXPIRY_MS, LOCALES, USER_SAFE_PROJECTION, EMAIL_REGEX, isAdmin() |
| `dbHelpers.js` | parseObjectId(), parsePagination(), findUserSafe(), getUserWithCounts()                       |
| `email.js`     | generateSecurityCode(), hashCode(), verifyCode(), sendSecurityCodeEmail(), sendContactEmail() |
| `security.js`  | getClientIp(), isIpBlocked(), recordLoginIp(), destroyUserSessions()                          |
| `api.js`       | apiFetch() — client fetch wrapper (AbortController 15s, rate-limit detection)                 |
| `mongo.js`     | connectDB(), getDB(), closeDB() — connection pooling + ensureIndexes                          |
| `analytics.js` | Google Analytics gtag injection (SSR head, GA_MEASUREMENT_ID)                                 |
| `captcha.js`   | Server-side reCAPTCHA v3 verification                                                         |
| `utils.js`     | escapeHtml()                                                                                  |
| `log.js`       | logInfo(), logWarn(), logError(), logDebug()                                                  |
| `logger.js`    | logEvent(db, event, meta) — MongoDB events collection                                         |

## Key patterns

### Adding an API endpoint

```js
export function setupMyFeatureRoute(app, db) {
  app.post('/api/my-feature', async (req, res) => {
    try {
      res.json({ status: 'success', data });
    } catch (err) {
      console.error(err);
      res.status(500).json({ error: 'Server error' });
    }
  });
}
```

Register in `src/api/router.js`.

### Adding a view

1. Create `src/views/MyPage/MyPageView.vue` + `MyPageView.scss`
2. Add route to `localeRoutes` in `src/router.js`
3. Add i18n keys in `en.json` + `fr.json`
4. Use `useLocalePath()` for navigation links

### Naming conventions

- Components: PascalCase (TheHeader, AdminUsersView)
- Stores: useXStore (useAuthStore)
- API: setupXRoute(app, db)
- Views: XView.vue in views/X/
- SCSS: XView.scss alongside XView.vue
- Composables: useX.js

## Vuetify gotchas

1. Typography: MD3 classes (text-headline-small, text-title-medium)
2. Icon prop: Use `:icon="mdiXxx"` (bound), import from `@mdi/js`
3. CSS reset removed: Vuetify 4 no longer resets CSS
4. v-list-item to: Works like router-link, use `:to="localePath('/path')"`

## Environment variables

See [references/env-vars.md](./references/env-vars.md).

## Where to look

| If you need…                  | Read                                                           |
| ----------------------------- | -------------------------------------------------------------- |
| Full file tree                | [references/file-structure.md](./references/file-structure.md) |
| Route table and locale system | [references/routing-locale.md](./references/routing-locale.md) |
| SSR build and render cycle    | [references/ssr-lifecycle.md](./references/ssr-lifecycle.md)   |
| API endpoint patterns         | [references/api-patterns.md](./references/api-patterns.md)     |
| Environment variables list    | [references/env-vars.md](./references/env-vars.md)             |

---
> Source: [e-xode/vue-ssr](https://github.com/e-xode/vue-ssr) — distributed by [TomeVault](https://tomevault.io).
<!-- tomevault:4.0:skill_md:2026-05-24 -->