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. Vue has to get the comparably larger payload to paint the UI, and this takes time. The easiest way of lazy loading images is by using an package called vue-lazyload.

Are you tired of Vue reactivity? Do you long for days when you had to manually refresh HTML pages to see changes? Or, do you have large objects and reactivity is killing your app? Vue has the answer. Vue enables this magic to respond to any changes in state on the UI.

You can remember the position in a view and navigate users to that position when they click on ‘back’. You could also navigate users to specific anchor links in a long page. Vue helps you to create a great single page application. Navigation between views is almost seamless and “feels” really fast.

Let us move to the dark side and break some things. We will start with Vue’s reactivity. See a couple of commonly used patterns to break reactivity in arrays and objects. And oh, there are ways of working around that if you are into boring stuff. All the below things applicable to Vue 2 btw.

Use a less known property called immediate to call a function during created and in watch. Take the below scenario - Component needs to fetch data from server to get contact detail when user clicks on a specific contact in a list User can use arrow keys to fetch next or previous contact by clicking arrows on the component One of the typical ways to address this requirement is to call the fetchContact method

Do you type cast in Vue? Of course you do. So, is there a way to just not use Javascript shortcuts since they are so cumbersome? Really? You find this cumbersome? 1 2 let myNumStr = +myNum; let myStrNum = "" + myStr; See more at type casting in Javascript and shortcuts to type cast.

Vue enables you to extend a component, thereby carrying forward all the base elements and add some more. This is one of the efficient ways for component composition. Let’s say you have a simple panel that you use everywhere - 1 2 3 4 5 <!-- MainPanel.vue --> <template> <!

Struggling to copy/paste all useful properties when initializing Vue? Looking to see what else Vue can do for you? Here’s the answer. We have seen how Vue can be used from CDN. Initializing Vue is simple enough - 1 2 3 4 5 // main.js new Vue({ el: "#app" } }); The above code block will initialize Vue and load it to element with id app.

Do not reinvent the wheel to create your own date picker component. Just use one of the existing components and praise those developers who share great things. I have historically struggled with date pickers and had finally settled in on a good date picker for Vuetify. Since most of my Vue projects are standardized on Materialize, that posed no issues.

Let us create a dead simple calculator using Vue. Create basic structure As it was earlier, the basic structure just has two files - index.html and main.js. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <!-- index.

Let us create a small example to-do app using Vue from CDN. There is not going to be any backend for this application. Create basic structure The basic structure just has two files - index.html and main.js. 1 2 3 4 5 6 7 8 9 10 11 <!-- index.

There are multiple ways of using VueJS - which should you use? VueJS is flexible and powerful - not a combination that you often see together. You can initiate and use Vue in more than one way in your app. Use in package with a build cycle This should be your preferred way of using Vue.

I love Vue / Vuetify and use them quite often in my projects. I had to display charts in a couple of recent projects and my search led to v-charts. I was impressed with what the library could do - v-charts is a Vue wrapper for eCharts, the Baidu-developed chart library The v-charts library makes it really easy to use ECharts.