title: Laravel : How to hide the interpolation code before Vue js loads?
body: <p>I have a Laravel website, when I use Laravel to load my data from the database, then a pass the results to JavaScript this way</p>
  <pre><code>&lt;script&gt;
  window.forfaits = &lt;?php echo json_encode($results); ?&gt;;
  &lt;/script&gt;
  </code></pre>
  <p>Then I use Vue js <code>v-for</code> to display my data.
  The problem is that I see interpolation on the home page before Vue Js loads and v-cloak can't do the work since I'm getting my data with php then pass to js.</p>
  <p>How can I do so that interpolation doesn't show on the page?</p>
  <p><strong>UPDATE</strong></p>
  <p>By interpolation I mean this:</p>
  <p><a href="https://i.stack.imgur.com/rczxT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rczxT.png" alt="enter image description here" /></a></p>
  <p>And here is my main.blade.php file which is loaded as the home page:</p>
  <pre><code>&lt;script&gt;
  window.forfaits = &lt;?php echo json_encode($forfaits); ?&gt;;
  &lt;/script&gt;
  @extends('layouts.app')
  
  &lt;div&gt;
  @section('main-content')
  &lt;div class=&quot;col-sm-8 col-md-9&quot;&gt;
      &lt;div id=&quot;filter-items&quot;&gt;
          &lt;div class=&quot;product-item offre&quot; v-for=&quot;forfait in filteredForfaits&quot;&gt;
              &lt;div class=&quot;product-na&quot;&gt;
                  &lt;h3 class=&quot;product-name&quot;&gt;@{{forfait.nom_forfait}}&lt;/h3&gt;
                  &lt;div class=&quot;product-actions&quot;&gt;
                   ............................
  </code></pre>