Home

Awesome

<p align="center"> <img src="https://raw.githubusercontent.com/meilisearch/integration-guides/main/assets/logos/meilisearch_vuejs.svg" alt="Meilisearch-Vue" width="200" height="200" /> </p> <h1 align="center">Meilisearch Vue</h1> <h4 align="center"> <a href="https://github.com/meilisearch/meilisearch">Meilisearch</a> | <a href="https://www.meilisearch.com/cloud?utm_campaign=oss&utm_source=github&utm_medium=meilisearch-vue">Meilisearch Cloud</a> | <a href="https://www.meilisearch.com/docs">Documentation</a> | <a href="https://discord.meilisearch.com">Discord</a> | <a href="https://roadmap.meilisearch.com/tabs/1-under-consideration">Roadmap</a> | <a href="https://www.meilisearch.com">Website</a> | <a href="https://www.meilisearch.com/docs/faq">FAQ</a> </h4> <p align="center"> <a href="https://github.com/meilisearch/meilisearch-vue/blob/main/LICENSE"><img src="https://img.shields.io/badge/license-MIT-informational" alt="License"></a> </p> <p align="center">āš” How to integrate a front-end search bar in your Vue application using Meilisearch</p>

Meilisearch is an open-source search engine. Discover what Meilisearch is!

This repository describes the steps to integrate a relevant front-end search bar with a search-as-you-type experience!

Table of Contents <!-- omit in toc -->

āš” Supercharge your Meilisearch experience

Say goodbye to server deployment and manual updates with Meilisearch Cloud. Get started with a 14-day free trial! No credit card required.

šŸ”§ Installation

To integrate a front-end search bar, you need to install two packages:

Run:

yarn add vue-instantsearch @meilisearch/instant-meilisearch instantsearch.css
# or
npm install vue-instantsearch @meilisearch/instant-meilisearch instantsearch.css

NB: If you don't have any Meilisearch instance running and containing your data, you should take a look at this getting started page.

šŸ¤˜ Getting Started Vue 2

The following getting started uses Vue 2. A Vue 2 example is provided here.

In the main.js file:

import Vue from 'vue';
import App from './App.vue';
import InstantSearch from 'vue-instantsearch';

Vue.use(InstantSearch);

new Vue({
  el: '#app',
  render: h => h(App),
});

In the App.vue file:

<template>
  <ais-instant-search :search-client="searchClient" index-name="steam-video-games">
    <ais-search-box />
    <ais-hits>
      <div slot="item" slot-scope="{ item }">
        <h2>{{ item.name }}</h2>
      </div>
    </ais-hits>
  </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",
      ),
    };
  },
};
</script>

<style>
body {
  font-family: sans-serif;
  padding: 1em;
}
</style>

šŸ¤Ÿ Getting Started Vue 3

The following getting started uses Vue 3. A Vue 3 example is provided here.

In the main.js file:

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

createApp(App)
    .use(InstantSearch)
    .mount('#app')

In the App.vue file:

<template>
  <ais-instant-search
    :search-client="searchClient"
    index-name="steam-video-games"
  >
    <ais-search-box />
    <ais-hits>
      <template v-slot:item="{ item }">
        <ais-highlight :hit="item" attribute="name" />
      </template>
    </ais-hits>
  </ais-instant-search>
</template>

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


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

šŸ‘©ā€šŸŽØ Examples

šŸš€ For a full example, please take a look at this CodeSandbox:

For Vue 2 <br>

Edit MS + Vue2-IS

For Vue 3 <br>

Edit MS + Vue3-IS

šŸ’” If you have never used Vue InstantSearch before, we recommend reading this getting started documentation.

šŸ’… Customization and Documentation

<hr>

Meilisearch provides and maintains many SDKs and Integration tools like this one. We want to provide everyone with an amazing search experience for any kind of project. If you want to contribute, make suggestions, or just know what's going on right now, visit us in the integration-guides repository.