Vuejs app override prerendered input values

[PierreCavalet]

Vuejs app override prerendered input values

Hi,

You've got to see prerendering as an image showing a static DOM until the app is loaded. The point is that in this static DOM, user can use the displayed inputs, whereas before using the plugin, the user was simply waiting for the app to load.

Basically, there are two worlds then : one static DOM image that has no link with your dynamic app, and the dynamic app that will take the place of your static DOM image.

What you can try to do however, is to inject the value entered in the static DOM by the user to the instance of Vue.

Here is a simple example illustrating the idea.

[PierreCavalet]

Hi,

thanks for the response. It seems like a great workaround, but it only works because you are loading a small Vue app, right ? because by the time the Vue app loads, the user input may change.

Here is an example: https://jsfiddle.net/pierrecavalet/n4sxy7ug/

Hi,

Well, yeah, on the one hand, the example I gave simulates slowness in loading external resources.

But on the other hand, even if the Vue app loads slowly, it will immediatly replace the root element (#app) by something else, so you never will have the case present in your code snippet. The user will simply not be able to write anything in the field, because it will not be visible. But this slowness can't really be due to CPU, more likely async actions like slow http requests conditionning the component's rendering.

Do not hesitate to give practical feedback of this solution applied to your case.

Thanks

[PierreCavalet]

Hi,

It works great !

This is an example of what I did with your solution:
https://github.com/PierreCavalet/vuejs-prerender-input-example

I used the created lifecycle hook to retrieve information from the DOM (created from the HTML) and to inject it in the App and to retrieve the input focus.

I use the mounted lifecycle hook to reinject the focus that I stored in the data.

Here is the idea:

<template>
  <div class="hello">
    <h1>prerender</h1>
    <input v-model="foo" v-prerender id="foo" type="text" />
    <input v-model="bar" v-prerender id="bar" type="text" />
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      foo: '',
      bar: '',
      prerenderFocusId: null
    }
  },
  created () {
    if (document.getElementById('foo')) {
      this.foo = document.getElementById('foo').value
    }
    if (document.getElementById('bar')) {
      this.bar = document.getElementById('bar').value
    }
    this.prerenderFocusId = document.activeElement.id
  },
  mounted () {
    if (this.prerenderFocusId) {
      document.getElementById(this.prerenderFocusId).focus()
    }
  }
}
</script>

Thanks again for your help.