JS Isn’t Firing

[nathanaelphilip]

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.

[eluzix]

I struggled with this issue for some time, i followed this example https://github.com/chrisvfritz/prerender-spa-plugin/tree/v3/examples/vue2-webpack-router and finally made it work.

What i did wrong is to use directly in index.html. I created an App.vue with the router in it and added render method: const vm = new Vue({ router, el: '#app', render: h => h(App), });

again - follow the example in the above link.

[JoshTheDerf]

@eluzix Glad you figured it out! I'm going to close this issue for now.

[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.

[ann8355]

@drewlustro @chrisvfritz i got the same problem, when i use @click event , it's not working in production then, i also use boostrap-vue slidebar , when i build finished in production, the slidebar toggle didn't work. please help me..... i spent a lot of time, but don't find how to fix it.

[Gregory-Ledray]

@robsterlini that was my problem! This fixed it for me:

const root = new Vue({
    router,
    render: h => h(App)
});

document.addEventListener('DOMContentLoaded', function () {
    if (document.getElementById('app') != null) {
        root.$mount('#app');
    } else {
        // <div id="app"> was removed due to prerendering
        root.$mount('body > div');
    }
});