Vue.JS Blog - Info, Tips, Tutorials and News

In  Vue Broadcasting (Part 1)  we showed you how to create a Vue event broadcasting class that could be imported and shared across an entire application. Let's dig into how to use this feature... First we'll need to import the VueEvent class import VueEvent from 'vue.broadcast' This assumes the Vue broadcast file is named "vue.broadcast.js" and lives in the same directory as the importing file. Now that the VueEvent singleton class is imported we can begin using it to broadcast and listen across instances and components. Let's setup an example listener: new Vue({     el: '#example-foo',     mounted () {         VueEvent.listen('log-to-console', this.log);     },     methods: {         log (message) {             console.log(message);         }     } } Now let's broadcast a message from another instance: n...

Use computed properties instead of watching your data. Vue comes out of the box with a data binding watch mechanism, which is something you may be very familiar with if you happen to have an Angular 1 background.  However, much like the case with Angular, using watchers often gets overused and abused causing the developer to spend more time relying on DOM and binding changes to initiate reactive processes then properly relying on your users events.  This issue is nothing new, and the usage of copious watchers was already being chided even in the Angular community. That being said, there are times when a watcher was necessary in Angular, usually in regards to a computed output requirement based on one or more bound data models. Vue comes to the rescue with computed properties. Computed properties allow outputting a bindable data variable that requires computation logic without the need of watchers. See this simple example from the Vue documentation ...

Automatically import all single file components during Webpack 2 bootstrap   Many developers using Webpack and utilizing Vue's Singe File Components load each component manually, one-by-one within an app or bootstrap file. However, Webpack comes with configuration options that can automate this process by instantiating the Vue component to match the file name. Let's take a look at our simple Webpack config function that can be used to automatically require our components. // Require and instantiate our components function requireAllComponents(requireContext) {     let keys = requireContext.keys();     return requireContext.keys().map(key => {         let pathMap = key.split('/'),             label = pathMap[pathMap.length - 1].slice(0, -4).replace(/([A-Z])/g, '-$1').slice(1).toLowerCase();         Vue.component(label, requireContext(key));     }); } N...

Broadcast across all Vue instances Vue comes with the very handy feature of broadcasting events through the   $on   and  $emit  instance methods. Generally this is used to communicate between parent and child components. However, often times developers will attach an instance to the global  window  object to be able to communicate across all Vue instances. This is a great convenience but let's create a more scoped and portable solution by simply creating an exported VueEvent class: class VueEvent {     /**      * Event broadcaster class constructor.      *      * @constructor      */     constructor () {         this.vue = new Vue();     }     /**      * This will emit a broadcast that can be utlized by an active Event listener.      *      *...

Don't flash your users... Something nearly all MVVM and binding frameworks have in common is the dreaded "flash of content" (FOC). As your Vue instance finishes instantiating a page may quickly show your un-compiled mustache bindings before Vue has a chance to populate the variables. It can also have a jarring effect when "v-if" and "v-show" are being used within your Vue template. Luckily Vue comes with an eloquent solution to the FOC problem right out of the box with "v-cloak" V-cloak is a simple directive added as an attribute to an element that will be removed once your Vue instance has finished compilation. It's as simple as: < div v-cloak > {{ foo }} </ div > Now all that's left if to add a rule for the cloaking attribute within your styles. [v-cloak] { display : none; } In this example the  <div>  will not be visible until the compilation is done. You're now on...

When did Vue.js become SO popular? Easy, Oct 2. 2016. As you can see in this Google trend chart, Vue.js overtook React.js as the most popular search term and climbed rapidly in the following months. So what happened in October the shot Vue search terms so high? Well, it's actually no mystery... Vue.js 2.0 had just been released. As the rumors started swirling and the Javascript community got word, tweets started rising, blog posts started increasing all in anticipation for the big event. On September 30, 2016 Vue.js 2.0 was officially released and the reaction was overwhelmingly positive. Release statement: https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8 A popular Hacker News post on Dec 5. on why PixelJets.com choose Vue.js over react seemed to help push Vue.js even further along the trend line. https://news.ycombinator.com/item?id=13151317 Will Vue maintain it's popularity in the JS framework world where the crown seems to always be i...