Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/meilisearch/meilisearch-vue
https://github.com/meilisearch/meilisearch-vue
client instantsearch meilisearch vue
Last synced: 28 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/meilisearch/meilisearch-vue
- Owner: meilisearch
- License: mit
- Created: 2020-07-07T15:22:41.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-20T13:19:23.000Z (9 months ago)
- Last Synced: 2024-08-04T01:15:23.386Z (4 months ago)
- Topics: client, instantsearch, meilisearch, vue
- Homepage: https://www.meilisearch.com/
- Size: 15.2 MB
- Stars: 153
- Watchers: 7
- Forks: 13
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-meilisearch - Vue
README
Meilisearch Vue
Meilisearch |
Meilisearch Cloud |
Documentation |
Discord |
Roadmap |
Website |
FAQ
⚡ How to integrate a front-end search bar in your Vue application using Meilisearch
**Meilisearch** is an open-source search engine. [Discover what Meilisearch is!](https://github.com/meilisearch/meilisearch)
This repository describes the steps to integrate a relevant front-end search bar with a search-as-you-type experience!
## Table of Contents
- [⚡ Supercharge your Meilisearch experience](#-supercharge-your-meilisearch-experience)
- [🔧 Installation](#-installation)
- [🤘 Getting Started Vue 2](#-getting-started-vue-2)
- [🤟 Getting Started Vue 3](#-getting-started-vue-3)
- [👩🎨 Examples](#-examples)
- [💅 Customization and Documentation](#-customization-and-documentation)
## ⚡ Supercharge your Meilisearch experience
Say goodbye to server deployment and manual updates with [Meilisearch Cloud](https://www.meilisearch.com/cloud?utm_campaign=oss&utm_source=github&utm_medium=meilisearch-ruby). 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:
- the open-source [Vue InstantSearch](https://github.com/algolia/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](https://github.com/meilisearch/meilisearch-js-plugins/tree/main/packages/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:
```bash
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](https://www.meilisearch.com/docs/learn/getting_started/installation#installation).
## 🤘 Getting Started Vue 2
The following getting started uses `Vue 2`. A `Vue 2` example is [provided here](#-examples).
In the `main.js` file:
```js
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:
```vue
{{ item.name }}
import { instantMeiliSearch } from '@meilisearch/instant-meilisearch';
export default {
data() {
return {
searchClient: instantMeiliSearch(
"https://ms-adf78ae33284-106.lon.meilisearch.io",
"a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303",
),
};
},
};
body {
font-family: sans-serif;
padding: 1em;
}
```
## 🤟 Getting Started Vue 3
The following getting started uses `Vue 3`. A `Vue 3` example is [provided here](#-examples).
In the `main.js` file:
```js
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:
```vue
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,
};
},
};
```
## 👩🎨 Examples
🚀 For a full example, please take a look at this CodeSandbox:
For Vue 2
[](https://codesandbox.io/s/ms-vue-is-1d6bi?fontsize=14&hidenavigation=1&theme=dark)
For Vue 3
[](https://codesandbox.io/p/sandbox/ms-vue3-is-forked-wsrkl8)
💡 If you have never used Vue InstantSearch before, we recommend reading this [getting started documentation](https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/vue/).
## 💅 Customization and Documentation
- The open-source Vue InstantSearch library is widely used and well documented in the [Algolia documentation](https://www.algolia.com/doc/api-reference/widgets/vue/). It provides all the widgets to customize and improve your search bar environment in your Vue application.
- The [instant-meilisearch documentation](https://github.com/meilisearch/meilisearch-js-plugins/tree/main/packages/instant-meilisearch) to add some customization.
- The [Meilisearch documentation](https://www.meilisearch.com/docs/).
**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](https://github.com/meilisearch/integration-guides) repository.