Comments (4)
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.
from prerender-spa-plugin.
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/
from prerender-spa-plugin.
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
from prerender-spa-plugin.
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.
from prerender-spa-plugin.
Related Issues (20)
- Plugin creates broken HTML HOT 1
- Puppeteer Issues on Oracle Linux 8 HOT 2
- Optimization of Puppeteer
- I have a Vue multi-page app, after prerender, all html files look the same. HOT 1
- render each route to an html file
- Only two pages are getting pre-rendered properly
- How to cache the result.
- docker
- on Safari and ios it doesn't always work
- [prerender-spa-plugin] Unable to prerender all routes! HOT 4
- How to configure puppeteer inside prerender-spa for Heroku
- How to launch puppeteer with { args: ['--no-sandbox'] }?
- "/" page flashing before routes load
- Unexpected token '?' with plugin only HOT 2
- Looking for maintainers! HOT 15
- Error during building example app: probably smth with websocket errno: -4039, code: 'ETIMEDOUT'
- Vue Prerender-SPA / Webpack - Application won't initialise with named cacheGroups unless explicitly listed in pages config chunks section?
- why no such file or directory
- Unable to prerender all routes! HOT 2
- Page refresh twice
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from prerender-spa-plugin.