Wait for User to Stop Typing in Search Fields on Vue UI
· ☕ 2 min read
Let us see how we can easily accumulate requests when user types in a search (or auto-complete) fields and collate them in one go. When implementing the ‘instant search’ fields in Vue, the cycle of events is pretty standard - User keys in characters System keeps getting those characters and sending them to the server for processing System reacts to changes from server and displays search results The same cycle repeats for fields include auto-complete that take user action and return stuff from server.

Format Data Using Vue Filters
· ☕ 1 min read
Vue filters provide an excellent way to format data on the UI. Define Vue filters using a filter: block in single file components, or use global filters. Consider the following use cases - Purchase date is stored in yyyy-mm-dd in DB, but you have to display dd-mm-yyyy format Cost data needs to be displayed in currency of user’s locale Apply separators in bill number for better readability These and many more are easily accomplished in Vue filters.

Simple Form Validation in Vue
· ☕ 2 min read
You find forms everywhere in a data-driven application. Forms, as a rule, need some validation on the client-side to nudge users to fill in data in line with what we want. These validation are easy to implement in Vue. Consider an example that includes Vuetify for styling the UI -

Using Props in Vue Router
· ☕ 2 min read
Vue router can pass props to the view on invocation. This can be super useful when same views cater to different contexts, and the context is known at the time of clicking URL. Vue router just catches the context and passes it on to the view. For example: if you want to show “My Todos” to all users, and “All Todos” to administrators.

VueJS Proxy Error for Backend Connection
· ☕ 3 min read
VueJS has been my ‘go to’ front-end development framework for the last two quarters. I use VueJS with Laravel, FeathersJS and AdonisJS, and cannot just stop loving the development cycle. While you are developing the backend and frontend on same machine, and, if you fly solo - you end up using the same development machine for all purposes.

Authentication in Vue Router
· ☕ 3 min read
Vue router has a simple job - receive client-side requests and invoke the view that needs to be rendered in the browser. That is also a powerful job. Typically, this is what you see in a Vue router - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 // client/router.

Persistent Storage in VueJS
· ☕ 3 min read
VueJS is massively useful tool. And, I love churning out SFCs like there’s no tomorrow. Vue helps us provide a super user experience. Combine it with Vuetify, Buefy and the like, and you have an application that is loved by all. Except, when the user hits F5 in the browser.

Apply Vue Style Dynamically
· ☕ 2 min read
I have been using Vue and Vuetify quite a bit and absolutely loving it. The combination alongside some of the backend Javascript frameworks (like AdonisJS, Strapi) make web app building fast and fun. In this post let’s take a look at how we can dynamically style elements by using data to drive styling.

The v-model Magic
· ☕ 2 min read
In a previous post, we saw the power of bindings in Vue. v-model is a powerful way to bind variables and UI rendering in Vue. Let us look at a bit more of v-model in this post. Remind me what is v-model about? In its simplest form.. 1 <input type="text" v-model="myName" label="Your name:"> .

Vue Reactivity and Binding
· ☕ 4 min read
The power of Vue is in making reactive components child’s play. Well, that is true if the child in question is a 8-year old nephew who knows the basics of Javascript - you know what I mean. Consider an example that I have used before - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 <template> <div class="hello"> <h1>{{ msg }}</h1> <p> <button @click="sayHello">Hello</button> <span v-if="showHello">&nbsp;World!

Vue Program Structure - Objects & Functions
· ☕ 4 min read
Vue provides what are called ‘Single File Components’ (SFC) that make the development process easier. Completely new to Vue? Head over to another post and get to know Vue. One of the big advantages of Vue is the fact that it can be deployed in multiple ways in your app. You can link Vue CDN link and just start using it for simple purposes, or use the full scale development environment setup by Vue CLI.

The Rapid Vue Learning Plan
· ☕ 2 min read
The advise that has been belted out fairly often for budding front-end developers - Learn HTML Learn the fundamentals of Javascript Push yourself through styling Know how to create APIs - REST, GraphQL Go deep with design patterns, test automation, build tools, and so on I beg to differ.

Get to Know Vue
· ☕ 3 min read
Ok, I admit. Amongst the tens of frameworks that I have used and hundreds that I said ‘hello’ in, I have come to love Vue more than I would like to admit. Vue has made my life easier. IMO a beginner to Javascript (but who is experienced with programming) should pick up Vue over anything else that exists today.