Vue SSR Assets Plugin

This is a Webpack 5 plugin for Vue 3 SSR applications to generate the manifest of critical assets. This package consists of two plugins: one for the client bundle and one for the server bundle similar to how SSR in Vue 2 worked.

Out of the box, Vue 3 SSR loads the entry bundle (e.g. main.js) that then asynchronously loads the remaining files needed for the page. However, this results in a poor user experience due to FOUC and poor web performance scores.

$3

``html











`

$3

`html















`

Client Plugin

This generates a JSON manifest that describes the dependent assets of each Vue component.

`ts
import { VueSsrAssetsClientPlugin } from 'vue-ssr-assets-plugin'

const clientEntryConfig = merge(commonConfig, {
target: 'web',

entry: {
main: ${srcDir}/entryClient.ts,
},

plugins: [
new VueSsrAssetsClientPlugin({
fileName: 'ssr-manifest.json',
}),
],
})
`

$3

`json
{
"main":{
"js":[
"/public/main.36e325f82fb1e4e13943.js"
],
"css":[
"/public/main.64381ac7ca0c0b20aee8.css"
]
},
"HomePage.vue":{
"js":[
"/public/762.929bac4bc20090ac3b46.js"
],
"css":[

]
},
"VueComposition.vue":{
"js":[
"/public/468.7c2ba2b804d1daa47030.js"
],
"css":[
"/public/468.ac8a11c16afa837c5a84.css"
]
},
"VueCompositionSetup.vue":{
"js":[
"/public/489.43cf0cdad14c7c1be803.js"
],
"css":[
"/public/489.afa23172870ddaef0e0e.css"
]
},
"VueOptions.vue":{
"js":[
"/public/599.f92fa658658a699cc9cc.js"
],
"css":[
"/public/599.ebbf4c878b37d1db1782.css"
]
}
}
`

$3

If you are using webpack-dev-middleware or webpack-dev-server to serve your frontend during development, then you will need to configure them to write the manifest file to disk instead of keeping the manifest file in their memory file system.

#### webpack-dev-webpack

`ts
import { Configuration } from 'webpack'
import HtmlWebpackPlugin from 'html-webpack-plugin'
import { VueSsrAssetsClientPlugin } from 'vue-ssr-assets-plugin'

export default {
target: 'web',

entry: {
main: './src/entryClient.ts',
},

output: {
path: './dist/client'
},

devServer: {
index: 'index.html',
devMiddleware: {
writeToDisk: (filePath) => filePath.includes('ssr-manifest.json'),
},
},

plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: './dist/client/index.html',
}),
new VueSsrAssetsClientPlugin({
fileName: './dist/server/ssr-manifest.json',
}),
],
} satisfies Configuration
`

#### webpack-dev-middleware

`ts
import webpack from 'webpack'
import webpackDevMiddleware from 'webpack-dev-middleware'
import express from 'express'

const app = express()
const compiler = webpack({ / Client Config / })

app.use(
webpackDevMiddleware(compiler, {
writeToDisk: (filePath) => filePath.includes('ssr-manifest.json'),
}),
)
`

Server Plugin

This modifies the ssrRender function that vue-loader automatically generates from your