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

How can you use await without an async function? Don’t click or proceed further if you are not into practical jokes. Say, you try using await in a “normal” function or directly within a module.. function getWeather(loc) { const weather = await fetchWeather(loc); return weather; } // SyntaxError: await is only valid in async function You receive a compilation error that await can be used only in async function. But, if I have to use await but do not want to create a separate function with its own memory space, what should I do? ...

Generate Fibonacci series with generators and feel good about yourself. Previously you have seen how the totally practical example of generating Fibonacci series was breathing fire with memoization, and may have also come across using loops or recursion to solve the same problem. But, there is no fun in all that - this is real-life and we have to “generate” fun (yep, there we go again). If you have forgotten your schooling, here’s the series - any number is the sum of previous two numbers (except the first two, of course). ...

Previously, we have talked about all things being an object in Javascript. But to what extent can we apply this to our beloved functions. You can see this almost everywhere with the below syntax - const getSum = (x, y) => { return x + y; }; console.log(getSum(1, 2)); // 3 We have also touched upon how function is an object and how that helps in using closures and currying. For now, let’s leave all those complex things behind. Function being an object implies that we can do this - ...

Speed up your GraphQL learning with fake GraphQL APIs! I love JSON Placeholder, but it serves only REST requests. I had been looking for something similar in GraphQL. Without longer-term, reliable options, I had reverted to creating my own fake GraphQL server. While having my own server is certainly useful, it can become a pain to demonstrate or outline a feature to all - either through a video, blog post, or in public forums. ...

What are generators and how can I use them? How do you write loops in Javascript - Simple for/while? Recursion? In other less exciting ways? How do you throttle and control function execution? Debounce function? Build your own? What if you could produce the right mix of reusable functions, looping and throttling in one go? Enter generators. What are Generators? Generators are functions that lets you can control iteration. You can use generators to suspend execution of a function while saving the context for continuing the execution at a later time. ...

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

Create a simple to-do client using FeathersJS. We saw a quick tutorial on creating simple FeathersJS API yesterday. Let’s unlock the full power of Feathers by using its client library and consume the API created in the earlier post! Install and initialize project We will use plain Javascript and HTML with Feathers client-side library for the purpose of this demonstration. Create HTML page Create a simple HTML page to include - a simple input box to enter new to-do an element to display to-dos fetched from server We will also include feathers from CDN. ...