6 times Vue saved my day Speaker: Prashant Palikhe
By: Raoul Wittenberns & Danh Nguyen
Before the talk started we had the chance to talk to Prashant about Vue.js and some of its issues and solutions. From the start it was clear that Prashant is very passionate about frontend and Vue.js in particular. He seemed like a really relaxed and approachable guy to have a chat with.
We really share the same experience where we just get happy from Vue.js and it’s simplicity. Sure it comes with it’s own limitations, but as Vue.js is so true to plain JS it always seems so easily overcome with your own creativity.
In this technight Prashant shared his experience where Vue.js saved his day, which translate into 6 topics. He gets right into the specifics. But true to Vue.js paradigm also stays very understandable and easy to follow.
At the core of Vue.js lies the fact that it tries to solve the problem of automatically updating the DOM when data changes: it’s reactivity system.
A nice tip to check Vue.js performance Pashant gave us is to use Vue.config.performance = true; This makes it possible to check how long it takes for your component to initiate, render or updates. You can find the output in the Chrome Dev Tools in the performance tab.
It becomes a problem when we load a lot of scripts. This can result in a lot of network requests. So why not load only the necessary code. Vue.js comes with an dynamic import option. Dynamic imports will only load the requested component on demand. For example visiting a page or loading a modal on click will be lazy loaded.
To make this possible you can convert an existing import to a function.
For example:
from: import Component from ‘Component.vue’;
to: const Component = () => import(‘Component.vue’);
More in depth info can be found in the docs: https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components
Babel transpiles modern code to work in older browsers. But sadly transpiled code can be very big which makes it very difficult to debug. But wouldn’t it be nice to only ship the code, new browsers support without the big chucks of code Babel generates? You can by adding targets in the .babelrc
file. To use the new bundled code, you can add type=”module” attribute to the script tag: <script type=”module” src=”bundle.js”></script>
. This lets the browser load ECMAscript modules directly in the browser.
For older browser you can use the transpiled bundle from babel and load it with the nomodule attribute: <script nomodule src=”bundle.es5.js”></script>
.
A nice tip Pashant gave us to cleanup unused CSS is to use PurgeCSS.
<keep-alive/>
components.
The <keep-alive/>
component is a nifty built in feature that lets you maintain a components state and stop it from re-rendering when it’s no longer shown in the screen.
Normally Vue.js would destroy the component the moment you would leave a page and then re-render it when you would that page again. For instance, you want to save the current active tab on a page after you navigated somewhere else on your site and then return to that page again.
HTML
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
More in depth info can be found in the docs: https://vuejs.org/v2/guide/components-dynamic-async.html#keep-alive-with-Dynamic-Components
Scoped slots makes it possible to inject content from outside with data from the current component. This technique enables you to mix into eachother different components without adding additional logic. Your components do not need to know anything about each other and don’t get tightly coupled but can still interact.
Component.vue:
<slot :user=”user”>{{ user.name }}</slot>
Page.vue
HTML
<template v-slot:user>
{{ user.name }} {{ user.email }}
</template>
More in depth info can be found in the docs:
https://vuejs.org/v2/guide/components-slots.html#Scoped-Slots
As Pashant tells us, it turns out that Vue can export any component as a web component. These web components can be used in any web application, with or without a JS framework and maintaining it’s full capabilities. Given that you must include the vue runtime build in the application.
All you need is the vue-cli to run this command: vue build --target wc --name your-component
He shows us that it’s quite easily dropped into an existing react app where props are given and the component is rendered:
<script src="https://unpkg.com/vue"></script>
<script src="path/to/my-element.js"></script>
<!-- use in plain HTML, or in any other framework -->
<my-element></my-element>
More information can be found here: https://cli.vuejs.org/guide/build-targets.html#web-component
In under an hour Pashant has given us plenty of tips and techniques to show that Vue is an easy and mature framework full of possibilities. He is also an able speaker capable of explaining these techniques with ease and keeping your focus on the content. Should you ever get the chance to visit one of his talk we highly recommend it!
Watch the full presentation on https://www.youtube.com/watch?v=W_GlgDFqXaQ