You might have noticed that sometimes when the page is still loading, your Vue.js application doesn’t show the text yet. Instead, it shows something like this {{message}}. This occurs when you had declared the text inside the data function of your script, and not inside the HTML elements. This is undoubtedly an unnecessary thing and you might want to know how to hide Vue.js syntax while the page is loading.
Sometimes this does happen during the development. An immediate reaction to this might be something like: “Damn, what did I done wrong this time?”. And the joy with a feeling of achievement starts to vanish. However, the text loads in a microsecond, and the mini heart attack is gone. This is pretty annoying, isn’t it? The end-user of your application might be annoyed even more than you.
When does this problem occur?
Let’s take a classic example from Vue.js guide. Here we have a html code:
<div id="app">
{{ message }}
</div>And here is the JavaScript code:
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})As you see, the message itself is not in the HTML body. So for a brief moment while the page is loaded, the text “{{ message }}” might be shown instead of the “Hello Vue!”. To better illustrate this case, let’s set browser throttle to get a slower load speed:
What are we getting now while the page is not fully loaded?
Why you are seeing a syntax instead of the real text?
The reason for this is because the text is being passed from a JavaScript. As the data is being passed from the code that is injected as a script, it affects the performance more or less.
When you had declared the text inside an HTML element like <h1>, the whole page will be served to the client. And as the page will be received by the browser, it will immediately be started loading. As the text is in the HTML file itself, it doesn’t take long to display it. However, when the text is being passed from some distance, the Vue.js syntax might be shown while loading.
If you are testing your application locally, you might not see this problem occurring. As all the files are hosted on your machine, the load speed will be lightning fast. However, imagine a user that is located in India that is accessing an application that is hosted on a server that is located in the US, or a US resident is using a Vue.js application that is hosted on a server located in Australia. Some latency will definitely be there. It might be enough
So the partial reason for this might be the high latency of a server or of your internet. However, improving it is not the wisest way to solve the problem. And of course, we can’t blame the servers for this problem. Dig deeper to find the reason and you will find it – it’s Vue.js itself. Well, that sounds dramatic, doesn’t it? To be precise, it’s because the Vue feature called declarative rendering.
Another reason, if you are using a perfect server with high latency for hosting your application, is the slow speed of the user internet. If he doesn’t have fast internet, the case of syntax showing during the load time will be pretty annoying for the end-user.
And the most important part – a solution. How to hide Vue.js syntax while the page is loading
There is a directive called v-cloak. Adding this to the element will remove this problem. Instead of the syntax, nothing will be shown until it is loaded. And when it loads, a full text, as it was wanted, will be shown. So upgrading your application like this will solve this problem:
<div v-cloak id="app">
{{ message }}
</div>Now we need to use some CSS in order to show nothing while the text is still loading:
<style>
[v-cloak] {
display:none;
}
</style>NOTE: This problem doesn’t occur with the newest versions of the Vue. However, if you are dealing with a legacy system that is using the old Vue.js version, this is the solution you might need.