• 22 min read
• CSS , Apps , Vue , Nuxt.js , JavaScript
• Share on Twitter ,  LinkedIn

Giving users the ability to quickly search through and navigate our content easily comes with great benefits. This not only improves the user experience, but also increases user retention and boosts conversion as users can now explore beyond what brought them to our site in the first place.

In this tutorial, we’ll be looking at how to integrate this search functionality into our Nuxt app using Algolia. Algolia is a third-party service that we can integrate into our app and provides us with a set of tools that allow us to create a full search experience in our sites and applications.

We’ll be using Nuxt Content, “Git Based Headless CMS” which allows us to create and manage content using Markdown, XML, JSON files, and so on. We’ll build a Nuxt site with Nuxt Content with a search feature using Algolia InstantSearch, for styling, we’ll use TailwindCSS. This tutorial is aimed at Vue.js devs that are familiar with Nuxt.

Prerequisites

To follow along with this tutorial, you’ll need to have the following installed:

• Node ,
• A text editor, I recommend VS Code with the Vetur extension (for Vue.js syntax features in VS Code),
• A terminal, you can use VS Code’s integrated terminal or any other of your choice.

You’ll also require a basic understanding of the following in order to follow along smoothly:

• HTML, CSS & JavaScript,
• Vue.js ,
• Nuxt.js ,
• TailwindCSS .
  

Setting Up Our Nuxt App

Nuxt.js is a framework built on Vue, it has many capabilities and features including Server-Side Rendering (SSR).

To install it, open our terminal and run:

										
										npx create-nuxt-app
										
									

Where is the name of our project folder, I’ll be using algolia-nuxt for this project.

Running the command will ask you some questions (name, Nuxt options, UI framework, TypeScript, etc. ). To find out more about all the options, see the Create Nuxt app .

When asked for Nuxt.js modules, make sure to select Content - Git-based headless CMS to install the nuxt/content module along with our Nuxt app.

After selecting all of your options, installation can begin. My selected options look like this:

After successfully installing the Nuxt app, navigate to the directory by running this command:

							
							cd algolia-nuxt
						
					

Install Nuxt Content Separately

If you already have Nuxt set up before now, you can install the content module by running the command.

Skip this if you’ve already selected to install the nuxt/content module along with our Nuxt app.

					
					#install nuxt content npm install @nuxt/content
				
			

Then you can add it to our modules property inside our nuxt.config file.

		
		//nuxt.config.js export default { modules: ['@nuxt/content'] }
	

Install And Setup TailwindCSS

TailwindCSS is a utility first CSS framework that provides us with custom classes we can use to style our app.

We’ll also be using TailwindCSS Typography , which is “a plugin that provides a set of prose classes you can use to add beautiful typographic defaults to any vanilla HTML you don’t control (like HTML rendered from Markdown, or pulled from a CMS).”

First, we install @nuxtjs/tailwindcss which is a Nuxt module for TailwindCSS integration, as well as TailwindCSS and its peer-dependencies using npm:

	
	npm install -D @nuxtjs/tailwindcss tailwindcss@latest postcss@latest autoprefixer@latest

Add the @nuxtjs/tailwindcss module to the buildModules section of our nuxt.config.js file:

	
	// nuxt.config.js export default { buildModules: ['@nuxtjs/tailwindcss'] }

Create Configuration File

Next, generate our tailwind.config.js file:

	
	npx tailwindcss init

This will create a minimal tailwind.config.js file at the root of our project:

	
	//tailwind.config.js module.exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }

Create a tailwind.css file in assets/css/ use the @tailwind directive to inject TailwindCSS’ base, components, and utilities styles:

	
	/*assets/css/tailwind.css*/ @tailwind base; @tailwind components; @tailwind utilities;

You can import the CSS file into our components or make it accessible globally by defining the CSS files/modules/libraries you want to set globally (included in every page).

	
	/* nuxt.config.js*/ // Global CSS: https://go.nuxtjs.dev/config-css css: [ // CSS file in the project '@/assets/css/tailwind.css', ],

Here, we have added the path to our tailwind.css file to the list of global CSS files in our nuxt.config.js .

The @/ tells Nuxt that it’s an absolute path to look for the file from the root directory.

Install TailwindCSS Typography

	
	# Using npm npm install @tailwindcss/typography

Then add the plugin to our tailwind.config.js file:

	
	// tailwind.config.js module.exports = { purge: [], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [ require('@tailwindcss/typography'), ], }

Configure TailwindCSS To Remove Unused Styles In Production

In our tailwind.config.js file, configure the purge option with the paths to all of our pages and components so TailwindCSS can tree-shake unused styles in production builds:

	
	// tailwind.config.js module.exports = { purge: [ './components/**/*.{vue,js}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}', './nuxt.config.{js,ts}', ], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [ require('@tailwindcss/typography'), ], }

Since we’ve installed the packages, let’s start our app:

	
	npm run dev

This command starts our Nuxt app in development mode.

Nice 🍻

Creating Our Pages And Articles

Now, let’s create our articles and a blog page to list out our articles. But first, let’s create a site header and navigation component for our site.

Creating A Site Header And Navigation

Navigate to our components/ folder, and create a new file siteHeader.vue and enter the following code:

Here, in our

we have a component wrapped in which routes to the home page and another that routes to /blog (We’ll create the blog page that we will create later on) .

This works without us importing the components and configuring routing ourselves because, by default, Nuxt handles importing components and routing for us.

Also, let’s modify the default component. In components/Logo.vue , replace the content with the following code:

We can now add our siteHeader.vue component to our site. In layouts/default.vue , add just above the component.

	
	
	
			...
		
	

The component renders the current Nuxt page depending on the route.

Creating Our First Article

In content/ , which is a folder created automatically for the nuxt/content module, create a new folder articles/ and then a new file in the folder first-blog-post.md . Here is the file for our first article in markdown format. Enter the following code:

	
	 --- title: My first blog post description: This is my first blog post on algolia nuxt tags: [first, lorem ipsum, Iusto] --- ## Lorem ipsum Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda dolor quisquam consequatur distinctio perferendis. ## Iusto nobis nisi repellat magni facilis necessitatibus, enim temporibus. - Quisquam - assumenda - sapiente explicabo - totam nostrum inventore

The area enclosed with --- is the YAML Front Matter which will be used as a custom injected variable that we will access in our template.

Next, we’re going to create a dynamic page which will be used to:

• Fetch the article content using asyncData which runs before the page has been rendered. We have access to our content and custom injected variables through the context by using the variable $content . As we are using a dynamic page, we can know what article file to fetch using the params.slug variable provided by Vue Router to get the name of each article.
• Render the article in the template using .

Ok, navigate to pages/ and create a blog/ folder. Create a _slug.vue (our dynamic page) file and insert the following:

If you go to your browser and navigate to https://localhost:3000/blog/first-blog-post you should see our rendered content:

Now that our dynamic page is working and our article is rendering, let’s create some duplicates for the purpose of this tutorial.

	
	 --- title: My first blog post description: This is my first blog post on algolia nuxt tags: [first, Placeat amet, Iusto] --- ## Lorem ipsum Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda dolor quisquam consequatur distinctio perferendis. ## Iusto nobis nisi repellat magni facilis necessitatibus, enim temporibus. - Quisquam - assumenda - sapiente explicabo - totam nostrum inventore

Create Blog Page To List Our Articles

Let’s now create a blog page to list our articles. This is also where our search bar will live. Create a new file pages/blog/index.vue .

Here, in our asyncData function, when fetching $content('articles') we chain .only(['title', 'slug', 'updatedAt', 'description']) to fetch only those attributes from the articles, .sortBy('createdAt', 'asc') to sort it and lastly fetch() to fetch the data and assign it to const articles which we then return.

So, in our