Layouts in Vuetify vs. Quasar
· ☕ 7 min read
How do you create typical layouts in the the most popular Material Design styling libraries for Vue? Creating layouts for your application Layouts help us standardize UI across the application. For e.g., you have layouts to take care of - Toolbar for the app and for views/components Navigation bars Standard controls (buttons/titles etc.

Centralized alert for Vuetify
· ☕ 4 min read
Centralize all error, warning and info alerts in one place. I like v-alert and tend to over-use it. It enables us to show detailed notifications (error or otherwise) - without significantly causing user inconvenience. I find v-alert more suitable in my apps than using, say, popup alerts that interrupt users, or “toast” notifications which I find unsuitable for detailed messages.

Role-based menus for navigation in Vuetify
· ☕ 3 min read
What is your preferred way of showing role-based menus and buttons in toolbar and navigation menus? A typical application may have many toolbars and navigation bars, each relevant to a specific set of users. You can then show/hide the elements based on the user role. In smaller applications, I simply choose to show or hide the menu items on a single navigation bar.

Dialog and Overlay in Vuetify
· ☕ 1 min read
I am a fan of dialogs but overlay function was long due in Vuetify. It is fairly common to use Vuetify dialogs to popup a component. You would have seen this option against many ‘edit’ buttons in data tables, or against ‘new’ button in a list/detail component. We include such a dialog using v-dialog.

Vuetify 2 Breaking Changes
· ☕ 3 min read
Vuetify has been an excellent companion to me. I absolutely suck as a designer. I can hide behind libraries like Vuetify and unleash my web app creativity on this poor planet. So, it was with lot of excitement that I looked forward to Vuetify 2.0, which had been sometime in the making.

eChart Display Issues in Tabs
· ☕ 3 min read
I love Vue / Vuetify and use them quite often in my projects. I had to display charts in a couple of recent projects and my search led to v-charts. I was impressed with what the library could do - v-charts is a Vue wrapper for eCharts, the Baidu-developed chart library The v-charts library makes it really easy to use ECharts.

Reusable Alerts in Vuetify
· ☕ 3 min read
A common requirement in any data-driven application is to show any alerts including error or warning messages at a standard location within a Vue component. This is easily accomplished using v-alert in Vuetify, but it is a good idea to use it in combination with a snackbar. Consider a typical component Account.

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’.

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 = !

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.

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.