If given a choice to develop mobile apps, what is it going to be Capacitor, Cordova or something else altogether? Here are my glorious opinions on the matter. The World of Mobile Apps - with VueJS As fans of VueJS, we have more than few options for mobile app development. A few popular ones are -

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.

Debounce operations in Vue using this 10 line script. Avoid loadash and friends. What is debounce? Delay and throttle operations to wait and collect user input before doing something with the input. The “something” can be updating another field, doing an API call, or starting a timer to self-destruct. Did you not debounce earlier?

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.

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.

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.

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.

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 -

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?

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

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.