vite-ssr-vue2
v1.0.18
Published
Vite utility for vue2 server side rendering
Downloads
595
Maintainers
Readme
vite-ssr-vue2
For building powerful Server Side Rendering APP with Vite ⚡(Next Generation Frontend Tooling)
Features
- Fast HMR with vite
- Easy development start
- Small library size
- Compatible with Vite's plugin
- Flexible configuration and full control
- Support
shouldPreload
andshouldPrefetch
Documentation
https://webigorkiev.github.io/vite-ssr-vue2/
Installation
Create a normal Vite project for Vue2. (see tests/playground)
Usage
// entry-client.ts
import ssr from "vite-ssr-vue2/client";
import App from "./App.vue";
export default ssr(App);
// entry-server.ts
import ssr from "vite-ssr-vue2/server";
import App from "./App.vue";
export default ssr(App);
There can be only one entry point for the server and for the client. Plugin automatically changes alias for SSR. If for some reason you need separate entry points, then specify the server side in the ssr parameter
name
: plugin name (default: vite-ssr-vue2)ssr
: server entry point
created
: ({app, url, isClient, initialState}) - Hook that is called before each request, can be async. May return {router, store, head}mounted
: ({app, url, isClient, initialState}) - Hook that is called before each request, can be async. Fire after all internal operations, as router isReadyrendered
: ({app, url, isClient, initialState}) - Hook that is called before each request, can be async. After ssr rendered or after replace state in clientserializer
: Custom function for serialization initial stateshouldPreload
: shouldPreload aka shouldPreloadshouldPrefetch
: shouldPrefetch aka shouldPrefetchmount
: mount options for client siderootProps
: root props
Accessing context, res and req objects
In the built-in dev server, context, req, res objects are passing to created hook. In production, you must pass these objects to the rendering function in order to have them available.
({html} = await entry(url, {
manifest,
res,
req,
context
}));
Redirect
The redirect method add to res object for development, and requires implementation in production.
ClientOnly
Aka vite-ssr, vite-ssr-vue2 exports ClientOnly component that renders its children only in the browser:
import { ClientOnly } from "vite-ssr-vue2"
<div>
<ClientOnly>
<!--- your code --->
</ClientOnly>
</div>
Production
Run vite build
for buildling your app. This will create 2 builds (client and server) that you can import and use from your Node backend.