vue-ssr-architecture

Guides Vue SSR project extension with file placement, routing, and shared utility patterns.

3|Updated Jan 14, 2023
One-click install
npx skills add https://github.com/e-xode/vue-ssr --skill vue-ssr-architecture
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vue-ssr-architecture
Source: https://github.com/e-xode/vue-ssr/tree/main/.claude/skills/vue-ssr-architecture
Command: npx skills add https://github.com/e-xode/vue-ssr --skill vue-ssr-architecture

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It prevents confusion and inconsistent implementation by giving a single architecture source of truth for how this Vue SSR starter kit is structured, routed, rendered, and extended.

Core Features & Use Cases

  • SSR architecture guidance: Explains the server request lifecycle from server.js through entry-server.js with renderToString, plus what the client does in entry-client.js.
  • Locale-prefixed routing conventions: Documents the /:locale(en|fr)/ route model, how router.js composes localeRoutes, and how useLocalePath() and switchLocale() are expected to be used.
  • Layout and naming patterns: Clarifies when to use public vs minimal vs app layouts, plus conventions for views, components, stores, composables, and SCSS co-location.
  • Shared utilities and API endpoint patterns: Provides a catalog of shared modules (db/email/security/api) and a repeatable setupXRoute(app/router, db) endpoint registration pattern.
  • Environment and SSR gotchas: Centralizes the required env vars and common pitfalls (Vuetify SSR behavior, SCSS auto-injection, Helmet CSP being production-conditional).

Quick Start

Ask: "Where should I add a new API endpoint and which file should I edit to wire it into the locale-prefixed SSR routing?"

Frequently Asked Questions about vue-ssr-architecture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How does Vue SSR rendering work with Express server entry flow?▼

Vue SSR rendering flows from server.js through entry-server.js using renderToString to generate HTML, while entry-client.js hydrates the application on the client side. This lifecycle ensures consistent server-side rendering behavior across locale-prefixed routes.

How do I add a new API endpoint to a Vue SSR Express application?▼

To add a new API endpoint in a Vue SSR Express application, use the setupXRoute(app/router, db) registration pattern. This convention wires shared utilities like database helpers and security modules into the Express app alongside the locale-prefixed routing.

How do I implement locale-prefixed routing in a Vue SSR application?▼

Locale-prefixed routing in Vue SSR uses a /:locale(en|fr)/ route model composed in router.js. You navigate using useLocalePath() and switchLocale() functions to maintain consistent locale paths across the server and client entry points.

When should I use different layouts in Vue SSR applications?▼

Use the public, minimal, or app layouts in Vue SSR based on the page's authentication and navigation requirements. Selecting the correct layout ensures proper component rendering and SCSS co-location within the locale-prefixed routing structure.

What are common Vue SSR gotchas with Vuetify and environment variables?▼

Common Vue SSR gotchas include Vuetify SSR rendering behaviors, SCSS auto-injection issues, and Helmet CSP being production-conditional. Centralizing required environment variables prevents inconsistent server-side rendering and shared utility failures.

Where should shared utilities be placed in a Vue SSR architecture?▼

Shared utilities like database, email, security, and API modules belong in a centralized catalog within the Vue SSR architecture. They are accessed via the setupXRoute registration pattern to ensure consistent environment-variable constraints and SSR behavior.