Using Storyblok Algolia in Nuxt 3
Storyblok is the first headless CMS that works for developers & marketers alike.
In this article, I will guide you through the process of creating a DXP using Nuxt 3, Algolia, and Storyblok. But we won't just add them to our project. We will also utilize StoryblokAlgoliaIndexer using a serverless function to index Algolia with new content added to Storyblok. That will allow us to search using Algolia for content that was added via Storyblok CMS.
If you get lost at some point, here is a GitHub repository with the code from this article: https://github.com/Baroshem/nuxt3-algolia-storyblok
What is Algolia?
Algolia is a Flexible Search & Discovery Hosted API that enables developers to build next-generation apps with composable APIs, delivering relevant content in milliseconds.
In other words, Algolia is a very powerful search engine that works quite similar to Elastic Search allowing for fast content delivery that matches current queries.
You can read more about Algolia here
Nuxt 3 with Algolia
In this section, I will guide you step by step through the process of integrating your Nuxt 3 project with Algolia.
If you get lost at some point here a GitHub repository with the final project that you can take a look at here.
Setting up a boilerplate Nuxt 3 project
Let's start with generating an empty Nuxt 3 project. We can do this by typing the following command in your terminal:
When you open your newly created project in your code editor you should see the following result:
Now, let’s install dependencies of the project:
And start the project to see if it is working as expected:
If everything went good, we should see the following results in our browser:
Setup Algolia account and add data
In this step, I will just mention that at this point you should have an Algolia account and an index filled with some test data or your own data. When it will be done, make sure to save the
search API key and
application ID from your Algolia settings as they will be used in the next section.
For the sake of this tutorial I have generated some dummy data in Algolia for Ecommerce so my Search dashboard looks like.
When generating a new index make sure to remember this name as it will be used in the next section.
Adding Algolia to Nuxt 3
First, let's install the Algolia module in our Nuxt 3 project like so:
By adding the module to buildModules, we can automatically import composables so that you can use them in your application without the need to import them.
After that, add following script setup section in your
Let's discuss in more detail the code above.
- We are calling a
useSearchcomposable and we pass the name of the index created in the Algolia dashboard as a parameter
- We are destructuring the
searchmethod from this composable.
searchmethod will be used to call algoliasearch to search for a certain query.
resultis a reactive computed value containing the result of the search method.
- We are calling a
onMountedlifecycle hook asynchronously and passing a query as an object property with a value of 'Samsung'.
To display the result in the browser you can add results in your template to see the actual result of the search as done below:
And that's it. You have now access to data delivered by Algolia that can be used to display some results to the users.
Adding Storyblok to the project
In this section, we will add Storyblok CMS to our Nuxt 3 application.
Before all, let's create a .env file with tokens and keys (we will need them in the next section):
First, let's install the required dependencies:
Next, register the module in
Automatic indexing of Algolia using Storyblok content
For that, we will use a
storyblok-algolia-indexer package that will do the index update for us. We will only need to trigger it after updating content in Storyblok.
Let's install the
/server/api/storyblok.ts API extension (you can read more about them here) with the following code.
Here is we are registering a new
server/api extension that will be used to trigger the indexing process. Inside of it, we are instantiating a new StoryblokAlgoliaIndexer with all required environment variables. This will automatically call both services and update indexes accordingly. After the whole process, we are sending a status code of 200 and a message.
You can easily test if this is working by simply going
http://localhost:3000/api/storyblok. After that, you should see
To make it easier for future projects we could utilize the Storyblok webhooks to do the automatic index update for us.
Webhooks are the HTTP POST requests that are being sent after a certain condition is met (in Storyblok case, publish or save content). Webhooks will be sent to certain URL addresses so that you can use serverless functions or deploy our Nuxt 3 application to Vercel/Netlify or any other hosting service and just call this URL i.e. https://nuxt-algolia-storyblok.vercel.app/api/storyblok
To learn more about webhooks you can go here
Here, we can also create some simple components in Storyblok using this guideline.
The next step now will be to display the Algolia results. For that, let's create
In here we are calling the
useSearch composable and passing a
storyblok index. Next, we will call the search method and as a query send a
Test phrase (as we have two teaser components with names Test, and Test 2)
We can also create
StoryblokStories.vue component that will enable to fetch stories to the app and display them accordingly:
Let's stop for a second here and explain the individual steps:
- We are calling
- We are calling the get method for the draft version of our stories and destructuring the
dataobject from it
- We are creating a reactive state with the data
- We are calling
onMountedto enable reacting to events in Storyblok
Finally, let's add both components to
When we switch to the browser we should see something like this:
It's not pretty I know but in this tutorial, our focus is on data fetching and modification. What you can see, is that we have two sections; Algolia and Storyblok.
- The result that is fetched from Algolia (that was populated after the automatic indexing using Storyblok content)
- Stories from Storyblok that we have created inside of the CMS
Well done! You have successfully built a Nuxt 3 application with integrations to Algolia and Storyblok (including automatic indexing). Keep in mind that this example is only the beginning of how you can integrate these tools together but this should give you a solid understanding of the core concepts.
|How to integrate Algolia with your Headless CMS||https://www.storyblok.com/tp/headless-algolia-integration|
|How to index entries from Storyblok with Algolia||https://www.storyblok.com/tp/index-storyblok-algolia|
|Storyblok Nuxt.js module||https://github.com/storyblok/storyblok-nuxt/tree/next|
|Storyblok algolia indexer||https://github.com/Baroshem/storyblok-algolia-indexer|