This article is featured in the new DZone Guide to Web Development. Get your free copy for more insightful articles, industry statistics, and more!
If you’re like me, you’ve likely been bombarded over the past few years by Angular and React content. Every other blog entry, conference session, or keynote seemed to be focused on either of the two. With that context in mind, I can still remember the first time I saw a “Vue.js” talk listed on a conference schedule. While I certainly do not pretend to know everything, at least when it comes to buzzwords and the such, I was pretty sure I had heard of most of the popular front-end frameworks out there and this was one I had decidedly not heard of.
If you ask two Vue.js developers “what’s the best way to use AJAX in an app?" you’ll get three different opinions.
Vue doesn’t provide an official way of implementing AJAX, and there are a number of different design patterns that may be used effectively. Each comes with its own pros and cons and should be judged based on the requirements. You may even use several simultaneously!
Pusher makes building real-time applications super easy, and we can easily plug it into a Vue.js app to give our users a great experience.
Imagine if there was a build tool that you could use for Vue.js projects that compiled faster than Webpack, gave you a smaller bundle size, and required only a few lines of configuration.
Brunch is that tool. In this article, I’ll show you how incredibly easy it is to set up a Vue.js + Brunch project, cover some of the pros and cons of Brunch, and serve up a few tasty brunch puns on the way.
Vue.js released its latest version, Vue 2.5, just a few days back. It comes with many new features including improved TypeScript and Error handling, improved tooling support, environment-agnostic server-side rendering, and much more that gives you many business benefits. This release contains awesome improvements to help Vue.js developers and to keep things better.
Major Improvements Along With Its Business Benefits:
Better Error Handling
In its previous versions, we’d typically use config.errorHandler and the renderError component option for handling errors in the applications. But we were lacking methods for handling generic errors inside a specific part of the application. So, a new errorCaptured hook has been introduced in this version. A component with this hook captures all errors from its child component tree.
One of the difficult things about getting started with Vuex is that it is not so much a library as it is a design pattern. It follows that implementing Vuex is not so much about using an API, as it is about structuring your code to comply with the pattern. If you’re new to Vuex, this will be daunting.
In this article, I’ll demonstrate how to get started migrating Vuex into an existing Vue.js project. I’ll show you how to identify the parts of your app’s state that belong in Vuex, and those that don’t, how to refactor your component functions into mutations, actions and so on, and finally we’ll discuss the benefits accrued.
If you want your Vue.js single-page app to communicate with a Laravel backend, you will, quite reasonably, think of using AJAX. Indeed, Laravel comes with the Axios library loaded in by default.
However, it’s not advisable to use AJAX to retrieve application state on the initial page load, as it requires an extra round-trip to the server that will delay your Vue app from rendering.
You’ve made an awesome component with Vue.js that you think other developers could use in their projects. How can you share it with them?
In this article, I’ll show you how to prepare your component so that it can be packaged and published on NPM. I’ll use an example project and demonstrate the following:
I’ll happily admit that like many of you, I’m a lazy developer. I tend to look for solutions someone else has already built before I try to build them myself. In the “old days” of the early 2000s, I used to spend a lot more time coding solutions myself. But today many solutions to coding problems are just a keyword search away. In that spirit, I approached this tutorial using keywords – looking for existing solutions first, then fitting my favorite solution on top of it. I think you’ll like the results!
When I started writing this article, I wanted to show you how to add authentication to a Vue.js app. I started learning Vue.js back in April while authoring my Front End Development for Back End Developers presentation. I bought a pro subscription to Egghead.io and watched Build Vue.js Apps with the Vue-CLI and Nuxt.js by @johnlindquist.