Upgrade Algolia, Nuxt, and DocSearch + Module Refactor and New Features

.github/workflows/ci.yml

@@ -9,39 +9,41 @@ on:
       - main
 
 jobs:
-  ci:
-    runs-on: ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        os: [ubuntu-latest]
-        node: [16]
+  lint:
+    runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node }}
-
-      - name: checkout
-        uses: actions/checkout@master
+      - uses: actions/checkout@v6
 
-      - name: cache node_modules
-        uses: actions/cache@v2
+      - uses: actions/setup-node@v6
         with:
-          path: node_modules
-          key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/yarn.lock')) }}
+          node-version: 20
+
+      - run: npm i -g --force corepack@latest && corepack enable
 
       - name: Install dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: yarn
+        run: npx nypm@latest i
 
       - name: Lint
-        run: yarn lint
+        run: npm run lint
+
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 20
+
+      - run: npm i -g --force corepack@latest && corepack enable
+
+      - name: Install dependencies
+        run: npx nypm@latest i
 
-      # - name: Test
-      #   run: yarn test
+      - name: Playground prepare
+        run: npm run dev:prepare
 
-      # - name: Coverage
-      #   run: yarn codecov
-      #   env:
-      #     CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
+      - name: Test
+        run: npm run test

.gitignore

@@ -1,5 +1,5 @@
 # Dependencies
-**/node_modules
+node_modules
 
 # Logs
 *.log*
@@ -19,9 +19,9 @@ dist
 # Nuxt
 .nuxt
 .output
+.data
 .vercel_build_output
 .build-*
-.env
 .netlify
 
 # Env
@@ -34,7 +34,12 @@ coverage
 .nyc_output
 
 # VSCode
-.vscode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/*.code-snippets
 
 # Intellij idea
 *.iml
@@ -49,4 +54,5 @@ coverage
 Network Trash Folder
 Temporary Items
 .apdisk
-sw.js
+
+my-module-boilerplate/

.npmrc

@@ -0,0 +1,2 @@
+legacy-peer-deps=true
+

build.config.ts

@@ -6,6 +6,6 @@ export default defineBuildConfig({
     '@algolia/autocomplete-core',
     '@docsearch/js',
     '@docsearch/css',
-    '@docsearch/react'
-  ]
+    '@docsearch/react',
+  ],
 })

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

@@ -1,27 +1,38 @@
 ---
 title: Quick start
-description: ''
+description: Get started with Algolia in your Nuxt application in minutes.
 ---
 
 ## Setup
 
-1. **Install Algolia module**
+### 1. Install Algolia module
+
+Add the Algolia module to your Nuxt project:
+
 ```bash
 npx nuxi@latest module add algolia
 ```
 
-2. **Add [ALGOLIA_API_KEY](https://www.algolia.com/doc/guides/security/api-keys/) and [ALGOLIA_APPLICATION_ID](https://www.algolia.com/account/api-keys/) to the .env**
+### 2. Configure environment variables
+
+Add your Algolia credentials to your `.env` file:
 
-```env
-ALGOLIA_API_KEY="0fd1c4eba2d831788333e77c9d855f1d"
-ALGOLIA_APPLICATION_ID="AGN9HEEKF3"
+```env [.env]
+ALGOLIA_API_KEY="your_search_api_key"
+ALGOLIA_APPLICATION_ID="your_application_id"
 ```
 
-3. **Use Algolia in your application**
+::alert{type="info" icon="i-ph-info"}
+You can get your API keys from the [Algolia dashboard](https://www.algolia.com/account/api-keys/). Make sure to use your **Search API Key** (not the Admin API Key) for security.
+::
+
+### 3. Use Algolia in your application
+
+#### Client-side search
 
-Client side:
+Use `useAlgoliaSearch` for client-side search:
 
-```vue
+```vue [pages/search.vue]
 <script setup lang="ts">
 const { result, search } = useAlgoliaSearch('test_index')
 
@@ -35,26 +46,27 @@ onMounted(async () => {
 </template>
 ```
 
-Or SSR:
+#### Server-side search (SSR)
 
-```vue
+Use `useAsyncAlgoliaSearch` for server-side rendered search:
+
+```vue [pages/search.vue]
 <script setup lang="ts">
-const { data } = await useAsyncAlgoliaSearch({ indexName: 'test_index', query: 'Samsung' })
+const { data } = await useAsyncAlgoliaSearch({ 
+  indexName: 'test_index', 
+  query: 'Samsung' 
+})
 </script>
 
 <template>
   <div>{{ data }}</div>
 </template>
 ```
 
-::alert{type="success"}
-
+::alert{type="success" icon="i-ph-check-circle"}
 That's it! You can now use Algolia in your Nuxt app ✨
-
 ::
 
-::alert{type="info"}
-
-Check out [how to use Algolia module further](/getting-started/usage){ .text-primary-500 }.
-
+::alert{type="info" icon="i-ph-arrow-right"}
+Check out [how to use Algolia module further](/getting-started/usage) for more advanced features.
 ::