Creates a `bundleRenderer` instance using pre-compiled application bundle (see [Creating the Server Bundle](#creating-the-server-bundle)). For each render call, the code will be re-run in a new context using Node.js' `vm` module. This ensures your application state is discrete between requests, and you don't need to worry about structuring your application in a limiting pattern just for the sake of SSR.
Creates a `bundleRenderer` instance using pre-compiled application bundle. The `bundle` argument can be one of the following:
- An absolute path to generated bundle file (`.js` or `.json`). Must start with `/` to be treated as a file path.
- A bundle object generated by `vue-ssr-webpack-plugin`.
- A string of JavaScript code.
See [Creating the Server Bundle](#creating-the-server-bundle) for more details.
For each render call, the code will be re-run in a new context using Node.js' `vm` module. This ensures your application state is discrete between requests, and you don't need to worry about structuring your application in a limiting pattern just for the sake of SSR.
Explicitly declare the base directory for the server bundle to resolve node_modules from. This is only needed if your generated bundle file is placed in a different location from where the externalized NPM dependencies are installed.
Note that the `basedir` is automatically inferred if you use `vue-ssr-webpack-plugin` or provide an absolute path to `createBundleRenderer` as the first argument, so in most cases you don't need to provide this option. However, this option does allow you to explicitly overwrite the inferred value.
---
### directives
Allows you to provide server-side implementations for your custom directives:
@ -220,7 +249,7 @@ Instead, it's more straightforward to run our app "fresh", in a sandboxed contex
<imgwidth="973"alt="screen shot 2016-08-11 at 6 06 57 pm"src="https://cloud.githubusercontent.com/assets/499550/17607895/786a415a-5fee-11e6-9c11-45a2cfdf085c.png">
The application bundle can be either a string of bundled code, or a special object of the following type:
The application bundle can be either a string of bundled code (not recommended due to lack of source map support), or a special object of the following type:
``` js
type RenderBundle = {
@ -230,9 +259,9 @@ type RenderBundle = {
}
```
Although theoretically you can use any build tool to generate the bundle, it is recommended to use webpack + `vue-loader` + [vue-ssr-webpack-plugin](https://github.com/vuejs/vue-ssr-webpack-plugin) for this purpose. This setup works seamlessly even if you use webpack's on-demand code splitting features such as dynamic `import()`.
Although theoretically you can use any build tool to generate the bundle, it is recommended to use webpack + `vue-loader` + [vue-ssr-webpack-plugin](https://github.com/vuejs/vue-ssr-webpack-plugin) for this purpose. The plugin will automatically turn the build output into a single JSON file that you can then pass to `createBundleRenderer`. This setup works seamlessly even if you use webpack's on-demand code splitting features such as dynamic `import()`.
The usual workflow is setting up a base webpack configuration file for the client-side, then modify it to generate the server-side bundle with the following changes:
The typical workflow is setting up a base webpack configuration file for the client-side, then modify it to generate the server-side bundle with the following changes:
1. Set `target: 'node'` and `output: { libraryTarget: 'commonjs2' }` in your webpack config.
Evan You
8 years ago