Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nuxt-modules/algolia

๐Ÿ”Ž Algolia module for Nuxt
https://github.com/nuxt-modules/algolia

algolia module nuxt search vue

Last synced: about 13 hours ago
JSON representation

๐Ÿ”Ž Algolia module for Nuxt

Awesome Lists containing this project

README

        

[![@nuxtjs/algolia](https://algolia.nuxtjs.org/preview.png)](https://algolia.nuxtjs.org)

# @nuxtjs/algolia

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
[![Codecov][codecov-src]][codecov-href]
[![License][license-src]][license-href]

> [Algolia](https://www.algolia.com/) module for [Nuxt](https://v3.nuxtjs.org)

- [โœจ ย Release Notes](https://github.com/nuxt-modules/algolia/releases)
- [๐Ÿ“– ย Read the documentation](https://algolia.nuxtjs.org)

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

[๐Ÿ“– ย Read the documentation](https://algolia.nuxtjs.org)

## Preview

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/github-epeint?file=app.vue)

## Setup

```sh
npx nuxi@latest module add algolia
```

## Basic usage

Add `ALGOLIA_API_KEY` and `ALGOLIA_APPLICATION_ID` environment variables to .env file.

```env
ALGOLIA_API_KEY="0fd1c4eba2d831788333e77c9d855f1d"
ALGOLIA_APPLICATION_ID="AGN9HEEKF3"
```

Now you can start using `@nuxtjs/algolia` in your app!

Client side:

```vue

const { result, search } = useAlgoliaSearch('test_index')

onMounted(async () => {
await search({ query: 'Samsung' })
})

{{ result }}

```

Or SSR:

```vue

const { data } = await useAsyncAlgoliaSearch({ indexName: 'test_index', query: 'Samsung' })

{{ data }}

```

## Development

1. Clone this repository
2. Install dependencies using `yarn install` or `npm install`
3. Use `yarn dev:prepare` or `npm run dev:prepare` to prepare the development environment
4. Start development server using `yarn dev` or `npm run dev`

## License

[MIT License](./LICENSE)

[npm-version-src]: https://img.shields.io/npm/v/@nuxtjs/algolia/latest.svg
[npm-version-href]: https://npmjs.com/package/@nuxtjs/algolia
[npm-downloads-src]: https://img.shields.io/npm/dt/@nuxtjs/algolia.svg
[npm-downloads-href]: https://npmjs.com/package/@nuxtjs/algolia
[github-actions-ci-src]: https://github.com/nuxt-modules/algolia/actions/workflows/ci.yml/badge.svg
[github-actions-ci-href]: https://github.com/nuxt-modules/algolia/actions?query=workflow%3Aci
[codecov-src]: https://img.shields.io/codecov/c/github/nuxt-modules/algolia.svg
[codecov-href]: https://codecov.io/gh/nuxt-modules/algolia
[license-src]: https://img.shields.io/npm/l/@nuxtjs/algolia.svg
[license-href]: https://npmjs.com/package/@nuxtjs/algolia