How to load Vuetify when using the prerender-spa-plugin?

Question

When we run our Vuetify application in development mode using npm run dev, it works properly.

However, when we build it using the prerender-spa-plugin, the Vuetify CSS files load properly, but none of the JavaScript components work (i.e. clicking buttons to open the drawer doesn't work etc.).

We've tried hardcoding a script tag to Vuetify's CDN but that hasn't worked.

We've searched on GitHub for projects that use Vuetify and prerender-spa-plugin, but were not able to notice any difference between our code and other people's code.

We've tried to play with the settings of the Renderer() to troubleshoot the bug, but could not identify the root cause of the issue.

Webpack configuration settings:

webpackConfig.plugins.push(
new PrerenderSPAPlugin({
    // Required - The path to the webpack-outputted app to prerender.
    staticDir: path.join(__dirname, '..', 'dist'),

    // Required - Routes to render.
    routes: [ '/', '/about-us.html', '/act-now.html' ],

    postProcess (renderedRoute) {
    // Ignore any redirects.
    renderedRoute.route = renderedRoute.originalRoute
    // Basic whitespace removal. (Don't use this in production.)
    renderedRoute.html = renderedRoute.html.split(/>[\s]+</gmi).join('><')
    // Remove /index.html from the output path if the dir name ends with a .html file extension.
    // For example: /dist/dir/special.html/index.html -> /dist/dir/special.html
    if (renderedRoute.route.endsWith('.html')) {
        renderedRoute.outputPath = path.join(__dirname, '..', 'dist', renderedRoute.route)
    }

    return renderedRoute
    },

    renderer: new Renderer({
    renderAfterDocumentEvent: 'app.rendered',
    headless: false
    })
})
)

main.js

import '@babel/polyfill'
import 'core-js/es6/promise'
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import '@/plugins/vuetify'
import App from './App'
import router from './router'

import 'vuetify/dist/vuetify.min.css'
import '../static/css/ms-theme.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App),

  mounted () {
    document.dispatchEvent(new Event('app.rendered'))
  }
})

Groxan Groxan · Accepted Answer · 2020-05-13T12:46:50

Unfortunately, adding data-server-rendered="true" didn't help, but I found the way to solve that problem in my case: https://stackoverflow.com/a/61774969/9801398

How to load Vuetify when using the prerender-spa-plugin?

2 Answers