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

Bulma is a modern flexbox CSS framework built on SASS. Bulma has several key features such as clean look, good documentation, it's simple to use, utilizes flexbox, and it's components can be pulled in modularly via SASS. However, the big standout is that Bulma is JavaScript agnostic, meaning it doesn't require a pairing with any specific library, and this goes great with a JS framework like Vue. Bulma is by no means the only JavaScript agnostic framework. Here are a few others: Material Design Light (  https://github.com/google/material-design-lite  ) - Built from Google's Material Design (  https://material.io/  ) PureCSS (  https://purecss.io/  ) - Built by Yahoo Spectre.css (  https://picturepan2.github.io/spectre/  ) However, I prefer Bulma. It's has great docs, the best style ( in my opinion ), it's semantic, it's simple, uses modular SASS, and is growing the fastest in popularity in regards to similar JavaScript agnostic CSS f...

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

V-if vs. V-Show What is the difference between v-if and v-show and when should you use which? Well, quite simply, v-if determines whether or not to render the element AT ALL, while v-show simply hides it from view setting "display" to "none." When you use v-if, the rendering of that element is destroyed, which means the listeners and components nested within are also destroyed. This saves memory and improves your apps performance. They can always be recreated later, too. V-if is also considered lazy. That means it only loads at the moment the conditional in the if block is finally determined to be true. However, sometimes you don't want to destroy your components or elements and want to keep the listeners and child components active. In that case, you'd probably want to stick with "v-show." Unlike "v-if," "v-show" elements are rendered at the same time as everything else. So when should you use v-if or...

Dynamic Styling with Vue.js Creating dynamic styles in Vue.js is super easy. By retrieving data from the Vue object you can set inline styles or even toggle a class depending on multiple states defined in your data. Class Binding First let's take a look at a basic class binding example. Let's say we have a button that we want to show only if 'showButton' is true. Like in our v-if post, we could simply add an inline attribute of v-if="showButton". But this time, let's toggle only the visibility via a class called "hide." <button v-bind:class="{ hide: !showButton }"></button> Here is our javascript: var vm = new Vue({     data: { showButton: true } }) Since 'showButton' is set to true, the hide class will appear as a class on the DOM element and would render like this. <button>Click Me</button> If you were to change your code to the following: var vm = new Vue({     data:...

Vue.js "v-if" and Templated Conditionals If you've ever used Angular 1.0, you're familiar with ng-if. It is an inline attribute placed on a DOM element that conditionally renders that element depending on the boolean outcome of the expression or variable to be evaluated within the double quotes after the "if." Basically, if something is true, show an item on your page. If it is not - remove it from the DOM. Let's see an example. <button v-if="showButton'>Click Me</button> <script> new Vue({ data : { showButton: true } }) </script> The following would render a button like so. Click Me However, change the true to false, and the button disappears. <button v-if="showButton'>Click Me</button> <script> new Vue({ data : { showButton: false } }) </script> You would see something in inspect ...

Which is better Vue.js or Angular 1.0 (Part 1)? Let's take a basic look at Vue.js vs. Angular: Components and Directives One of the biggest complaints from users of Angular 1.0 was the muddy nature of service providers and when to use which for what. Services, Factories, Providers, Directives, Components - there never seemed to be a clear, concise answer on how they should be used. With Vue, you have components and directives. With Vue there are components and directives, and the dilineation is very clear. WINNER:  Vue.js Community Support While Angular used to be the hottest framework around, it slowly started fizzling out as talks of Angular 2.0 came around, and React entered the scene. Many of the popular libraries are no longer updated and Vue seems to be taking its place. WINNER:  Vue.js Speed and Performance In benchmark tests, Vue outperforms Angular 1.0. With all the dirty checking and constant watchers, your Angular application will...

Which is better Vue.js or Angular 1.0 (Part 1)? Let's take a basic look at Vue.js vs. Angular: Simplicity Vue.js is much simpler than Angular 1.0. In order to learn Angular, you need to learn the Angular infrastructure and all the complexities that come along with it. Vue.js is pretty intuitive for javascript programmers and can easily be supplemented by the docs. WINNER: Vue.js Data-Binding Angular 1.0 forces two way binding between scopes while Vue.js depends on a one-way flow between components, instead. WINNER: Vue.js Structure Angular forces you to use their pre-ordained structure. With Vue you have much more flexibility and wiggle room. We like Vue.js here. WINNER: Vue.js Continue to Part 2