How do I set Algolia to not return any results if the query is blank Laravel & Vue Instant Search - laravel

Question

Hey I use Algolia on my new Laravel project but I get into this
that Algolia displays all data that I have " Titel - description ".
What I want is only display result when I type something in the search box.
my Html Code
<div id="app">
<!-- Components will go here -->
<ais-index app-id="{{ config('scout.algolia.id') }}"
api-key="{{ env('ALGOLIA_SEARCH') }}"
index-name="posts">
<ais-search-box placeholder="Find products..."></ais-search-box>
<ais-results>
<template slot-scope="{ result }">
<div>
<h4>#{{ result.progName }}</h4>
<ul>
<li>#{{ result.description }}</li>
</ul>
</div>
</template>
</ais-results>
</ais-index>
</div>
Post Model
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use Laravel\Scout\Searchable;
class Post extends Model
{
//
use Searchable;
}

Answer 1

You should replace ais-results by a component which hides it based on the query. The component looks something like this:
<!-- MyResults.vue -->
<template>
<div v-if="query.length > 0">
<slot name="header"></slot>
<slot name="default" v-for="(result, index) in results" :result="result" :index="index">
{{index}}. Result 'objectID': {{ result.objectID }}
</slot>
<slot name="footer"></slot>
</div>
</template>
<script>
import { Component } from 'vue-instantsearch';
export default {
mixins: [Component],
computed: {
query() {
return this.searchStore.query;
},
results() {
return this.searchStore.results;
},
},
};
</script>
Then replace your usage for ais-results with your own my-results component:
<div id="app">
<!-- Components will go here -->
<ais-index app-id="{{ config('scout.algolia.id') }}"
api-key="{{ env('ALGOLIA_SEARCH') }}"
index-name="posts">
<ais-search-box placeholder="Find products..."></ais-search-box>
<my-results>
<template slot-scope="{ result }">
<div>
<h4>#{{ result.progName }}</h4>
<ul>
<li>#{{ result.description }}</li>
</ul>
</div>
</template>
</my-results>
</ais-index>
</div>