Vue3 quick start

Integrate a search-as-you-type experience into your Vue app.

1. Create a Vue application

Run the npm create tool to install base dependencies and create your app folder structure.

npm create vue@latest my-app

2. Install the library of search components

Navigate to your Vue app and install vue-instantsearch, @meilisearch/instant-meilisearch, and instantsearch.css.

npm install vue-instantsearch @meilisearch/instant-meilisearch instantsearch.css

• Vue InstantSearch: front-end tools to customize your search environment
• instant-meilisearch: Meilisearch client to connect with Vue InstantSearch
• instantsearch.css (optional): CSS library to add basic styles to the search components

3. Add InstantSearch

Include InstantSearch into main.js to include the Vue InstantSearch library.

import { createApp } from 'vue';
import App from './App.vue';
import InstantSearch from 'vue-instantsearch/vue3/es';

const app = createApp(App);
app.use(InstantSearch);
app.mount('#app');

4. Initialize the search client

Add the code below to the App.vue file.

<template>
  <ais-instant-search :search-client="searchClient" index-name="steam-videogames">
  </ais-instant-search>
</template>

<script>
import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";

export default {
  data() {
    return {
      searchClient: instantMeiliSearch(
        'https://ms-adf78ae33284-106.lon.meilisearch.io',
        'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303',
      ).searchClient,
    };
  },
};
</script>

These URL and API key point to a public Meilisearch instance that contains data from Steam video games.

The ais-instant-search widget is the mandatory wrapper that allows you to configure your search. It takes two props: the search-client and the index-name.

5. Add a search bar and list search results

Add the ais-search-box and ais-hits widgets inside the ais-instant-search wrapper widget.

Import the CSS library to style the search components.

<template>
  <ais-instant-search :search-client="searchClient" index-name="steam-videogames">
  <ais-search-box />
    <ais-hits>
      <template v-slot:item="{ item }">
   <div>
     <img :src="item.image" align="left" :alt="item.name"/>
          <h2>{{ item.name }}</h2>
     <p> {{ item.description }}</p>
   </div>
      </template>
    </ais-hits>
  </ais-instant-search>
</template>

<script>
import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";
import "instantsearch.css/themes/satellite-min.css";

export default {
data() {
    return {
    searchClient: instantMeiliSearch(
        'https://ms-adf78ae33284-106.lon.meilisearch.io',
        'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303',
    ).searchClient,
    };
},
};
</script>

Use the slot directive to customize how each search result is rendered.

Use the following CSS classes to add custom styles to your components: .ais-InstantSearch, .ais-SearchBox, .ais-InfiniteHits-list, .ais-InfiniteHits-item

6.Start the app and search as you type

Start the app by running:

npm run dev

Now open your browser, navigate to your Vue app URL (e.g., localhost:5173), and start searching.

Encountering issues? Check out the code in action in our live demo!

Next steps

Want to search through your own data? Create a project in the Meilisearch Dashboard. Check out our getting started guide for step-by-step instructions.