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 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.
READ MORE
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
- Google Creative Lab
- Parsons Design and Technology Program
- Vue.js: A (Re)introduction
- webpack
- Nightwatch.js
- jsdom
- Karma
- Sponsored by Laracasts
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
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
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.
READ MOREVue.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.
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.
WATCH VIDEO SERIES
SERIES LESSONS
Hello Databinding
Vue Show
Event Handling
A Peek into Components
Computed Properties
Subscription Plans Exercise
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 ON CHROME STOREThe 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
Angular.js, React.js and Vue.js are popular front end technologies often pitted against each other. They are not technical equivalents, but a comparison among them is still valid.
Vue is the new-comer and aims to merge the best bits of Angular and React: It aims to be performant and a complete, easy to use package. It's been gaining some momentum as Pagekit and other projects have picked it up. The greatest benefit of Vue is it's lack of pedigree. It is new and has little baggage. It has been able to learn from the mistakes and successes of Angular and React. Vue adoption in the long term remains a question mark as the world of JavaScript remains very volatile.
READ MORE
Vue is the new-comer and aims to merge the best bits of Angular and React: It aims to be performant and a complete, easy to use package. It's been gaining some momentum as Pagekit and other projects have picked it up. The greatest benefit of Vue is it's lack of pedigree. It is new and has little baggage. It has been able to learn from the mistakes and successes of Angular and React. Vue adoption in the long term remains a question mark as the world of JavaScript remains very volatile.
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.
READ MORE
DEMOThe 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.
If you have been following the Laravel community, you should have heard of Vuejs by now. Vuejs is a powerful javascript framework that can be used in conjunction with other javascript frameworks. Vuejs is not a full replacement but opens up a new world of possibilities.
Vuejs is just a single javascript file. When you are developing with Vuejs you will want to use the unminified version as it will give you better error messages when you are trying to debug a problem.
READ MORE
DEMO
Vuejs is just a single javascript file. When you are developing with Vuejs you will want to use the unminified version as it will give you better error messages when you are trying to debug a problem.
This is not an offical Vue.js version and it has no straight relation to it and its author. The module is developed for specific needs of its authors and has some restrictions compared to Vue.js.
VueServer.js is designed for static HTML rendering. It has no real reactivity. Also, the module is not running original Vue.js on server. It has its own implementation. It means VueServer.js is just trying to perfectly reproduce the same result as Vue.js does. Because of the reasons listed above some of Vue.js functionality is not available.
READ MORE
VueServer.js is designed for static HTML rendering. It has no real reactivity. Also, the module is not running original Vue.js on server. It has its own implementation. It means VueServer.js is just trying to perfectly reproduce the same result as Vue.js does. Because of the reasons listed above some of Vue.js functionality is not available.