Meilisearch Vue
Meilisearch | Documentation | Discord | Roadmap | Website | FAQ
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
π§ Installationπ€ Getting Started Vue 2π€ Getting Started Vue 3π©βπ¨ Examplesπ Customization and Documentation
π§ Installation
To integrate a front-end search bar, you need to install two packages:
- the open-source Vue InstantSearch library powered by Algolia that provides all the front-end tools you need to highly customize your search bar environment.
- the Meilisearch client instant-meilisearch to establish the communication between your Meilisearch instance and the Vue InstantSearch library.
Instead of reinventing the wheel, we have opted to reuse the InstantSearch library for our own front-end tooling. We will contribute upstream any improvements that may result from our adoption of InstantSearch.
Run:
yarn add vue-instantsearch @meilisearch/instant-meilisearch
# or
npm install vue-instantsearch @meilisearch/instant-meilisearch
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://integration-demos.meilisearch.com",
"q7QHwGiX841a509c8b05ef29e55f2d94c02c00635f729ccf097a734cbdf7961530f47c47"
),
};
},
};
</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 }">
<h2>{{ item.name }}</h2>
</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"
),
};
},
};
</script>
π©βπ¨ Examples
For Vue 2
For Vue 3
π
Customization and Documentation
- The open-source Vue InstantSearch library is widely used and well documented in the Algolia documentation. It provides all the widgets to customize and improve your search bar environment in your Vue application.
- The instant-meilisearch documentation to add some customization.
- The Meilisearch documentation.
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.