shellen
November 12, 2021, 2:02am
#1
Nuxt 3 Beta is out and I’m trying to integrate with Algolia but having trouble. Has anyone successfully gotten Algolia to work with Nuxt 3?
More info on Nuxt 3 here. https://v3.nuxtjs.org
Not specific to Nuxt, but I posted this elsewhere and thought it might help here. There’s been some discussion around the way plugins are handled in Vue 3 here:
opened 10:17PM - 26 Oct 21 UTC
closed 12:22PM - 27 Oct 21 UTC
**Bug 🐞**
### What is the current behavior?
Following [these instructions]… (https://www.algolia.com/doc/guides/building-search-ui/installation/vue/#directly-in-your-page), the InstantSearch cannot be initialized due to an error on the library.
```
instantsearch.umd.js:5 Uncaught TypeError: window.Vue.use is not a function
at instantsearch.umd.js:5
at vue-instantsearch.js:1
at vue-instantsearch.js:1
```
[This is the line](https://github.com/algolia/vue-instantsearch/blob/bfbae88d4def8e5230ff89a4d3c6dae22bc745c0/src/instantsearch.umd.js#L3-L6).
### Make a sandbox with the current behavior
https://codesandbox.io/s/nifty-taussig-wh5m4?file=/index.html
(No console error is displayed because the error happens in the library).
### What is the expected behavior?
To actually work.
### Does this happen only in specific situations?
Only when using Vue 3 and the instructions ["Directly in your page"](https://www.algolia.com/doc/guides/building-search-ui/installation/vue/#directly-in-your-page).
### What is the proposed solution?
For what I can understand, checking the Vue version before adding as a plugin shouldn't break anything, as adding a plugin differs from Vue 2 to Vue 3. Specifically, [the developer needs to explicitly add the plugin to the app instance](https://v3.vuejs.org/guide/plugins.html#using-a-plugin).
If Vue 2 is not detected (`Vue.version` should work), `use()` shouldn't be called.
### What is the version you are using?
- Vue InstantSearch 4.1.0
- Vue 3.2.0
Let me know if you encounter anything else Nuxt 3 specific – it’d be good to capture it in a thread.
1 Like
dummnau
December 13, 2021, 11:21pm
#3
I can’t understand how to start work and from where please help me out
Hi @dummnau – Did you managed to get started? This was published since you posted and I found it a very helpful starting point for using Algolia with Nuxt 3.
For the Vue Instantsearch libraries, there’s a ticket that was picked up for February to improve this experience. Keep an eye on it:
opened 12:51PM - 12 Jan 22 UTC
**Bug 🐞**
### What is the current behavior?

### Make a sandbox with the current behavior
1. Create new nuxt 3 project.
2. Follow the tutorial here https://www.algolia.com/doc/guides/building-search-ui/going-further/server-side-rendering/vue/#with-nuxt (but use `vue-instantsearch/vue3/es instead`)
3. See the error
Template: https://codesandbox.io/s/github/algolia/create-instantsearch-app/tree/templates/vue-instantsearch
### What is the expected behavior?
It should render the components correctly
### Does this happen only in specific situations?
Always
### What is the proposed solution?
Review this hogan library.
### What is the version you are using?
"algoliasearch": "^4.11.0",
"vue-instantsearch": "^4.3.1"
> Always try the latest one before opening an issue.
seb
February 15, 2022, 1:04pm
#5
Hi,
You can take a look at the Nuxt Community for Nuxt 3 and Algolia: GitHub - nuxt-community/algolia-module: 🔎 Algolia module for Nuxt
1 Like