Guide to Using @umajs/plugin-vue-ssr for Vue Server-Side Rendering with UMajs

UMajs released a Vue SSR plugin (@umajs/plugin-vue-ssr) that enables seamless server-side rendering (SSR) and client-side rendering (CSR) for Vue applications within the UMajs framework.

The plugin extends UMajs's unified Result object, adding a Result.vue rendering method that can be called from controllers without routing constraints, and integrates with Koa's ctx .

Key features include no default routing, unified handling of SSR/CSR, high‑performance HTML generation via htmlWebpackPlugin, support for SEO‑friendly template interpolation, native Vue development experience, server‑side data injection, dynamic SSR/CSR switching with caching, compatibility with other Koa frameworks, and support for MPA page‑level builds.

Installation is done via yarn add @umajs/plugin-vue-ssr --save , followed by adding scripts in package.json . Build the production app with npx ssr build and analyze bundles with npx ssr analyzer .

Project structure places page components under web/pages with an App.vue and index.js entry; the plugin allows passing initial props via Result.vue('index', {title:'xxx', keywords:'xxx', description:'xxxx', say:'hi!'}) , which also populate HTML meta tags.

Data can be provided either through server‑side props (initProps) or the asyncData static method, which receives the Vuex store and router, performs asynchronous requests, and merges results into the store.

The framework includes built‑in CSS handling with vue-style-loader, support for scoped CSS, preprocessors (less/scss), and CSS Modules, all usable without extra configuration.

Additional guidance covers Vuex integration, nested routing with vue‑router, and notes on SSR limitations such as the inability to use dynamic import for lazy‑loaded routes.

Example repositories and resources are provided for further reference.