{"id":26621,"library":"vue-ssr-webpack-plugin","title":"Vue SSR Webpack Plugin","description":"A Webpack plugin for Vue 2.x server-side rendering that generates a bundle manifest (JSON) from Webpack code-split server builds, enabling seamless use with Vue's bundleRenderer. Current stable version is 3.0.0. Requires vue-server-renderer >= 2.2.0. Key differentiator: automatically packs multiple output files from on-demand code-splitting into a single JSON bundle, and optionally generates a client manifest for automatic preload/prefetch directives. Release cadence is low (major versions align with Vue 2 SSR API changes).","status":"active","version":"3.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/vue-ssr-webpack-plugin","tags":["javascript","vue","ssr","webpack","plugin"],"install":[{"cmd":"npm install vue-ssr-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add vue-ssr-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-ssr-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for bundleRenderer (peer requirement, not directly imported by plugin)","package":"vue-server-renderer","optional":false},{"reason":"Peer dependency for plugin API","package":"webpack","optional":false}],"imports":[{"note":"ESM default export is an object with named exports; CJS require returns the same object. For CJS, use destructuring as shown.","wrong":"const VueSSRServerPlugin = require('vue-ssr-webpack-plugin')","symbol":"VueSSRServerPlugin","correct":"import { VueSSRServerPlugin } from 'vue-ssr-webpack-plugin'"},{"note":"Available since v2.0. Same import pattern as ServerPlugin.","wrong":"const { VueSSRClientPlugin } = require('vue-ssr-webpack-plugin')","symbol":"VueSSRClientPlugin","correct":"import { VueSSRClientPlugin } from 'vue-ssr-webpack-plugin'"},{"note":"Must use 'new' keyword; plugin is a class constructor.","wrong":"VueSSRServerPlugin({ filename: 'my-bundle.json' })","symbol":"Plugin instantiation","correct":"new VueSSRServerPlugin({ filename: 'my-bundle.json' })"}],"quickstart":{"code":"const { VueSSRServerPlugin } = require('vue-ssr-webpack-plugin');\nconst path = require('path');\n\nmodule.exports = {\n  target: 'node',\n  entry: './src/server-entry.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'server-bundle.js',\n    libraryTarget: 'commonjs2'\n  },\n  plugins: [\n    new VueSSRServerPlugin({ filename: 'vue-ssr-bundle.json' })\n  ]\n};","lang":"javascript","description":"Webpack server config using VueSSRServerPlugin to generate a bundle JSON for Vue SSR."},"warnings":[{"fix":"Upgrade vue-server-renderer to >=2.2.0, or stay on vue-ssr-webpack-plugin@1.x for older versions.","message":"Version 3.x drops support for vue-server-renderer < 2.2.0. Plugin will not work with Vue 1.x or Vue 2.0.x SSR.","severity":"breaking","affected_versions":">=3.0.0"},{"fix":"Remove CommonsChunkPlugin from server Webpack config.","message":"Do not use CommonsChunkPlugin in your server bundle config. The server bundle should have a single entry point; code splitting is handled by the plugin.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', minChunks: Infinity }) before VueSSRClientPlugin.","message":"Client manifest generation requires webpack runtime chunk (via CommonsChunkPlugin) to be separate. Failure to do so will cause missing async chunk injection.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"For Webpack 4+: use optimization: { runtimeChunk: { name: 'manifest' } } and splitChunks options.","message":"CommonsChunkPlugin is deprecated in Webpack 4+. Use splitChunks and optimization.runtimeChunk instead.","severity":"deprecated","affected_versions":">=3.0.0"},{"fix":"Configure HtmlWebpackPlugin with { inject: false }.","message":"When using client manifest with html-webpack-plugin, set inject: false to avoid duplicate script tags.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Upgrade to vue-ssr-webpack-plugin@4.0.0 or later (if available) or downgrade to Webpack 4.","cause":"Using VueSSRServerPlugin with Webpack 5+ which removed tapAsync from certain hooks.","error":"TypeError: Cannot read property 'tapAsync' of undefined"},{"fix":"Ensure server config has exactly one entry point and remove any plugins that produce multiple outputs.","cause":"Server Webpack config has multiple entry points or uses CommonsChunkPlugin.","error":"Error: [vue-ssr-webpack-plugin] server bundle should have a single entry. Found multiple: [object Object]"},{"fix":"Check Webpack output path; ensure build succeeds without errors. For custom filename, provide absolute path or use relative path from output directory.","cause":"Plugin output file not generated because Webpack build failed or path is incorrect.","error":"no such file or directory, open 'vue-ssr-bundle.json'"},{"fix":"Run npm install vue-server-renderer --save (requires peer version >=2.2.0).","cause":"vue-server-renderer is not installed or not listed in dependencies.","error":"Cannot find module 'vue-server-renderer'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}