CODEWITHSUNDEEP
vue.jsasp.net-core
mko
mko

Reputation: 7325

Vue syntax rendered after page load

I am a newbie in Vue.js. I am currently using Vue.js on top of asp.net core.

I noticed that in 99% time page is served before Vue.js syntax is rendered. How can I prevent this from happening?

For example

When page load first I see

<ol>
<li v-for="u in subscribers">{{ u.name }} - {{u.email}}</li>
</ol>

And then after split of a second I see

<ol>
<li>John - [email protected]</li>
<li>John1 - [email protected]</li>
</ol>

Upvotes: 0

Views: 682

Answers (1)

Sami Kuhmonen
Sami Kuhmonen

Reputation: 31173

Since the template is written inside the page HTML code it will always be shown first by the browser when it’s loading the page. Usually Vue components include a template which is used to render the data and this won’t happen.

You can take the template that is written on the page and add it to the Vue component so it will use it to render, not the contents of the page. The simplest way is to just add the template as a parameter to the Vue component, but later on it may be better to use separate template files, or Single File Components which may take a bit more work.

Upvotes: 1

Related Questions