Vuex Helper Functions
· ☕ 2 min read
Use helper functions to access Vuex capabilities and greatly increase readability of your code. We will consider the following Vuex store for a quick demonstration - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // store/index.js import Vue from "vue"; import Vuex from "vuex"; import user from ".

Setup Modular Vuex
· ☕ 2 min read
Vuex is my preferred way to manage state within Vue. Vuex is better structured using modules to make your code more readable and maintainable. See why you should use Vuex in Vue. Create a Vue app as you will always do using vue create myApp. Do a cd myApp && vue add vuex if you have not selected Vuex at the very beginning.

Use Google Recaptcha in Vue Forms
· ☕ 2 min read
Google recaptcha is quite a powerful tool in reducing spam through our contact forms. Once included in our forms, reCaptcha automatically manages suspicious activity, prompts additional ‘bot vs. human checks’, or is completely transparent to the overall flow - depending on who is interacting with the site. Including reCaptcha in Vue is quite simple.

Show FAQs in Vue - The Simple Way
· ☕ 2 min read
In one of the recent projects there was this requirement to create a FAQ page for a small application. The change was not planned and came up during the final stages of the project. I took it in the same spirit as what I do for a home page. I did not plan to use SSR or a static-site generator, but rather leaned back on the excellent ‘prerender-spa-plugin’.

Open Google Map URL on Button Click in Vue
· ☕ 2 min read
Recently I had to incorporate Google map functionality on list of contact cards. I though it would be interesting to outline a decision map of what went into the design and development. My first thought for the map functionality was to embed the map alongside the contact. This was quickly discounted since we had too many contacts on the same page (with a possibility of infinite scroll in the future).

Toggle to hide or show password in Vuetify
· ☕ 1 min read
You can do the following in a password box to hide or show passwords on click. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <template> <v-text-field name="password" :value="myPass" label="Enter password" :append-icon="value ? 'visibility' : 'visibility_off'" @click:append="() => (value = !

v-if vs. v-show in Vue
· ☕ 2 min read
There are two ways to conditionally show or hide UI elements in Vue - v-show and v-if. Learn which option to use where. v-show Use v-show to show an element on the UI based on given condition. The element is present in the DOM, but will have class set to display: none.

One way vs. two way binding in Vue
· ☕ 3 min read
Vue supports two-way binding through the excellent v-model directive, and one-way binding using a :value= syntax. Both have their uses within a Vue component. There are good enough reasons to use one over the other. First, let’s look at an example of two-way binding - 1 2 3 4 5 6 7 8 9 10 11 <template> <input v-model="message" /> </template> <script> export default { data() { return { message: "hello" }; }, }; </script> v-model is a short form of v-bind.

Data vs Computed vs Watcher in Vue Components
· ☕ 3 min read
There are three main ways to store variables and/or react to variable changes in Vue components. data computed Watch for changes in watcher So, how to decide when to use what? (that is 3-in-1 question, I outwit myself) Although these sections look similar, they serve different functions. Evaluate the variables against the following considerations when you are in doubt.

1 + 3 Ways to Get Components Talk to Each Other in Vue
· ☕ 4 min read
Vue provides one excellent way and three other alternative ways of getting your components to work together to form one beautiful, seamless application. Let us look at them one by one :) 1. Vuex Yesterday we talked about Vuex and how we (try to) manage vuex variables and local variables in a Vue component.

Vuex Store vs. Local Variables in Vue Components
· ☕ 2 min read
Vuex is quite a powerful way of storing variables and sharing them across components, but where do you draw the line? Which variables do you store locally and which of them are shifted to Vuex store? This is the advise I often come across - Get your variables in store; keep component clean and consider future reuse Don’t overdo Vuex.

Lazy load components as a general practice
· ☕ 3 min read
Vue allows us to build out infinite blocks of components that can work together or build on top of another to provide UIs of increasing sophistication. You may have a page or view that loads dozens of components including fields, tabs, charts and so on, and the loading of such components is automatically taken care by Vue.

I love search function in Vuetify data tables
· ☕ 2 min read
Search in Vuetify data tables is just beautiful. Define a data table and a search is readily available for you. What else can a human ask for? In fact, data tables were the single biggest reason for me to choose Vuetify about an year back. My long term association with data-driven application means that I am ever-so-dependent on the data table functionality.