{"id":12572,"library":"vue-server-renderer","title":"Vue 2 Server Renderer","description":"The `vue-server-renderer` package provides Node.js server-side rendering (SSR) capabilities for applications built with Vue.js 2.x. As of its final release, v2.7.16 (\"Swan Song\"), this package is intrinsically tied to Vue 2, which reached its End of Life (EOL) on December 31st, 2023. Consequently, `vue-server-renderer` is no longer actively maintained and will not receive further updates, including bug fixes or security patches. Its primary function was to enable universal Vue 2 applications, improving initial page load times and SEO by delivering fully-rendered HTML from the server. For any ongoing or new projects, developers are strongly advised to migrate to Vue 3 and utilize its corresponding SSR solution, `@vue/server-renderer`, which is under active development and support.","status":"abandoned","version":"2.7.16","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/vue","tags":["javascript","vue","server","ssr","typescript"],"install":[{"cmd":"npm install vue-server-renderer","lang":"bash","label":"npm"},{"cmd":"yarn add vue-server-renderer","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-server-renderer","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"While CommonJS `require` was historically prevalent in Node.js for Vue 2 SSR, modern build systems and Node.js often support ESM `import`.","wrong":"const { createRenderer } = require('vue-server-renderer')","symbol":"createRenderer","correct":"import { createRenderer } from 'vue-server-renderer'"},{"note":"Used for more advanced server-side rendering with a generated server bundle. This API is deprecated in Vue 3's `@vue/server-renderer`.","wrong":"const { createBundleRenderer } = require('vue-server-renderer')","symbol":"createBundleRenderer","correct":"import { createBundleRenderer } from 'vue-server-renderer'"},{"note":"This is a method of the object returned by `createRenderer` or `createBundleRenderer`, not a direct import. It returns a Promise in modern usage.","symbol":"renderToString (method)","correct":"renderer.renderToString(vm, context)"}],"quickstart":{"code":"import Vue from 'vue';\nimport { createRenderer } from 'vue-server-renderer';\n\n// 1. Create a Vue 2 application instance\nconst app = new Vue({\n template: `\n
\n `,\n data() {\n return {\n serverMessage: 'Rendered on the server.',\n count: 0\n };\n },\n methods: {\n increment() {\n this.count++;\n console.log('Client-side count:', this.count); // This log only appears in browser\n }\n }\n});\n\n// 2. Create a renderer instance\nconst renderer = createRenderer();\n\n// 3. Render the Vue app to an HTML string\nrenderer.renderToString(app)\n .then(html => {\n const fullHtml = `\n\n\n\n Vue 2 SSR Example\n \n\n\n ${html}\n \n\n\n `;\n console.log(fullHtml);\n })\n .catch(err => {\n console.error('Error during Vue 2 SSR:', err);\n process.exit(1);\n });\n","lang":"typescript","description":"This quickstart demonstrates how to create a basic Vue 2 application and render it to a static HTML string using `vue-server-renderer` for server-side rendering."},"warnings":[{"fix":"Migrate your application to Vue 3 and use `@vue/server-renderer` for SSR. If migration is not immediately feasible, consider commercial extended support options provided by third parties.","message":"Vue 2, and consequently `vue-server-renderer`, reached End of Life (EOL) on December 31st, 2023. The package is no longer maintained and will not receive any further bug fixes, security updates, or feature enhancements.","severity":"breaking","affected_versions":">=2.7.16"},{"fix":"Refer to the official Vue 3 SSR documentation for `@vue/server-renderer` to understand the new API surface and recommended setup, often in conjunction with Vite.","message":"Migration from Vue 2's `vue-server-renderer` to Vue 3's `@vue/server-renderer` involves significant API changes. For instance, `createBundleRenderer` is not available in Vue 3, and the rendering process has evolved.","severity":"breaking","affected_versions":">=2.7.16"},{"fix":"Wrap browser-only code in client-side lifecycle hooks (e.g., `mounted`) or use universal utility libraries that abstract platform-specific APIs. Implement conditional checks (e.g., `if (typeof window !== 'undefined')`) where necessary.","message":"Attempting to use browser-specific global APIs (e.g., `window`, `document`, `localStorage`) directly in your Vue components during server-side rendering will result in `ReferenceError: window is not defined` or similar errors, as Node.js environments do not have these globals.","severity":"gotcha","affected_versions":">=2.0"},{"fix":"Ensure that your Vue components produce identical HTML on both the server and client, especially regarding data states, conditional rendering, and element attributes. Avoid modifying DOM directly in `created` or `beforeMount` hooks.","message":"Hydration mismatches can occur when the client-side rendered virtual DOM tree does not precisely match the HTML structure generated by the server. This can lead to re-rendering of parts of the page, incorrect behavior, or console errors like 'Mismatching childNodes vs. VNodes'.","severity":"gotcha","affected_versions":">=2.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Wrap code accessing browser globals within `if (typeof window !== 'undefined')` checks or defer execution to client-side lifecycle hooks (e.g., `mounted`).","cause":"Attempting to access browser-specific global objects (like `window`, `document`, `navigator`) during server-side rendering.","error":"ReferenceError: window is not defined"},{"fix":"Review Webpack configurations for SSR-related plugins and ensure `process.env` variables are handled correctly. Isolate and test the component causing the issue; sometimes removing an import might reveal the root cause.","cause":"This error can occur in specific setups, often related to Webpack configurations (e.g., `SSRClientWebpackPlugin`) or when referencing `process` variables in a way that interferes with internal `vue-server-renderer` logic.","error":"TypeError: Cannot read property 'replace' of undefined at normalizeFile"},{"fix":"Ensure correct Vue 2 template syntax. For simple text interpolation, use `{{ variable }}`. Triple curly braces `{{{ }}}` were used for unescaped HTML in Vue 1 but are not valid for interpolation in Vue 2, which uses `v-html` for raw HTML.","cause":"Invalid syntax in templates provided to the renderer, commonly using triple curly braces `{{{ }}` for string interpolation instead of double `{{ }}`.","error":"Unexpected token"},{"fix":"Carefully inspect component logic that might produce different output between server and client, especially conditional rendering, `v-if`/`v-show` conditions, and initial data states. Ensure consistent data fetching and state serialization across environments.","cause":"A hydration mismatch where the Vue application's client-side output differs from the HTML sent by the server.","error":"The client-side rendered virtual DOM tree is not matching server-rendered content."}],"ecosystem":"npm"}