feat: better docs

README.md

@@ -58,7 +58,15 @@ Now you can start using `@nuxtjs/algolia` in your app!
 
 ```vue
 <script setup lang="ts">
-const { data, error } = await useAsyncAlgoliaSearch({ indexName: 'test_index', query: 'Samsung' })
+// Client side
+const { result: data, search } = useAlgoliaSearch('test_index')
+
+onMounted(async () => {
+  await search({ query: 'Samsung' })
+})
+
+// Or SSR
+const { data } = await useAsyncAlgoliaSearch({ indexName: 'test_index', query: 'Samsung' })
 </script>
 
 <template>

docs/content/1.getting-started/1.quick-start.md

@@ -39,7 +39,15 @@ ALGOLIA_APPLICATION_ID="AGN9HEEKF3"
 
 ```vue
 <script setup lang="ts">
-const { data, error } = await useAsyncAlgoliaSearch({ indexName: 'test_index', query: 'Samsung' })
+// Client side
+const { result: data, search } = useAlgoliaSearch('test_index')
+
+onMounted(async () => {
+  await search({ query: 'Samsung' })
+})
+
+// Or SSR
+const { data } = await useAsyncAlgoliaSearch({ indexName: 'test_index', query: 'Samsung' })
 </script>
 
 <template>

docs/content/1.getting-started/3.usage.md

@@ -38,18 +38,24 @@ For more details check out the official documentation of this method [here](http
 
 ## `useAsyncAlgoliaSearch`
 
-Async wrapper around `useAlgoliaSearch` composable that decreases the number of steps needed to use Algolia with `useAsyncData` while maintaining the same functionality.
+Async wrapper around `useAlgoliaSearch` composable that decreases the number of steps needed to use Algolia with `useAsyncData` while maintaining the same functionality. The response will have a form described [here](https://www.algolia.com/doc/api-reference/api-methods/search/#response) and will be wrapped around `useAsyncData` so you will have access to `data`, `error`, and other properties.
 
 ```vue
 <script setup lang="ts">
-const result = await useAsyncAlgoliaSearch({ indexName: 'test_index', query: 'Samsung' })
+const { data, error } = await useAsyncAlgoliaSearch({ indexName: 'test_index', query: 'Samsung' })
 </script>
 
 <template>
-  <div>{{ result.data.value.hits }}</div>
+  <div>{{ data.value.hits }}</div>
 </template>
 ```
 
+This composable accepts an object as a param with following properties:
+
+* `indexName` - the name of you index in Algolia dashboard. For more details about initializing index check out the official documentation [here](https://www.algolia.com/doc/api-client/getting-started/instantiate-client-index/javascript/?client=javascript#initialize-an-index). If you passed a global index in your module configuration, this property can be skipped.
+* `query` - a keywoard, sentence, or text that you want to search the index with.
+* `requestOptions` optional object with options for the request like filters. You can check more about is [here](https://www.algolia.com/doc/api-reference/api-methods/search/#method-param-requestoptions)
+
 ## `useAlgoliaFacetedSearch`
 
 Use this composable to search using facet values like `category`, `phone`.

playground/pages/index.vue

@@ -1,28 +1,28 @@
 <template>
   <div>
-    <!-- <pre> {{ result?.hits }}</pre> -->
-    <!-- <pre>{{ searchForFacetValuesResult }}</pre> -->
-    <!-- <div>
+    <pre> {{ result?.hits }}</pre>
+    <pre>{{ searchForFacetValuesResult }}</pre>
+    <div>
       <h1>Instantsearch plugin</h1>
       <ais-instant-search :index-name="indexName" :search-client="algolia">
         <ais-search-box />
         <ais-hits />
       </ais-instant-search>
-    </div> -->
-    <!-- <pre>{{ recommendResult?.results }}</pre> -->
+    </div>
+    <pre>{{ recommendResult?.results }}</pre>
 
-    <!-- <div v-if="docSearch">
+    <div v-if="docSearch">
       <h3>DocSearch plugin</h3>
       <AlgoliaDocSearch :options="docSearch" />
-    </div> -->
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-// import { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch/vue3/es'
+import { AisInstantSearch, AisSearchBox, AisHits } from 'vue-instantsearch/vue3/es'
 // Grab DocSearch config from nuxt.config
 // (the component does that by itself as well)
-// const { algolia: { docSearch } } = useRuntimeConfig()
+const { algolia: { docSearch } } = useRuntimeConfig()
 
 // Used to try the refresh of the component on options changes
 const indexName = ref('test_index')
@@ -31,36 +31,36 @@ const indexName = ref('test_index')
 const asyncResult = await useAsyncAlgoliaSearch({ query: 'Samsung', indexName: indexName.value })
 
 const { result, search } = useAlgoliaSearch(indexName.value)
-// const { result: searchForFacetValuesResult, search: searchForFacetValues } = useAlgoliaFacetedSearch(indexName.value)
-// const algolia = useAlgoliaRef()
-// const { result: recommendResult, get } = useAlgoliaRecommend()
+const { result: searchForFacetValuesResult, search: searchForFacetValues } = useAlgoliaFacetedSearch(indexName.value)
+const algolia = useAlgoliaRef()
+const { result: recommendResult, get } = useAlgoliaRecommend()
 
 // Just add some indices in ./playground/types.d.ts, they should then be autocompleted here
-// const { search: typedSearch } = useAlgoliaInitIndex('test_index')
+const { search: typedSearch } = useAlgoliaInitIndex('test_index')
 
 // SSR Searching for results
-// const { data } = await useAsyncData('ssr-search-results', () => search({ query: 'Samsung' }))
+const { data } = await useAsyncData('ssr-search-results', () => search({ query: 'Samsung' }))
 
 onMounted(async () => {
   // useSearch
   await search({ query: 'Samsung', requestOptions: { filters: 'objectID:ecommerce-sample-data-99' } })
 
   // // useSearchForFacetValues
-  // const facet = {
-  //   name: 'categories',
-  //   query: 'Cell Phones'
-  // }
-  // await searchForFacetValues({ facet })
+  const facet = {
+    name: 'categories',
+    query: 'Cell Phones'
+  }
+  await searchForFacetValues({ facet })
 
   // // useAlgoliaRecommend
-  // await get({ queries: [{ indexName: indexName.value, model: 'related-products', objectID: 'ecommerce-sample-data-99' }] })
+  await get({ queries: [{ indexName: indexName.value, model: 'related-products', objectID: 'ecommerce-sample-data-99' }] })
 
   // // Notice the type of typedFoo is inferred from the type of the result of the call to useInitIndex
-  // const typedFoo = await typedSearch('foo')
+  const typedFoo = await typedSearch('foo')
 
   // // @ts-expect-error bar should be a number
-  // typedFoo.hits[0].bar = '1'
+  typedFoo.hits[0].bar = '1'
   // // There should be no error
-  // typedFoo.hits[0].foo = '1'
+  typedFoo.hits[0].foo = '1'
 })
 </script>

src/runtime/composables/useAsyncAlgoliaSearch.ts

@@ -6,11 +6,11 @@ import { useNuxtApp, useAsyncData, useRuntimeConfig } from '#imports'
 export type SearchParams = { query: string, indexName?: string } & RequestOptionsObject;
 
 export async function useAsyncAlgoliaSearch ({ query, requestOptions, indexName }: SearchParams) {
-  if (!indexName) throw new Error('`[@nuxtjs/algolia]` Cannot search in Algolia without `indexName` passed as a parameter')
-
   const config = useRuntimeConfig();
   const index = indexName || config.algolia.globalIndex
 
+  if (!index) throw new Error('`[@nuxtjs/algolia]` Cannot search in Algolia without `indexName`')
+
   const algoliaIndex = useAlgoliaInitIndex(index)
 
   const result = await useAsyncData(`${index}-async-search-result`, async () => {