1.quick-start.md

title	Quick start
description	Get started with Algolia in your Nuxt application in minutes.

Setup

1. Install Algolia module

Add the Algolia module to your Nuxt project:

npx nuxi@latest module add algolia

2. Configure environment variables

Add your Algolia credentials to your .env file:

ALGOLIA_API_KEY="your_search_api_key"
ALGOLIA_APPLICATION_ID="your_application_id"

::alert{type="info" icon="i-ph-info"} You can get your API keys from the Algolia dashboard. Make sure to use your Search API Key (not the Admin API Key) for security. ::

3. Use Algolia in your application

Client-side search

Use useAlgoliaSearch for client-side search:

<script setup lang="ts">
const { result, search } = useAlgoliaSearch('test_index')

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

<template>
  <div>{{ result }}</div>
</template>

Server-side search (SSR)

Use useAsyncAlgoliaSearch for server-side rendered search:

<script setup lang="ts">
const { data } = await useAsyncAlgoliaSearch({ 
  indexName: 'test_index', 
  query: 'Samsung' 
})
</script>

<template>
  <div>{{ data }}</div>
</template>

::alert{type="success" icon="i-ph-check-circle"} That's it! You can now use Algolia in your Nuxt app ✨ ::

::alert{type="info" icon="i-ph-arrow-right"} Check out how to use Algolia module further for more advanced features. ::