category: Vue

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 - <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. Why do this? You probably would do this when you have a component that is collating other components to get things done. The source component would then have to proxy what it received to the target components so that any conditional rendering/processing can happen based on inputs.

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. This is easier to develop and to maintain. ...

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. But, what do you do when you need specific elements highlighted and active? Well, that wasn’t difficult - it just needed stitching together stuff. ...

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 - npm install vue-html-to-paper Add library to your code in main.js - // main.js import Vue from "vue"; // ... import VueHtmlToPaper from "vue-html-to-paper"; // ... const options = { name: "_blank", specs: ["fullscreen=yes", "titlebar=yes", "scrollbars=yes"], styles: [ "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css", "https://unpkg.com/kidlat-css/css/kidlat.css" ] }; Vue.use(VueHtmlToPaper, options); // ... We will use a Vuetify example to demonstrate how this is used in Vue code, because - why not? ...

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. <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? We have certainly seen the warnings when we do not pass the prop of the expected type or when not supplying a mandatory 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. Here’s the Vue component.. <!-- PasswordChange.vue --> <template> <v-container> <v-form ref="form" v-model="valid"> <v-layout text-center wrap> <v-flex xs12></v-flex> <v-flex xs12 mb-4> <h1 class="display-1 font-weight-bold mb-3">Change thy password</h1> <p class="subheading font-weight-light grey--text"> It is 2020, but password is still a thing. </p> </v-flex> <v-flex offset-md-3 xs6> <v-text-field autocomplete="current-password" :value="userPassword" label="Enter password" hint="Your password passed! Password rules are not meant to be broken!" :append-icon="value ? 'mdi-eye' : 'mdi-eye-off'" @click:append="() => (value = !value)" :type="value ? 'password' : 'text'" :rules="[rules.password]" @input="_=>userPassword=_" ></v-text-field> </v-flex> </v-layout> </v-form> </v-container> </template> We are doing a few basic things in the component - ...

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. Meanwhile, my lack of interest in following up on beta news meant that I merrily continued to use Vuetify without a care of the world. That’s the reason the many breaking changes came as rather shocking news. My enterprisey application background, and a somewhat pseudo-hobbyist mindset for a few applications did not help one bit. ...

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. What if you want no states? For e.g. you have a ‘Contact Service’ component that is statically displayed as an icon on the main page, or a footer component that takes in a prop and displays its value. ...

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. Not a new concept by any means - but I still wonder why I stick to SFCs each and every time. ...

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. You may observe that we simply do not respond to changes, but debounce it - i.e., wait for 1000ms and trigger off a request only if there was no user input within the 1000ms. ...