Category: Vue
-
Centralized alert for Vuetify
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. -
Pass all scoped slots b/w components
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 - -
Role-based menus for navigation in Vuetify
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. -
Dialog and Overlay in Vuetify
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. -
Print a page section on button-click in Vue
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’. -
Validating props in Vue components
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. -
A simple password field in Vuetify
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? -
Vuetify 2 Breaking Changes
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. -
Use functional components in Vue
Use light-weight functional components if you want stateless components. Components consist of many different parts in Vue - Data computed properties methods etc. -
Evaluate and test Vue scripts using single HTML file
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. -
Watch a specific prop of an object
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. -
Measure Performance in Vue
Measure your Vue application performance in a standard and consistent way. Previously we have seen how we can quickly measure performance in Javascript. -
Bundle size using Vue CLI
You can get a bundle size report just by using Vue CLI and nothing else. Keeping track of bundle sizes is a best practice. -
Lazy load images in Vue
Lazy load images to improve perceived performance. If you have a view that has lot of images, you may observe high initial page load time and stuttering. -
Make an object non-reactive in Vue
Are you tired of Vue reactivity? Do you long for days when you had to manually refresh HTML pages to see changes?