articles by tag

#js

cover image

Vue3-Toastify in a Laravel/Inertia/Vue project

April 4th, 2023 by Philip Iezzi 7 min read

Need a full-featured toast notification component for your next Vue.js project? Don't look any further: Vue3-Toastify beats it all!

Previously I have tried Vue Toastification («Light, easy and beautiful toasts») and Mosha Vue Toastify («A light weight and fun Vue 3 toast or notification or snack bar») but they are both kind of outdated and abandoned projects with latest releases dating back to prehistoric 2021. Let me show you how to integrate great looking and easy to use toast notifications into your VILT stack!

cover image

Vue.js 3 v-model two-way data binding for Dummies

July 14th, 2022 by Philip Iezzi 7 min read

Vue v-model is a directive that creates a two-way data binding between a value in our template and a value in our data properties, while v-bind only binds data one way. A common use case for using v-model is when designing forms and inputs.

While the core concept of v-model is quite straightforward, you might struggle with it when building advanced custom form components. Personally, this was my main pain point when learning Vue, especially since there are so many different ways this can be handled and tutorials diverge quite a bit.

Vue's official Components In-Depth > Events > Usage with v-model documentation only covers the most basic usage without providing any advanced examples. So I put together some use cases for you to learn more about v-model. The main question is: How can I make that custom component reusable so that it can be used as a form component with two-way data binding?

cover image

Configure ESLint and Prettier for Vue.js 3 in VS Code

January 3rd, 2022 by Philip Iezzi 4 min read

I'd like to share my recommended ESLint and Prettier configuration for a Vue.js 3 project. The two are not mutually exclusive – ESLint is for linting and Prettier handles code formatting. Believe me, you're going to use both! As preferred IDE, I am using VS Code. This article is just considered as simple dev notes without digging any deeper, and it's based on my current "best practices".

We're going to install Prettier first and ensure it's running fine. After that, we're going to install ESLint which is a bit trickier and needs some fine-tuning so that it won't conflict with any rules that Prettier already handles.

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