1. Vue.js for beginners @juliobitencourt 2. JavaScript everywhere. 3. Which path to choose? 4. Julio Bitencourt Web Developer since 2000...
The year of 2015 has been a pretty crazy ride for Vue.js. The project has grown way beyond my expectations, so I’d like to take a look back and put things in perspective. General NPM downloads: 382,184 ytd, ~52k/month current GitHub Stars: 11,357 current Unfortunately Bower and CDNs do not offer download statistics - there should be at least equal if not more...
Recently there has been a lot of discussion around the tooling hurdle when you start a React project. Luckily for Vue.js, all you need to do to start with a quick prototype is including it from a CDN via a <script> tag, so we’ve got that part covered. However, that’s not how you’d build a real world application. In real world applications we inevitably need a certain...
“When you have different goals – it’s impossible to say ‘we have the best practices for doing everything’. Because the web is just so versatile.” Vue.js is a lightweight front-end JavaScript framework that makes it simple to begin prototyping and building web interfaces. Vue.js provides a flexible API for MVVM data bindings, and can serve as an alternative to other front-end frameworks like...
Vue MDL is a set of reusable Material Design Lite(mdl) components. Its purpose is to make it easy for everyone to use mdl by doing all the data binding and giving you the control over classes with props Vue MDL is only available through npm. Install it: npm install --save vue-mdl If you use a module bundler likewebpack orBrowserify, you can require it var vmdl =...
In the previous post, we reorganized our code into components. This allows us to reuse code only pieces of our code. However, our index.html and app.js files had a bunch of extra code in them that would require us to sort through the next time we wanted to use the code in another project. There has to be a better way to organize this code, right? Well...
In the previous post, we created a simple Point of Sale system. However, the code only uses one Vue instance and no compnents. There is no sense of encapsulation in the code. The main Vue instance is responsible for doing everything. We should move some of these pieces into their own components so that each one can be responsible for itself and use...
So let’s get started. First, pull down the code from the repo for this series. Then we will check out the beginning code. Lastly, let’s bring in all the dependencies. I have gone ahead and provided apackage.json file that has some of the things we need. I recommend running a local server while going through these tutorials. There are a few options. You can run...
If you don’t know what Vue.js is by now, then you have to check it out! In case you haven’t heard of it, here is how Vue.js describes itself on its website: Vue.js is a library for building modern web interfaces. It provides data-reactive components with a simple and flexible API. That isn’t very specific. Vue.js is a view library that updates the...
Comparison
Why doesn’t MDG just adopt Vue.js and forget about React vs Blaze?
Wednesday, December 16, 2015 With all of the discussion surrounding what is going to happen to Blaze and how soon React will be the default UI layer of meteor, why is everyone ignoring vue.js176? Reasons why vue.js should be considered Vue is maintained by a core meteor developer.Evan You created and maintains vue.js, and is a core meteor developer. This gives him insight into what meteor needs, as...
Mithril isn't only incredibly efficient – it's also got an incredibly small API and is incredibly quick to learn as a result. I find it far more intuitive: its simple API allows you to get simple things done much quicker, but crucially when you have a complicated scenario I find it easier to reason about the problems with Mithril than the other larger...
Comparison
Choose between ReactJS and VueJS for frontend project using Laravel?
Monday, December 14, 2015
There is a common misconception about Vue: that it's only for simple stuff. No. The underlying development model of data-driven views and interface composed of component trees is almost identical between React and Vue. The main difference is how the API is exposed and how React leans toward a more everything-in-JS approach while Vue embraces HTML/CSS/JS as what they are. When you go...
Writing Vue.js applications after working with AngularJS will feel familiar. Vue won't pack as many goodies out of the box, but it will still give Angular a run for its money. First and foremost, what is Vue.js and why should you use it? Vue is a library for developing interactive web interfaces. Its API is inspired by Angular & Backbone, but you can read...
1. Frontend Vue.js 0.12.15 vue-router vue-resource vueify envify to accomodate builds in different environments Laravel Elixir for Gulp magic Bootstrap 3.3.5 styling Sass custom styles (mostly Laravel Spark styles) The repo on Github 2. Backend Laravel 5.1 SQlite or any other DB backend you prefer. SQLite is the default to make testing this out easier Dingo API component for Laravel JWT Authentication middleware...
Do you use Laravel PHP and Vue JS? Do you wish there was a better way to structure your applications you build? This tutorial is just for you! In it, we set up simple two-way communication between the different components of your front-end app. Would you like to get the results of this tutorial without reading through it? Check out Laravue, the brand new boilerplate...
Yesterday, I set up my test environment and started writing tests for a simple table component I’m building with Vue.js. At first, I wrote it to rely on a provided template, so it wouldn’t be too restricting. The more I worked on it, however, the more I realized how much it could benefit from automation. I replaced all the hard-coded HTML with looping template...
Vue.js, a JavaScript library for building interactive Web interfaces, has reached a 1.0.0 release status. Focused on the view layer, open source Vue.js leverages reactive data binding and composable view components. It can be integrated with other libraries and existing projects. A core developer on the Meteor JavaScript framework and the key mover of Vue.js, Evan You has big ambitions for it, as...
Vue.js 1.0 was released at the end of October and packs some awesome new features. While most of the library looks and feels the same as it always has, there are a few changes that are worth noting. In this article, we’ll explore some of the changes and how you can use them to be more productive and expressive when creating apps with...
Ok so for me right now I’m digging into the excellent Vue.js and looking to use it in a number of projects. But one thing got me out of the box was how can I use Vue globally with creating multiple instances for the different pages of the site. Ok so you might be thinking WTF is he on about. So let me explain a...
Since switching from providing Desktop and LAN support as well as Business Technology Solutions to SMBs/SMEs to fullstack Javascript web development I’ve encountered many concepts and paradigms crucial to good web development practice. A central paradigm for developing scalable and maintainable JS web apps is the adoption of some form of architectural pattern for the development of the UI. The most prevalent family...
The quality of the UI places a major role in the quality of the UX. In any app built with the MV* pattern, the View is responsible for the UI parts of the app. For many of us, a common way of implementing the View involves manually manipulating the DOM when data needs to be rendered. While this is all well and good,...
A simple file upload component for Vue.js. Emits events for XHR Upload Progress for nice progress bars. I came up with the original idea when looking at this repo. I knew I wanted a nice component with upload progress and so I copied some code from that library. In order to use the demo, you need to have PHP setup and this project...
Vue.Js has been gaining a lot of attention since a couple of months. Vue.Js is a data-binding javascript framework that is specifically built for SPAs ie, Single Page Application. The beauty of creating a SPA application is to provide a desktop like an experience in which the page remains the same throughout the application, no refresh, only the views being changed along with...
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...
authentication
Build an App with Vue.js: From Authentication to Calling an API
Wednesday, November 25, 2015
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...
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...
Resuable UI components, built with Vue. Each component contains one or more properties, with v-bind support. Buttons Block Button Menu Button Progress Button Avatar Circle Avatar Squared Avatar Toggle Toggle for iOS Toggle for Android Range Slider Pure Range Range with Labels Range for iOS Range for Android Radio Radio as Group READ MORE ...
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...
Mark my words: Vue.js will sky-rocket in popularity in 2016. It's that good. Want to get ahead of the pack? Let me show you the building blocks of Vue. SERIES LESSONS Hello Databinding Vue Show Event Handling A Peek into Components Computed Properties Subscription Plans Exercise WATCH VIDEO SERIES ...
debugging
vue-devtools | Chrome devtools extension for debugging Vue.js applications.
Tuesday, November 17, 2015
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. READ MORE GET IT...
