It took me some convincing to see the point of using an MV* JS framework, and I haven’t looked back since.

Vue.js is a front-end Javascript library with inspiration from Angular.js. The power of Vue.js is in it’s reactive data model. This means changes to a data property update in real-time in both the UI and application state - hiding and showing page elements, enabling and disabling functionality, and updating form elements that are bound to the data property.

There are a ton of great JavaScript frameworks out there, and it can be a little overwhelming to keep up with them all. The learning curve for these frameworks can also be a bit steep. Vue.js is a breath of fresh air in this regard. In this tutorial, we'll see how easy it is to get up and running with a Vue.js app and how we can easily add authentication to it. Check out the repo to get the code.



We are lucky to have plenty of JavaScript frameworks to choose from these days but, at the same time, it can be quite fatiguing to keep up with all of them. Some have a steep learning curve and require a lot of time for developers and their teams to become comfortable with. Others might be easy to learn, but perhaps lack some features that are crucial to a project. In either case, the level of complexity associated with learning a new framework can often hinder adoption and leave developers and teams frustrated.

In this episode, Adam talks to Evan You, the creator of Vue.js. Evan talks about his time at Google Creative Lab and the sort of work that inspired him to create Vue. He also explains in depth how data binding works in Vue, and how it's different and more performant than Angular. Additionally, Evan discusses the benefits of Vue over React, why Vue works so well in both SPAs and traditional server-side web applications, and strategies for testing Vue components.

This episode is brought to you by Laracasts.

Vue.js shares similar concepts to other popular JavaScript frameworks like Rivet.js, Ractive.js, Angular.js, and Knockout.js. These types of frameworks offter a structural outline for interactive web applications. Raw HTML acts as the templating language, while these frameworks extend the syntax to provide data binding and User Interface data modeling.



Vue.js strives to make working with these types of frameworks as simple and functional as possible. Let’s go through a Vue.js tutorial to learn about how it works, and what it can offer us.

SERIES LESSONS

The new vue-devtools only works with Vue.js 1.0.0+.

The devtool will only work with non-minified versions of Vue, because the devtools hooks are stripped in production builds.



This also includes builds produced by Webpack and Browserify in production mode. Devtools cannot access pages via file:// protocol. You need to serve the page over HTTP in order to use it.

New

• Added support for pre-defined getters/setters on data objects. This feature is off by default and must be turned on by setting Vue.config.convertAllProperties = true, since it comes with a small performance cost.
• v-on key modifiers now also support all single letters.
• props options now supports using prop objects in array syntax again.

Fixed

• Observer should no longer throw errors when trying to observe objects created via Object.create(null).
• Fixed an edge case in IE where text interpolations are not processed due to IE randomly splitting the text nodes into multiple adjacent ones.
• fix incorrect warning for two-way binding on v-for alias
• fix incorrect warning for v-ref on non-component elements
• fix afterEnter hook firing before transition finishes
• fix $event variable for v-on inline statement handlers with filters
• avoid v-for re-rendering when using v-model on primitive values

Vue.js makes everything easy. Creating seemingly complex applications becomes super simple and is something that can be done in much less time than previously. We will demonstrate this by creating a Github file explorer that will allow us to explore files in public Github repos.



The repo for this post has a good starting point tagged. We need to pull the code down and check out this tag. Then we need to download all the dependencies using npm. Run the following commands in your terminal of choice.