Vue implementation with async data

Hello, first off, thanks for the great plugin!

So I’ve been trying to build a Vue.js demo that used this prerender-spa-plugin to generate a static site. I’ve got a good start but was wondering if you could shed some light on some questions I have.

First off, the repo is here --> https://github.com/stursby/vue-prerender-spa-demo

And live Demo --> https://vue-prerender-spa-demo.surge.sh/

So to the issues/questions/etc:

• The ajax data is correctly being rendered in the HTML, but my ajax request is sill being made
• So, is there a way to either to inject that JSON data as a window object during build? (or maybe add a ssr="true" key somewhere so I could check in my Vue app an not make the ajax request
• I’ve currently got the captureAfterTime set to 1000ms… but I know this is fragile. I’ve tried some of the other methods with no success… any help here would be great

Any thoughts would be much appreciated! Thanks 🙌

[stursby]

I just have it locally. Looks like this:

Config:

     // Prerender
      console.log(` 🚀 Prerendering...`)
      const prerenderPlugin = new PrerenderSpaPlugin(
        // entry
        path.join(__dirname, '/dist'),
        // routes
        ['/', '/about', ...usersRoutes],
        // options
        { captureAfterDocumentEvent: 'render-done' }
      )
      config.plugins.push(prerenderPlugin)

Vue: component

<script>
async mounted() {
    const url = 'https://jsonplaceholder.typicode.com/users'
    const { data } = await axios.get(url)
    this.users = data
    this.$nextTick(() => {
      document.dispatchEvent(new Event('render-done'))
    })
  }
</script>

Is the issue that I’m only dispatching the Event in Vue components that fetch data?

I see that you can combine captureAfterTime and captureAfterDocumentEvent but not sure how to implement that… do I define both keys?

[drewlustro]

Closing for now – ongoing investigation as to whether this is a phantomjs bug in #31