Laravel: How to hide interpolation code before loading Vue js?

Question

I have a laravel site when I use laravel to load my data from a database and then pass the Javascript results this way

<script> window.forfaits = <?php echo json_encode($results); ?>; </script> 

Then I use Vue js v-for to display my data. The problem is that I see the interpolation on the home page before Vue Js loads and v-cloak can not do the job, since I get my data with php and then go to js.

How can I make interpolation readings appear on the page?

UPDATE

Interpolation i means the following:

And here is my main.blade.php file, which loads as the main page:

 <script> window.forfaits = <?php echo json_encode($forfaits); ?>; </script> @extends('layouts.app') <div> @section('main-content') <div class="col-sm-8 col-md-9"> <div id="filter-items"> <div class="product-item offre" v-for="forfait in filteredForfaits"> <div class="product-na"> <h3 class="product-name">@{{forfait.nom_forfait}}</h3> <div class="product-actions"> ............................ 

Answer 1

If you are trying to use v-cloak to hide uncompiled templates, you must create a CSS rule as described here: https://vuejs.org/v2/api/#v-cloak

It works very simply. Uncompiled templates are hidden using the v-cloak css rule. If the Vue compiler sees the v-cloak attribute on the compiled template, it simply removes the attribute and your component appears on the page.

 [v-cloak] { display: none; } 

Did you turn it on?

In addition, you must be sure that the css file containing the [v-cloak] rule will be loaded at the same time as creating unrelated Vue templates. You must solve critical css or use rel="preload" (already available in modern browsers) for this css snippet.

Answer 2

First of all, do you download Vue from the bottom of your HTML code? if possible, you should put it in your head tag so that it can be downloaded earlier.

But, my advice for you is to build your appue Vue app, can I see that you are creating a panel from something? Perhaps you should consider creating everything with Vue and get the data with the API endpoint that Laravel will provide you with as I built it.