Note: Examples are tested in Vue.js 1.0
When you start your Vue.js application, the first thing you do is probably getting data from your backend or api. Let’s say we have a list of comments from our backend server.
1 2 3 4 5 6 7 8
This is how our app flow looks like:
Doing this is totally fine but we can reduce this http request. Making our app flow
We can reduced a http request when initialize our application.
Let’s see how we can do this via Vue.js. We can achieve these by using 2 ways, through the native HTML5 custom attribute way and through
props supported by Vue.js.
1. HTML5 custom attribute
What we need to do is when our backend return rendered html root, we will insert the data as custom attribute.
1 2 3 4
Here is how you do it in PHP.
1 2 3 4 5
Here #commentList div is our Vue.js root component.
1 2 3 4 5 6 7
And we save one http request =).
2. Vue.js props
The second approach is same but it use the props. That’s if you are not writing Vue.js application by breaking down into component you should use the first approach.
1 2 3 4 5 6 7 8 9
Instead of injecting our data into the root this time we can inject directly.
1 2 3
Initialized our data for js application through server side instead of ajax call make our app rendered faster so we can deliver our application to user asap. We discussed 2 approach to do this in Vue.js. Both are fine but I recommend the second way, which let you to write application by composing component