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.