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

Pass all scoped slots b/w components
· ☕ 1 min read
A nice way to pass along all scoped slots to a component. We can pass all props from the source component to target using this code - 1 2 3 4 5 6 7 <wrapper> <b-table v-bind="$attrs" v-on="$listeners"> <template v-for="(_, slot) of $scopedSlots" v-slot:[slot]="scope" ><slot :name="slot" v-bind="scope" /></template> </b-table> </wrapper> Found this in this StackOverflow post.

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.

Print a page section on button-click in Vue
· ☕ 2 min read
Use a button on a Vue component to start a print dialog and print a specific section. Setup We will use a small library called ‘html2paper’. First install the said library in your Vue project - 1 npm install vue-html-to-paper Add library to your code in main.js -

Validating props in Vue components
· ☕ 2 min read
Validate your props in Vue components. We have seen all about props in Vue before. We can define a simple prop in a component, pass the value from source, and the receiving component happily processes it. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <template> <div>{{ contactDetails }}</div> </template> <script> export default { data: () => ({}), props: { contactDetails: { type: String, required: true } } }; </script> But, what if you want to validate the prop?

A simple password field in Vuetify
· ☕ 3 min read
Enable a simple password field in Vuetify. Validating passwords is a repetitive task, but a task nevertheless. But, how do you make sure that the password field is modern and the password complies to pre-defined rules? I don’t quite build super sensitive applications, and tend to use a simple VeeValidate or Vuelidate expression to validate passwords.

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.

Use functional components in Vue
· ☕ 1 min read
Use light-weight functional components if you want stateless components. Components consist of many different parts in Vue - Data computed properties methods etc. Data property in particular stores states of the component, and enables the component to react to prop changes by keeping track of all that the component has to go through.

Evaluate and test Vue scripts using single HTML file
· ☕ 2 min read
How do you test your Vue code blocks and theories? Of course, you can simply have a test Vue project and throw in a single file component each time. Or, you could follow a simple structure to create a HTML/JS files. Or, you could just create everything in a single HTML page and clone it for quick tests.

Watch a specific prop of an object
· ☕ 2 min read
How do you watch a specific prop of an object? Is it useful at all? Watch is invaluable. It allows us to react to changes in the state and keep it that way through the life cycle of the component. Creating a watch is pretty simple. Consider the below example where we are monitoring the search text to respond to changes.

Measure Performance in Vue
· ☕ 1 min read
Measure your Vue application performance in a standard and consistent way. Previously we have seen how we can quickly measure performance in Javascript. How about Vue? Vue is the right mix of UI and business logic, and cannot be tested with standard back-end script execution speed. On the other hand, standard UI testing tools may prove to be a bit of an overkill due to the effort required to develop and maintain them.

Bundle size using Vue CLI
· ☕ 1 min read
You can get a bundle size report just by using Vue CLI and nothing else. Keeping track of bundle sizes is a best practice. You need to know what gets delivered to users so that you can try to optimize stuff and take corrective steps to decrease chunk sizes, tree-shake where you can etc.