Basic

You can use Meilisearch's power with all composables available in this package.

useMeiliSearch

Use this composable to search into the provide index.

<script setup>
const { search, result } = useMeiliSearch('books') // books is the index name

onMounted(async () => {
  await search('harry');
})
</script>

search(query: string, options?: SearchParams)

It will return a promise with the result of the search. All options are available here

result

It will return the result of the search and will be updated each time you call search function.

Result will be shape like descibe here

Exemple:

<script setup>
  const booksResult = useState('books-search-result')
</script>

useAsyncMeiliSearch

This composable is the same as useMeiliSearch but it will return a data object for SSR usage, with refresh function to update the data.

index and query are required.

It will be the intial setup of the search. you can also privide params to add some options to the search. All options are available here

const { data, refresh } = await useAsyncMeiliSearch({
  index: 'books',
  query: 'harry',
  params: {
    limit: 2
  }
})

useMeiliSearchRef

Use this composable you have access to meilisearch from you component.

<script setup>
const meilisearch = useMeiliSearchRef()
</script>