Beginner's Guide to JavaScript Frameworks Part 3: Vue

Learn the core concepts, advantages, and drawbacks of all three major JavaScript frameworks: Angular, React, and Vue in this in-depth beginner's guide.

Canaan Merchant
Technical Writer and Software Engineer

This is the third and final part of the Beginner's Guide to JavaScript Frameworks series. Feel free to review parts one and two, where we discuss React and Angular.

Vue

Finally, we have Vue. Vue is explicit that it is a framework only focused on the view layer. Its extensive reliance on templating and use of more traditional HTML/CSS/JavaScript techniques make it a good introduction for anyone still learning the basics of web development. 

That also gives Vue one of its biggest advantages over React or Angular. Vue can easily be inserted into an existing project using a simple <script> tag. Vue acts more like a library (like jQuery) that way instead of a framework which makes Vue easier to integrate into existing projects or migrate them entirely.

Overall, developers who have used Vue are very happy with it and as a result, its popularity is growing rapidly.

Vue: Templates

Vue’s biggest difference from the other two frameworks is its reliance on templating. Angular and React deliver content in programmatic ways while Vue uses the power of the Template to do the same job. You can use the templating syntax with or as a replacement for your HTML files. That lets you update your content from wherever and display it on the browser without having to change anything on the front-end. The following example shows how the template can read information from the ‘{{name}}’ property and displays the name “John Smith” in the browser. 

<div id="counter">
Counter: {{ counter }}
</div>

const Counter = {
data() {
return {
counter: 0
}
}
}

Vue.createApp(Counter).mount('#counter');

You can also use Vue’s directives (using “v-”) to introduce logic into HTML tags similar to Angular’s “ng-” based directives. So with “v-for” you can loop through items in an array to display them in a list on your webpage. “v-if” can be used for conditional statements inside your HTML. 

Vue: Virtual DOM

Vue uses the Virtual DOM like React to improve performance. Combined with Vue’s templating that means changes to an app’s state are detected and displayed rapidly. That combines one advantage of React but without the complicated information architecture that can accompany a React App. 

Vue: Composition API

The Vue 3 Composition API is a new approach that aims to improve code flexibility and reusability. At its core, there’s no wizardry - these are just pure JavaScript functions that expose various properties:

function useCounter() {
const count = ref(0)
  
function increment () { count.value++ }

  return {
    count,
    increment
  }
}

export default {
  setup () {
    const { count, increment } = useCounter()

    return {
      count,
      increment
    }
  }
}

As shown above, it’s simple to pull in the useCounter function with minimal fuss. 

Vue Strengths

Vue is a great choice for developers who want something more React-like but with the traditional HTML/CSS file structure. But Vue is far less complex than Angular making it easy to get started right away, especially if you want to stay away from the strict typing required in TypeScript. 

Vue fits the incremental adoption use case well: it can easily be inserted into an existing project using a simple <script> tag. Vue acts more like a library that way instead of a framework which makes Vue easier to integrate into existing projects or migrate them entirely.

Vue Drawbacks

Vue currently has the smallest developer community out of the three major web frameworks. That may make it difficult to find the support you need, whether hiring developers who already have experience or turning to the community to debug a complicated coding issue. It also means fewer plugins and libraries to help speed up development of common workflows. 

Another drawback is if you are already working with a complex project then Vue will not help you organize your codebase like React or Angular could. 

Ionic Vue

Ionic Framework is an open source UI toolkit for building performant, high-quality mobile and desktop apps using web technologies — HTML, CSS, and JavaScript. Web developers looking to get more from their Vue skills should take a look at Ionic Vue, the native Vue version of Ionic Framework. Not only can Vue developers build great apps for web and desktop, but mobile (iOS, Android) as well. 

The best part of Ionic Vue? It’s just Vue: standard Vue development patterns tightly integrated with standard Vue libraries, coupled with the huge ecosystem surrounding the web platform. Ionic Framework uses the built-in Vue router and CLI just as regular Vue apps do, so you’ll immediately feel comfortable building Ionic Vue apps using the same libraries and tools you know and love. You can seamlessly use TypeScript or JavaScript with Ionic Vue which adds to the flexibility of the framework and its overall simplicity.

Ionic Framework also provides over 100+ prebuilt components that let you quickly build mobile-optimized UIs without having to reinvent the wheel. Getting started is easy:

npm install @ionic/cli
ionic start myApp --type=vue
cd myApp
ionic serve

From there, follow this tutorial to learn the fundamentals of Ionic app development by creating a real app step by step.

Bottom Line 

Strengths: 

  • Easy to learn and integrate with existing web projects
  • Templating makes it easy to display data with regular HTML
  • Very small file size helps performance

Drawbacks:

  • Smaller (but growing!) community
  • If you’re already dealing with complexity issues, then Vue may not help solve them

Vue is good for Developers who: 

  • Want to keep things as simple as possible. 
  • Only want to work on the UI and leave the underlying architecture alone

What JavaScript Framework Should I Learn?

So, now that you’ve learned all about Angular, React, and Vue: which one is the best? Which one must you adopt to stay on top of the web development world in 2021 and beyond? 

The truth is, all three frameworks are great choices. Each one comes with its strengths and weaknesses and whether or not a framework is right for your project depends on you and/or your team’s background. 

All three were built with the goal to enhance a developer’s skills and make their lives easier rather than totally replace everything anyone knows about programming. All of them follow modern web development techniques too, so you can feel confident that if you start to learn one you can pick things up with another down the line. 

Ultimately, we recommend building an app prototype using each web framework, and see which one works best for you and your team. The fastest way to compare each framework is to use Ionic’s app wizard tool. Select a color theme, choose an icon, then select either Angular, React, or Vue. Your new progressive web app is generated immediately, providing you with a great foundation to build upon.

React, Angular, and Vue. All three JavaScript frameworks will take your web development journey to the next level. Happy coding everyone!

About Ionic

Ionic is the leading cross-platform developer solution with 5 million developers worldwide. It powers 15% of apps in the app store, not including thousands of apps built internally at enterprises for every line-of-business need. Ionic is unique in that it takes a web-first approach, leveraging HTML, CSS, and Javascript to build high-quality iOS, Android, desktop, and Progressive Web Apps.

Ionic is a leader in enterprise app development. Thousands of enterprise customers use Ionic to build mission-critical apps for their customers, both external and internal.

You’re in good company. Ionic powers millions of apps at some of the smartest companies in the world.

See all Customers
Arrow Forward
Community Forum
Arrow Forward

Stop by and say hello. The Forum is the best place to connect, ask a question, or help out other Ionic developers!

Explore the docs
Arrow Forward

Take a look and get coding! Our documentation covers all you need to know to get an app up and running in minutes.