Building Digital Experience Platform with Nuxt 3, Algolia, Storyblok, and TailwindCSS
Storyblok is the first headless CMS that works for developers & marketers alike.
In this article, we will build a Cat Gallery with Nuxt 3 and TailwindCSS. Storyblok will be used to fetch the content. Algolia will deliver search results. Both services will be in sync, thanks to the indexer. This indexer will allow us to update the Algolia index after each content update on the Storyblok page, keeping both services up to date.
Our final application will look like this:
This article aims to get you familiar with all tools and how to connect them to achieve a functional Digital Experience Platform (DXP). You can easily add other content and styling using this example.
If you get lost at some point, you can always go to the code repository for the whole application example → https://github.com/Baroshem/dxp-nuxt3-storyblok-algolia-tailwindcss
What is a Digital Experience Platform?
A digital experience platform (DXP) creates, delivers, and optimizes connected digital experiences across multiple interaction channels, including websites, voice assistants, and mobile applications. Examples of digital experience platforms include Salesforce DXP, SAP, and Oracle.
You can check more about DXPs here → https://www.storyblok.com/mp/digital-experience-platform
Algolia
To connect to the Algolia search engine, we will use the official Nuxt 3 module → https://algolia.nuxtjs.org/. I am delighted to use this module as I am a creator and maintainer of it 🙂
Let’s install it by using the following command:
Let’s create .env
file and add these environment variables inside:
All these variables can be found in the Algolia dashboard below:
Let’s register the module in our nuxt.config.ts
file:
To test if it works correctly, let’s add the following code to the app.vue
component:
Let’s stop for a second to explain what is going on here. We are calling a useAlgoliaSearch composable in the script section of this page. From it, we are destructuring the result and search. The result is a computed property that will be populated with the data from Algolia. Search is an async method that will be used to fetch the data from Algolia. Next, we are just calling the search method inside the onMounted
lifecycle hook. Finally, we are printing the result in the template.
If the Algolia connection works correctly. Let’s proceed to the Storyblok section.
Storyblok
To connect to the Storyblok, we will be using the official module → https://github.com/storyblok/storyblok-nuxt
Let’s install it by using the following command:
Now, let’s register the module in the nuxt.config.ts
file:
Let’s add a new environment variable to the .env file:
This environment variable can be easily located in the Storyblok Dashboard:
Let’s use the Storyblok composable in our app.vue
:
Let’s stop for a second here to explain all steps. We are calling a useStoryblok
composable, and as a parameter, we are passing the name of our content page from which we want to fetch data. Next, we are also passing an options object with the version draft. The story
property is ready to be used in the template. With this, we have successfully configured both services and can fetch data from them easily.
TailwindCSS
The application works but does not look good. Let’s add TailwindCSS to it so we can style our images of cats later. For that, we will be using the official TailwindCSS module that you can check out here → https://tailwindcss.nuxtjs.org/
Let’s install it by using the following command:
Also, don’t forget to register it in the nuxt.config.ts
:
If you need it, you can also generate a tailwind.config.js
, but it was not needed in my case. Let’s add some styling to see if it works:
We now can easily style our elements with TailwindCSS.
Now, let’s create CatImage.vue
component with the following code. It is a simple wrapper for images, and the component itself will have two props; src {1} and title {2}.
Furthermore, let’s create a CatImageGallery.vu
e component that will be a wrapper for our image components. It will accept one prop of images that will be an array of images we want to display.
If we did everything correctly, this should be the result in the browser:
We now can easily add new cat images to our website by using Storyblok.
Populating Algolia with content from Storyblok
We can now add and fetch cats from Storyblok CMS. It would be beneficial also to have the same data in Algolia so that we can easily search for these cats when needed.
For that, we will be using the feature of the Algolia module for Nuxt called indexer you can check out here → https://algolia.nuxtjs.org/advanced/er
First, let’s modify the Algolia configuration in nuxt.config.ts
like the following:
Let’s add the remaining environment variables:
INDEXER_SECRET
will be used to check if you can access the endpoint where the indexer is triggered.
ALGOLIA_INDEX_NAME
will be used to populate that index with the indexer.
Next, let’s try to add the previous code related to Algolia, and let’s see what the results fetched from Algolia this time:
At this point, the result should be empty as our index was not yet populated with data from Storyblok.
To populate it, we can access the api/indexer
endpoint. If we go there directly, we will see a message that we are not allowed to access this resource. We want to secure this endpoint so that the indexing can be triggered only when the secret is passed. In the browser, you should see: “You are not allowed to access this resource”
After passing the correct secret in the url, indexing was successfully triggered, and the result in the browser is as follows: “Algolia indexed with the data from Storyblok!”
As a result, in our console, we can see a message that the index was populated with three entries (three cat images from Storyblok) with a message: “Index stored with 3 Entries”
This is an example of Server Side Rendered application, but the same result can also be done in Statically Generated Sites using serverless functions.
This can also be confirmed in the Algolia dashboard like the following:
Our query in the search method is initially set to an empty string so that we will fetch all cats results.
The result can be observed in the browser:
However, if we change it to some text (like chill as one of the cat objects is named chill-cat), we will get only one result.
That can be observed below:
Summary
Nicely done! You have just created an application powered by Storyblok CMS content that can be easily searchable by Algolia. If you get lost at some point, visit the code repository here → https://github.com/Baroshem/dxp-nuxt3-storyblok-algolia-tailwindcss.