@nuxtjs/algolia
Features
- Easy integration with Algolia
- Handy composables like useAlgoliaSearch, useAsyncAlgoliaSearch
- Support for Vue Instantsearch components
- Support for Algolia Recommend
- Support for Docsearch
- Support for Automatic Indexing
- Support for caching the requests and responses
- Support for SSR requests
Preview
Setup
yarn add @nuxtjs/algolia # yarn
npm i @nuxtjs/algolia # npm
Basic usage
Firstly, you need to add @nuxtjs/algolia
to your Nuxt config.
export default defineNuxtConfig({
modules: ['@nuxtjs/algolia']
})
Furthermore, add ALGOLIA_API_KEY
and ALGOLIA_APPLICATION_ID
environment variables to .env file.
ALGOLIA_API_KEY="0fd1c4eba2d831788333e77c9d855f1d"
ALGOLIA_APPLICATION_ID="AGN9HEEKF3"
Now you can start using @nuxtjs/algolia
in your app!
Client side:
<script setup lang="ts">
const { result, search } = useAlgoliaSearch('test_index')
onMounted(async () => {
await search({ query: 'Samsung' })
})
</script>
<template>
<div>{{ result }}</div>
</template>
Or SSR:
<script setup lang="ts">
const { data } = await useAsyncAlgoliaSearch({ indexName: 'test_index', query: 'Samsung' })
</script>
<template>
<div>{{ data }}</div>
</template>
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
yarn dev
ornpm run dev