articles by tag

#js

cover image

Integrate Algolia InstantSearch into a Vue Project

August 30th, 2021 by Philip Iezzi 11 min read

This TechBlog is based on Vue.js & Nuxt.js, using nuxt/content as a Git-based headless CMS, Tailwind CSS for styling. Today, we want to talk about full-text search integration. nuxt/content actually has a built-in search which indexes your pages/articles and does full-text lookups that are super easy to integrate. But I had quite a bad experience with it, content search delivering wrong search results (that did not even contain the query string or anything similar at all), and making it hard to extract a snippet of surrounding words/sentences of the search results.

Algolia offers a super powerful and flexible search with ready to use InstantSearch UI components for React and Vue. It was quite easy to write my own AlgoliaSearch component for this blog, but Algolia's InstantSearch defaults were so horribly resource-hungry and it took me a while to figure out how to fine-tune this.

cover image

Configure ESLint and Prettier for Vue/Nuxt.js project in VS Code

August 5th, 2021 by Philip Iezzi 2 min read

I'd like to share my recommended ESLint and Prettier configuration for a Vue.js project built with Nuxt.js (loving it!). As preferred IDE, I am using - guess what? - VS Code. This article is just considered as simple dev notes without digging any deeper, and it's based on my current "best practices".

Install ESLint and Prettier with all recommended plugins into devDependencies using yarn (you might as well use npm):

$ yarn add --dev eslint eslint-plugin-nuxt eslint-plugin-vue
$ yarn add --dev eslint-config-prettier prettier eslint-plugin-prettier
$ yarn add --dev @nuxtjs/eslint-module @nuxtjs/eslint-config @babel/eslint-parser