Vue3 quick start
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.
TIP
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.