2

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'))
  }
})

2 Answers 2

1

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

0

The answer was to set data-server-rendered="true" on <v-app>.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.