@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 # yarnnpm 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