title: Vue-InstantSearch with Algolia & Laravel: Hide result on empty query
body: <p>I'd like to figure out how to hide the index/result on an empty search query.</p>
  <p>In my blade I have the code (slightly modified from the official <a href="https://www.algolia.com/doc/guides/building-search-ui/going-further/conditional-display/vue/#handling-the-empty-query" rel="nofollow noreferrer">documentation</a>):</p>
  <pre><code>&lt;ais-instant-search index-name=&quot;myIndex&quot; :search-client=&quot;searchClient&quot;&gt;
  &lt;ais-search-box placeholder=&quot;Search here&quot;&gt;&lt;/ais-search-box&gt;
  
      &lt;ais-state-results&gt;
        &lt;template slot-scope=&quot;{ state: { query } }&quot;&gt;
          &lt;ais-hits v-if=&quot;query.length &gt; 0&quot;&gt;
      
              &lt;div slot=&quot;item&quot; slot-scope=&quot;{ item }&quot;&gt;
                  &lt;h2&gt;@{{ item.Title}}&lt;/h2&gt;
                  &lt;p&gt;@{{ item.Text}}&lt;/p&gt;
              &lt;/div&gt;
                                  
          &lt;/ais-hits&gt;
        &lt;/template&gt;
      &lt;/ais-state-results&gt; 
  &lt;/ais-instant-search&gt;
  </code></pre>
  <p>If I enter a search query this works fine, but on empty query this displays the following unwanted notification on my page (instead of the before unwanted index):</p>
  <pre><code>Use this component to have a different layout based on a certain state. 
  Fill in the slot, and get access to the following things on the slot-scope:
      
      results: [
        &quot;_rawResults&quot;,
        &quot;hits&quot;,
        &quot;nbHits&quot;,
  [..]
  </code></pre>
  <p>How can I hide this notification?</p>