How to Tell If Vue.js Is the Right Framework for Your Next Project

Vue.js grew from a one-man project to a JavaScript framework everyone’s talking about. You’ve heard about it from your front-end colleagues and during conferences. You’ve probably read multiple comparisons between Vue, React, and Angular. And you’ve probably also noticed that Vue outranks React in terms of GitHub stars.
All that’s made you wonder whether Vue.js is the right framework for your next project? Well, let’s explore the possibilities and limitations of Vue to give you a high-level look at the framework and make your decision a little easier.
Please note that this piece will draw strongly on Monterail’s experience with Vue and other JavaScript frameworks. As a software development company, we’ve delivered around thirty Vue-based projects, and we strongly evangelize it among developers and businesses with initiatives like State of Vue.js and Vue Newsletter.
Let’s dive in.
Vue.js Overview
Back in 2014, the first public version of Vue.js was released. Its template syntax — similar to AngularJS — and a component-based architecture — similar to what React offered — made it approachable to JS devs at the time. Vue.js really took off only a year later, when it was discovered by the Laravel (popular PHP framework) community.
A few years later, it now records the highest satisfaction rating among all JS frameworks (91.2%), according to State of JS data. More and more devs report having heard of it and the wish to use it in the future. Companies like IBM, GitLab, and Adobe have already adopted Vue for their products.
According to Evan You, the creator of Vue:

The original goal was to “scratch my own itch,” to create a frontend library that I would enjoy using myself.

And apparently he and the whole Community managed to accomplish this mission. But what is so special about Vue that makes programmers want to use it?
This is what the project’s official website says:

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.

There it is! Progressive and easy to pick up and integrate. But is that enough to make it your primary choice?
The Business Perspective on Vue
At Monterail, we believe that it should not make a substantial difference to a JavaScript programmer which framework or library is chosen for an app’s front end. Building blazing fast, beautiful, and maintainable products is not trivial at all, but if something is feasible, it’s feasible with any modern JS framework.
Yet, we love Vue.js and recommend it to our clients in most cases. That’s because Vue is great for a number of reasons. Let’s explore them.
When Your App Is Full of Animations and Interactive Elements
Vue offers a truly elegant and flexible API — not just for composable architecture for the front end, but also for seamless transitions between views. Transitions and animations enhance user experience, smoothing changes between states. Human brains love movement, so it’s an important part of modern websites and apps. Animating is key when we need to grab user attention, when we want to keep the user on our website for a longer stretch, or simply to make our product more fun.
The release of Vue 2.0 has introduced a lot more flexibility with regard to transitions. We now have more granular access to the transition hooks — which, in turn, makes it possible to leverage third-party libraries and deliver on complex animations while still using Vue at the core. That means there are tons of different ways of doing animations in Vue. All you need to do is apply a custom attribute and add some CSS magic. Vue provides us with and <transition-group> components already built in and based on CSS animations, allowing for both CSS and JS hooks. It also integrates easily with non-HTML elements — like SVG, for example.
In our portfolio, we have this really great example of a project with many different transitions, where we used Vue.js in tandem with Nuxt. We managed to deliver a beautiful UI for Easyship that was 37% more performant than their AngularJS version. Vue’s incredible possibilities in terms of transitions also make it a good choice for marketing campaign websites. Airbnb’s “Until we all belong” is another great example — an award-winning campaign delivered in six weeks, written completely with Vue.js.
The post How to Tell If Vue.js Is the Right Framework for Your Next Project appeared first on SitePoint.


Generating Awesome Slideshows Using JavaScript and Vue.js

I have recently been using several JS frameworks to produce slideshows and ultimately programmatic videos. Here is my feedback about two frameworks, Reveal.js and Eagle.js.
As I wrote before, at Faveeo, we are working hard to produce original content from curated articles. One idea the team had, is to produce videos from written articles, to maximize the reader engagement and produce fresh, easy to understand materials.


The State of Javascript 2018: The View on Vue

The 2018 State of JavaScript survey results have just been released and so, as we head into the end of the year, it’s a good time to take a look at Vue.js and see where things are heading.
The yearly State of JavaScript survey, conducted by Sacha Greif, Raphael Benitte, and Michael Rambeau collects input from over 20,000 web developers on trends over the past year. While that’s not the entire industry, is probably a pretty good sample and a great place to start for a look at the fortunes of Vue. So what does it say?


Recent Experience With Cordova

Hi all, I am Adi.
I wanted to share with you my recent experience with the Cordova on a client project. Recently I picked up a client project, it was relatively simple, no crunching large sets of data in the app, not many APIs, and it was pretty much text all throughout the app. These are what I like to call ‘Informative apps,’ they just present the user with information about an entity or a topic.


Building Mobile Apps With Angular or Vue.js and NativeScript {N}

More and more Java developers have been coming into contact with front-end development in recent years. For this group of developers, it is only a small step to switch to mobile app development with NativeScript. In this post, we try to clarify the possibilities of native and hybrid app development using NativeScript.
What Is NativeScript {N}?
{N} is an open source framework (under the Apache 2 license) to build native iOS and Android apps, using TypeScript and Angular. {N} is a different technology than the hybrid frameworks, such as Ionic and Phonegap. {N} is a runtime, not a web technology. Your app will not run as a mini website in a WebView and is therefore more efficient. With {N} you have direct access to all the Native APIs of your device.


Best JS Frameworks to Build Your Next Application

The first thing people notice about your application is its visual appeal. Most users tend to associate interface design with the credibility and professional competence of your company. That’s why choosing the right front-end technology plays a crucial role in your business growth.
Investing in user experience brings huge competitive advantages and great financial results. However, before counting up future income, you should decide which platform will be the foundation of your success. How long do technologies last?


Making Cross-Browser Compatible Vue.js Apps and the Challenges Involved

Since the day the world’s second browser was launched, cross-platform support seems to be one of the major issues faced by designers and developers worldwide. Web developers were already tackling issues such as faster development time, code reusability, accuracy, etc, and were building robust prepackaged frameworks to help in development. So it was no surprise that they added cross-browser compatibility as a major feature of these frameworks. Out of those frameworks, one of the most popular ones is Vue.js and this post is all about cross-browser compatibility in Vue.js apps.
So, what exactly does it mean for an app to be cross-browser compatible? Let’s understand it through an example.


Behold! NativeScript-Vue 2.0!

NativeScript-Vue, NativeScript’s implementation of its runtime with support for the Vue.js framework, has reached version 2.0 just seven months after we launched 1.0 on the stage of Vue.Amsterdam. The hard work of core contributor Igor Randjelovic and a trusty cohort of community members including Tiago Alves, Kamen Bundev, Manuel Saelices, Pascal Martineau, Vasil Trifonov, Rahul Kadyan, Ludovic Bois de Fer, and many more has culminated in a really solid release for you, which includes:
tl;dr; A new template, Sidekick integration, HMR, frame support, functional components, DevTools (wow!) and new docs.

Join me for a webinar where we will dive into this release and have some fun with creating apps and using DevTools! Register here.


The Writing and Rewriting of EloCute: A NativeScript-Vue Story

For some people, learning a new framework involves painstaking combing through books, Udemy videos, and step-by-step building of a todo app, walking through each change methodically. Me, I’m one of those weirdos who likes to learn by building an app that I intend to move to production ASAP. While I did get through Udemy courses and read a fair number of getting-started blogposts, as well as reading through the Vue.js docs, I decided early on that I was going to really jump into Vue.js by building an app that I always dreamed of building: an app for teachers and students of second languages, to help digitize the painful task of testing spoken skills such as clarity of speech and accent perfection in a second language.
As a former French language and literature teacher, and as a student of several second languages, I always found it extremely painful to sit in one of those antique language labs with klunky headphones and equipment from the 1980s (or earlier!) and speak into a microphone to practice spoken skills. Some programs, unable to access this expensive hardware, simply seem to neglect the practicing of spoken skills — Chinese language schools, for example, often utterly fail to meet the needs of a new language learner’s desire to gain spoken proficiency. The lack of immediate feedback and the isolated experience seem to cry out for a mobilized solution to the language lab.


Error Tracking With Vue.js

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces on the web. Vue can power sophisticated single-page applications and is often used in combination with modern tooling and supporting libraries. We’ll show you how to add error handling in a Vue application to capture caught and uncaught errors. This gives you an opportunity to recover and update what’s presented to the user, as well as track the error to prioritize fixes. We’ll also show how to monitor errors in production using Rollbar.
How to Handle Errors in Vanilla Vue
You can catch exceptions in vanilla JavaScript using basic try, catch and finally statements. You can use these statements to handle caught exceptions in Vue components. In this example, we are simply logging to the console.