nuxt-modules / algolia Goto Github PK

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Is your feature request related to a problem? Please describe.

Work on #46

Describe the solution you'd like

Describe alternatives you've considered

Additional context

It would be great to have support and possibility to turn on the Request/Response Caching from Algolia.

Official doc: https://www.algolia.com/doc/api-client/getting-started/customize/javascript/?client=javascript#caching-requests-and-responses
Reference to: #111

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Is your feature request related to a problem? Please describe.

Hey 😄

I'm working on using Algolia DocSearch on Nuxt 3 new documentation website.

I've been trying to implement the feature using your module, but it seem like this feature from Algolia is not supported.

Here is the Pull Request I'm working on: https://github.com/nuxt/nuxt3-docs/pull/15

Describe the solution you'd like

I've imported a component that we use since a while on docs project, and updated it to Composition API.

The component imports Algolia configuration from publicRuntimeConfig, which is close to what you do in this module.

We could work on having a toggleable parameter that would push a built-in component that is easy to use and take its configuration from nuxt.config.

Additional context

Algolia DocSearch is a documentation search solution made for open source projects.

It ships with an easy component and scripts that let you build indexes from your project pages.

https://docsearch.algolia.com

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

I have recently created a Nuxt 3 project with Algolia, Storyblok and automatic indexer using serverless that would be worth mentioning in the docs -> https://github.com/Baroshem/nuxt3-algolia-storyblok. We could provide step by step flow of using it with Storyblok to automaically index Algolia with a new content.

Describe alternatives you've considered

Additional context

Have a problem displaying SSR data
if i use code from example

<script setup>
const { result, search } = useSearch('test_index') // pass your index name as param

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

all work well, but data loaded after page load, but I would like to receive data before the page is fully loaded

if i try something like this

<script setup>
const { result, search } = useSearch('test_index') // pass your index name as param
await search({ query: 'Samsung' });
</script>

i catch 500 error,
text: XMLHttpRequest is not defined

Thanks for the answer

Is your feature request related to a problem? Please describe.

• useSearch
• useSearchForFacetValues
• useAlgolia
• useInitIndex

Describe the solution you'd like

Describe alternatives you've considered

Additional context

The following links are broken in the docs:

• Configuration > first link
• Usage > first link
• Vue Instantsearch > first link
• DocSearch > third link
• Crawler > first link -> to substitute probably with Nuxt > Guide > Concepts > Rendering Modes
• Crawler > second link

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Version

@nuxtjs/algolia: 1.0.0
nuxt: 3.0.0-rc.4

Reproduction Link

https://stackblitz.com/edit/nuxt-starter-zh6pvp?file=package.json

Steps to reproduce

Add api key & id

What is Expected?

Expected to be working properly.

What is actually happening?

Showing this error. It is working with @nuxtjs/algolia:0.9.2 but the crawler is not indexing the content. (nuxt content v2)

Version

@nuxtjs/algolia: 1.1.1
nuxt: 3.0.0-rc.6

Reproduction Link

none

but with version 1.1.0 is seems to work

Steps to reproduce

• install nuxt
• install this plugin as described here: https://algolia.nuxtjs.org/getting-started/quick-start

What is Expected?

nuxt starts correctly

What is actually happening?

nuxt does not start anymore and throws following error:

 ERROR  Cannot start nuxt:  nuxtCtx.tryUse is not a function                                              15:01:10

  at useNuxt (node_modules/@nuxtjs/algolia/node_modules/@nuxt/kit/dist/index.mjs:47:28)
  at addPlugin (node_modules/@nuxtjs/algolia/node_modules/@nuxt/kit/dist/index.mjs:434:16)
  at setup (node_modules/@nuxtjs/algolia/dist/module.mjs:183:5)
  at Object.normalizedModule (node_modules/@nuxtjs/algolia/node_modules/@nuxt/kit/dist/index.mjs:624:29)
  at async installModule (node_modules/@nuxt/kit/dist/index.mjs:432:3)
  at async initNuxt (node_modules/nuxt/dist/index.mjs:1423:7)
  at async load (node_modules/nuxi/dist/chunks/dev.mjs:6750:9)
  at async Object.invoke (node_modules/nuxi/dist/chunks/dev.mjs:6795:5)
  at async _main (node_modules/nuxi/dist/cli.mjs:46:20)

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Have a problem displaying SSR data
if i use code from example

<script setup>
const { result, search } = useSearch('test_index') // pass your index name as param

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

all work well, but data loaded after page load, but I would like to receive data before the page is fully loaded

if i try something like this

<script setup>
const { result, search } = useSearch('test_index') // pass your index name as param
await search({ query: 'Samsung' });
</script>

i catch 500 error,
text: XMLHttpRequest is not defined

"nuxt": "3.0.0-rc.1",
"@nuxtjs/algolia": "^0.9.2",

How could I solve this problem?
Thanks for the answer

Reading the documentation it shows a search can be done as follows:

await search({ query: 'Samsung' });

This is working as expected but I am having some trouble trying to get the intended format for passing parameters with the query. As per the Algolia documentation this is the format

index.search('query string', {
  attributesToRetrieve: ['firstname', 'lastname'],
  hitsPerPage: 50,
})

Looking at the useSearch composable

https://github.com/nuxt-community/algolia-module/blob/main/src/runtime/composables/useSearch.ts

It seems to only cater for query as a string type and the additional requestOptions

How would we structure this query?

This is really strange because it works perfect on playground but when we tested it with Tim it was not working

Version

• Operating System: Linux
• Node Version: v18.11.0
• Nuxt Version: 3.0.0-rc.14
• Nitro Version: 1.0.0
• Package Manager: [email protected]
• Builder: vite
• User Config: srcDir, modules, compilerOptions, vue, vite, schemaOrg, telemetry, algolia, head, auth, css, build, runtimeConfig
• Runtime Modules: genesis-design-system/nuxt, @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs-alt/[email protected], @nuxtjs-alt/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @vueuse/[email protected], [email protected], unplugin-icons/nuxt, @pinia/[email protected], @nuxtjs/[email protected]
• Build Modules: -

Reproduction Link

I have upgraded from RC 13 to RC 14 and the server doesn't even start.

Steps to reproduce

I have upgraded from RC 13 to RC 14 and the server doesn't even start.

What is Expected?

ERROR Error while requiring module @nuxtjs/algolia: SyntaxError: The requested module '@nuxt/kit' does not provide an export named 'addAutoImportDir'

What is actually happening?

ERROR Error while requiring module @nuxtjs/algolia: SyntaxError: The requested module '@nuxt/kit' does not provide an export named 'addAutoImportDir'

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Version

@nuxtjs/algolia: 1.1.0
nuxt: 3.0.0-rc.9

Reproduction Link

We have updated Nuxt to version 3 RC 9 and it has thrown us an error. Please update module to work with RC 9

Is your feature request related to a problem? Please describe.

With Nuxt 2 there was a way to have routing URLs so you got for each facet clicked a change in the URL. That URL was shareable and it was a huge benefit in crosslinking a faceted search page thru the whole website.

Describe the solution you'd like

It would be nice to have this option to create urls that you can share and will lead to correct results.
(Similar to: https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/vue/#combining-with-nuxtjs)

Describe alternatives you've considered

Use the oldschool way with the vue 3 library and somehow integrate the router by myself but if there is such a great module it would be nice to have it out of the box instead of starting hacking :)

Is your feature request related to a problem? Please describe.

https://dev.to/jacobandrewsky/how-to-add-algolia-search-to-nuxt-3-3od3
https://dev.to/jacobandrewsky/adding-search-engine-with-algolia-48j3
https://www.youtube.com/watch?v=MQGIxPmgSCM
https://www.youtube.com/watch?v=GGyp0Rqsxb8

Describe the solution you'd like

Describe alternatives you've considered

Additional context

PR: #115

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Version

@nuxtjs/algolia: v0.9.2
nuxt: v3.0.0-rc.4

Reproduction Link

https://stackblitz.com/edit/nuxt-starter-9hjp9u?file=pages/index/index.page.ts

Steps to reproduce

filter twice -> go to page via ais-hits / nuxt-link (/about), use browser back. And then try to click back again.

What is Expected?

its expected it saves my query.

What is actually happening?

its clearing query. But only on first back.

heres an exsample from a productions site: https://majestic-piroshki-eafaa8.netlify.app/test-brugte-biler/

Other

when using this in app.router.options.ts

	parseQuery(query) {
		return qs.parse(query);
	},
	stringifyQuery(query) {
		const result = qs.stringify(query);

		return result ? `?${result}` : "";
	}, 

Nuxt gives this error:

Is your feature request related to a problem? Please describe.

#36

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

To gain more users, Chuck Meyer inspired me to refactor the Nuxt module into a wrapper over Vue module so that it could be used in more projects than just the Nuxt ones

Describe alternatives you've considered

Additional context

What is actually happening?

• [Coming soon] for VueInstantsearch -> coming soon should be removed as there is already a support for that both README.md and docs
• Update vue-instantsearch usage docs to have // path/to/file in the code examples and also we should add better guide on how to use it. More descriptive.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Using npm packages for Renovate presets is now deprecated. Please migrate to repository-based presets instead.

Datasource	Name	Replacement PR?
npm	standard-version

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update devdependency nuxt to v3.12.4 [security]
• chore(deps): replace devdependency standard-version with commit-and-tag-version ^9.5.0
• chore(deps): update all non-major dependencies (@algolia/cache-in-memory, @algolia/recommend, @algolia/requester-fetch, @docsearch/css, @docsearch/js, @nuxt/kit, algoliasearch, metadata-scraper, typescript, vue-instantsearch)
• chore(deps): update actions/cache action to v4
• chore(deps): update algoliasearch-client-javascript monorepo to v5 (major) (@algolia/recommend, @algolia/requester-fetch, algoliasearch)
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update actions/setup-node action to v4
• chore(deps): update dependency instantsearch.css to v8

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Currently, algoliasearch type is taken from lite version. This is wrong because when a user chooses lite:false in the config, he will have access to more methods and properties, but they will not be autosuggested by TS. In order to have that, we should add the type accordingly to the value of lite configuration option in the config.

Describe alternatives you've considered

Additional context

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

algolia/vue-instantsearch#1052

Describe alternatives you've considered

Additional context

Is your feature request related to a problem? Please describe.

Similarly to what I have created for the nuxt-newsletter, I think it would be beneficial to have an unstyled but working search bar component that users can easily use in their application without using the vue instantsearch.

Describe the solution you'd like

https://github.com/Baroshem/nuxt-shopify-tailwind/blob/294729ad6a0d2871522bf68750a7d75128c2eb34/components/TheHeader.vue

Describe alternatives you've considered

Additional context

Version

• Operating System: Linux
• Node Version: v18.11.0
• Nuxt Version: 3.0.0-rc.12
• Nitro Version: 0.6.0
• Package Manager: [email protected]
• Builder: vite
• User Config: srcDir, modules, compilerOptions, vue, vite, telemetry, algolia, head, auth, css, build, runtimeConfig
• Runtime Modules: genesis-design-system/nuxt, @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs-alt/[email protected], @nuxtjs-alt/[email protected], @nuxtjs/[email protected], unplugin-icons/nuxt, @pinia/[email protected], @nuxtjs/[email protected]
• Build Modules: -

Reproduction Link

I am trying to do a search with filters, but the filters parameter is not getting it for me

watch(() => input_search.value, () => search({ query: input_search.value, filters: 'domain_list:domain.es'}));

Steps to reproduce

What is Expected?

What is actually happening?

Is your feature request related to a problem? Please describe.

Let's add an configuration option called globalIndex that when configured will be used in algoliasearch. By using it, user will not have to pass it as a part of the useAlgoliaSearch composable.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Hello,

I was performing a basic demo with:

<script setup>
const algoliaIndex = useAlgoliaInitIndex('test')
console.log(algoliaIndex.appId)
</script>

But the algoliaIndex object only has the search function available, not the findObjects operations that we are supposed to do on the Algolia documentation: https://www.algolia.com/doc/api-client/methods/search/

Is this an expected behaviour? Thanks!

It is caused by the usage of the plugin. There must be some inconsitencies in how the plugin works with vue 3, vite and nuxt. As we are importing the components separately recently, I think it would be safe to remove this line from plugin.ts:

  if (instantSearch) {
    const { plugin } = await import("vue-instantsearch/vue3/es/src/plugin");
    nuxtApp.vueApp.use(plugin);
  }

Tested on both local nuxt project from the module and completely new project with nuxt 3.

Version

@nuxtjs/algolia:
nuxt:

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

Version

@nuxtjs/algolia: 1.1.1
nuxt: 3.0.0-r.c.9

Reproduction Link

https://github.com/marcusarnfast/Incompatibility-issues-with-Algolia

Steps to reproduce

Yarn add

What is Expected?

Algolia module to work

What is actually happening?

Module @nuxtjs/algolia is disabled due to incompatibility issues:

• [nuxt] Nuxt version ^3.0.0 || ^2.16.0 is required but currently using 3.0.0-rc.9

Is your feature request related to a problem? Please describe.

By Alex Jover Morales:

I'd include as well how to import the composables, for those not using script setup

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Version

@nuxtjs/algolia: 1.1.1
nuxt: 3.0.0-rc.6

Steps to reproduce

• Add Algolia to Nuxt 3 project
• Configure it via env variables

What is happening?

algolia: {
    applicationId: process.env.ALGOLIA_APP_ID ?? 'applicationId',
    apiKey: process.env.ALGOLIA_API_KEY ?? 'apiKey',
  },

When starting a project error is thrown Cannot destructure property 'applicationId' of '__vite_ssr_import_0__.useRuntimeConfig(...).algolia' as it is undefined.

Not sure if this has something to do with #81 or #63 but considering the example in the playground, this should work

Is your feature request related to a problem? Please describe.

#40

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Version

@nuxtjs/algolia: 1.1.0
nuxt: "nuxt-edge": latest

Reproduction Link

https://github.com/starladyrie/algolia-bug

Steps to reproduce

1. Create a new project with Nuxt 2
2. Migrate to Nuxt Bridge
3. Install @nuxtjs/algolia, following documentation
4. Run project

What is Expected?

Project should run normally

What is actually happening?

Algolia is throwing the following error:

Nuxt CLI v3.0.0-rc.6                                                                                                                                                                                               16:45:31
                                                                                                                                                                                                                   16:45:33
  > Local:    http://localhost:3000/ 
  > Network:  http://192.168.31.137:3000/


 FATAL  Cannot read property 'public' of undefined                                                                                                                                                                 16:45:34

  at setup (/C:/Users/marri/Documents/algolia/algolia-bug/node_modules/@nuxtjs/algolia/dist/module.mjs:149:32)
  at ModuleContainer.normalizedModule (/C:/Users/marri/Documents/algolia/algolia-bug/node_modules/@nuxt/kit/dist/index.mjs:607:29)
  at async ModuleContainer.addModule (node_modules\@nuxt\core-edge\dist\core.js:174:20)
  at async ModuleContainer.ready (node_modules\@nuxt\core-edge\dist\core.js:47:5)
  at async Nuxt._init (node_modules\@nuxt\core-edge\dist\core.js:346:5)


 ERROR  Cannot start nuxt:  Cannot read property 'public' of undefined                                                                                                                                             16:45:34  

  at setup (/C:/Users/marri/Documents/algolia/algolia-bug/node_modules/@nuxtjs/algolia/dist/module.mjs:149:32)
  at ModuleContainer.normalizedModule (/C:/Users/marri/Documents/algolia/algolia-bug/node_modules/@nuxt/kit/dist/index.mjs:607:29)
  at async ModuleContainer.addModule (node_modules\@nuxt\core-edge\dist\core.js:174:20)
  at async ModuleContainer.ready (node_modules\@nuxt\core-edge\dist\core.js:47:5)
  at async Nuxt._init (node_modules\@nuxt\core-edge\dist\core.js:346:5)

Is your feature request related to a problem? Please describe.

Also remember, to add a new API key with appriopriate rights

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

https://www.algolia.com/doc/api-reference/api-methods/search-for-facet-values/

Describe alternatives you've considered

Additional context

Is your feature request related to a problem? Please describe.

Something like:

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

<script setup>
const { result, search } = useAlgoliaSearch('test_index') // pass your index name as param
onMounted(async () => {
  await search({ query: 'Samsung' });
})
</script>

https://algolia.nuxtjs.org/getting-started/quick-start

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Version

@nuxtjs/algolia: ^0.9.1
nuxt: 3.0.0-rc.3

Steps to reproduce

algolia: {
    apiKey: "82913680b786acdb395702cbbe8ad805",
    applicationId: "JQ8RQBS5H4",
    instantSearch: {
      theme: "reset",
    },
  },

What is Expected?

As per the docs https://algolia.nuxtjs.org/advanced/
"You can choose a theme from satelite, reset, and algolia. Check out setup docs here"

What is actually happening?

ERROR [@nuxtjs/algolia] Invalid theme: reset
ERROR [@nuxtjs/algolia] Invalid theme: satelite

Setup docs also goes to a broken link
https://algolia.nuxtjs.org/advanced/'/setup#instantSearch.theme'

I am working with nuxt content V2, but not sure how to index my contents.

Is your feature request related to a problem? Please describe.

https://v3.nuxtjs.org/docs/advanced/modules

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Is your feature request related to a problem? Please describe.

No.

Describe the solution you'd like

The idea would be to add the ability to store pages' metadata into an Algolia index during Nuxt generation process. This would then allow for instant search through all generated pages content.

Describe alternatives you've considered

The existing Algolia Crawler does basically the same thing but having it as a Nuxt module has several advantages:

• the Crawler is available but as a paid add-on;
• there is a Netlify plugin but having the process done during Nuxt generation would allow for a host agnostic content indexing;
• it would give full control over how and which data is indexed during the generation process using Nuxt hooks;
• it should be quite straightforward to use the useSearch composable and even create a simple <NuxtPagesSearch /> component (or whatever we might want to call it).

Additional context

For the crawler to work we would need some extra module options. Here's a suggestion of how it could look like:

interface Options {
    applicationId: string;
    indexName: string;
    search: {
        apiKey: string
        apiAdminKey: string
        fields?:
            | ((route: string, html: string) => Record<string, string>)
            | string[] // array of metadata fields to include in the index or function that returns a metadata object 
        include?: ((route: string) => boolean) | (string | RegExp)[] // array of routes to include or function to filter out routes
    }
}

Is your feature request related to a problem? Please describe.

We currently have an article link in Algolia docs about using it with Nuxt 3 and Storyblok. As an another example we could show how to use Algolia with Contentful using the following integration

https://www.algolia.com/developers/contentful-search-algolia/

Describe the solution you'd like

Describe alternatives you've considered

Additional context