JS Isn’t Firing

Hi Chris!

Thanks for the plugin and the demos!

I’ve got the build running properly, and the static pages are rendered, but no JS seems to be loading. I have a few @clicks and @submits that aren’t firing when clicked. Is there another step when you have some JS that allows the user to interact with the page?

in main.js

/* eslint-disable no-new */
let root = new Vue({
    router,
    store,
    render: h => h(App)
})

document.addEventListener('DOMContentLoaded', function () {
    root.$mount('#app')
})

the other configs are set up like the example in the Vue Spa repo.

[Hyra]

Same here, building hangs forever when using the captureAfterDocumentEvent

I tried moving the event from beforeMount to created, but neither seems to work.

[andrewbiang888]

I was having a similar problem, but I’m not using webpack-simple.

If you are NOT using webpack-simple (i.e. you have a build/webpack.prod.conf.js file), this should work: https://alligator.io/vuejs/vue-prerender-prerenderer/

Basically, you can use the NEXT version of prerender-spa-plugin and enjoy the renderer option.

NOTE: “SPA” is all caps in this: const PrerenderSPAPlugin = require(‘prerender-spa-plugin’)

BUT YOU PROBABLY NEED TO CHANGE

new PrerenderSPAPlugin({
      staticDir: __dirname,                     // LOOK AT THIS. LOOK AT THIS. LOOK AT THIS
      routes: ['/', '/about'], // List of routes to prerender.
      renderer: new PuppeteerRenderer({        //Yes, checkout the renderer option. It is oh so sweet.
        renderAfterElementExists: '#app'
        // Wait to render until a specified event is fired on the document.
        // renderAfterDocumentEvent: 'renderIt'
      })

TO:

new PrerenderSPAPlugin({
      staticDir: path.resolve(__dirname, '../dist'),                      // CHANGE THIS!!!!!!!!!!!!!!!!
      routes: ['/', '/about'], // List of routes to prerender.
      renderer: new PuppeteerRenderer({
        renderAfterElementExists: '#app'
        // Wait to render until a specified event is fired on the document.
        // renderAfterDocumentEvent: 'renderIt'
      })
    })

This worked for me. I hope this eases your pain. The next version of this plugin looks good.