Integrate Algolia InstantSearch into a Vue Project
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.
Configure ESLint and Prettier for Vue/Nuxt.js project in VS Code
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".
$ 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