feat(stackblitz): add stackblitz project

README.md

@@ -28,7 +28,9 @@
 
 ## Preview
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/github-epeint?file=app.vue)
+[![Open in
+StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)]
+(https://stackblitz.com/github/nuxt-modules/algolia?title=@nuxtjs/algolia example&file=stackblitz/vue.js)
 
 ## Setup
 
@@ -51,11 +53,11 @@ Client side:
 
 ```vue
 <script setup lang="ts">
-const { result, search } = useAlgoliaSearch('test_index')
+const { result, search } = useAlgoliaSearch("test_index");
 
 onMounted(async () => {
-  await search({ query: 'Samsung' })
-})
+  await search({ query: "Samsung" });
+});
 </script>
 
 <template>
@@ -67,7 +69,10 @@ Or SSR:
 
 ```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>

package.json

@@ -32,7 +32,8 @@
     "dev:prepare": "nuxt-module-build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "docs": "cd docs && yarn dev",
     "release": "nuxt-module-build && standard-version && git push --follow-tags && npm publish",
-    "lint": "eslint --ext .js,.ts,.vue"
+    "lint": "eslint --ext .js,.ts,.vue",
+    "stackblitz": "cd stackblitz && yarn && yarn dev"
   },
   "dependencies": {
     "@algolia/cache-in-memory": "^4.14.2",
@@ -50,7 +51,7 @@
     "@docsearch/js": "^3.0.0",
     "@nuxt/module-builder": "latest",
     "@nuxtjs/eslint-config-typescript": "latest",
-    "eslint": "latest",
+    "eslint": "^8.48.0",
     "nuxt": "^3.8.0",
     "standard-version": "^9.3.2",
     "typescript": "^5.2.2"
@@ -70,5 +71,9 @@
     "docsearch",
     "nuxt",
     "module"
-  ]
+  ],
+  "stackblitz": {
+    "installDependencies": false,
+    "startCommand": "yarn stackblitz"
+  }
 }

stackblitz/.gitignore

@@ -0,0 +1,26 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example
+
+.yarn

stackblitz/README.md

@@ -0,0 +1,17 @@
+# @nuxtjs/algolia Stackblitz Example
+
+A minimal Nuxt app that demonstrates the use of the `@nuxtjs/algolia` module.
+
+## Running the project
+
+1. Install dependencies
+
+```bash
+yarn install
+```
+
+1. Start the development server
+
+```bash
+yarn dev
+```

stackblitz/app.vue

@@ -0,0 +1,24 @@
+<template>
+  <h1>
+    [Client] Algolia Search Results for query: 'Samsung' with optional filters
+  </h1>
+  {{ result }}
+  <h2>[SSR] Algolia Search Result for query: 'Samsung'</h2>
+  {{ data }}
+</template>
+
+<script setup>
+const { result, search } = useAlgoliaSearch("test_index"); // pass your index as param
+
+onMounted(async () => {
+  await search({
+    query: "Samsung",
+    requestOptions: { filters: "objectID:ecommerce-sample-data-99" },
+  });
+});
+
+const { data } = await useAsyncAlgoliaSearch({
+  indexName: "test_index",
+  query: "Samsung",
+});
+</script>

stackblitz/nuxt.config.ts

@@ -0,0 +1,13 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  modules: [
+    [
+      "@nuxtjs/algolia",
+      {
+        apiKey: "0fd1c4eba2f831788333e77c9d855f1d",
+        applicationId: "AGN9HUEKF3",
+      },
+    ],
+  ],
+  compatibilityDate: "2024-04-03",
+});

stackblitz/package.json

@@ -0,0 +1,17 @@
+{
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@nuxtjs/algolia": "1.5.0",
+    "nuxt": "^3.13.0",
+    "vue": "latest",
+    "vue-router": "latest"
+  }
+}

stackblitz/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}