{"id":18313,"date":"2018-04-12T11:30:00","date_gmt":"2018-04-12T11:30:00","guid":{"rendered":"https:\/\/www.heartinternet.uk\/blog\/?p=18313"},"modified":"2018-04-12T11:30:00","modified_gmt":"2018-04-12T11:30:00","slug":"5-reasons-developers-are-switching-to-vue-js-from-other-frameworks","status":"publish","type":"post","link":"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/","title":{"rendered":"5 reasons developers are switching to Vue.js"},"content":{"rendered":"

The Vue.js<\/a> framework is quickly gaining in popularity, and although it won\u2019t have the market share of other frameworks for a while, more and more companies are considering it for projects. So let\u2019s dive into how it compares with other frameworks and some of the reasons why it might be your next framework. I\u2019ve built a similar application using jQuery<\/a>, React<\/a> and Vue.js.<\/a> You can see a sample of the working app built with Vue.js here<\/a>.<\/p>\n

\"Screenshot<\/p>\n

Installation<\/h2>\n

In a way, getting started with Vue.js is similar to getting started with a framework like jQuery and the original AngularJS (Angular 1). Although you can install the framework in a couple of ways, just like with jQuery, you can simply load up a script tag from either a CDN or a single script tag to get started.<\/p>\n

<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\"><\/script><\/code><\/p>\n

That\u2019s all you need for most simple applications. Compare that with Angular\u2019s quickstart<\/a>, or even React\u2019s installation process<\/a> where you must depend on a complex terminal Command Line Interface (CLI) to get even simpler applications working. Simplicity matters when you either want to get simple things working without a lot of overhead or are just starting to learn the features of a framework or library.<\/p>\n

What do you get with that script tag? You get a lot of powerful features like a built-in data-binding and templating engine. If you look at the simplest Vue.js example, this becomes obvious:<\/p>\n

<div id=\"app\">
\n     <p>{{ message }}<\/p>
\n<\/div>
\n<script>
\n     new Vue({
\n          el: '#app',
\n          data: {
\n               message: 'Easy templating'
\n          }
\n     });
\n<\/script><\/code><\/p>\n

The templating language is tightly coupled into Vue.js. Like many other templating engines, it uses double curly braces {{ }}<\/code> to bind data to your template. That means the information in our data variable we pass after our new Vue statement is immediately available inside our application. You declare a Vue application using regular JavaScript that passes along a configuration object, which is similar to what you do when you configure an element in jQuery. This configuration object includes things like the element el<\/code> that you want the application to target in the DOM as well as some JSON data that you want to pass as a variable.<\/p>\n

From jQuery\u2019s perspective, you can see that Vue.js is an entirely different animal. Templating or data-binding is something that you have to add to jQuery as additional plug-ins. Let\u2019s look at a more complicated example and the next reason why people are switching to Vue.js.<\/p>\n

State vs DOM Management<\/h2>\n

Another reason why Vue.js is becoming popular is something introduced in other frameworks like React and that is a focus on state<\/strong>, which is the status of the data in your application. In a library like jQuery or regular JavaScript, you have to target some element in the DOM and then do something based on an event related to that element.<\/p>\n

\"Screenshot<\/p>\n

So, let\u2019s say you wanted to toggle the visibility of an element. In jQuery, you could do something like this:<\/p>\n

$('.apt-addheading').on('click',function() {
\n     $('.card-body').toggle(300);
\n});<\/code><\/p>\n

This says, look for an element with a class of apt-addheading<\/code>, and when the user clicks on it, then look for another element with a class of card-body<\/code>. If that element is visible, hide it and if that element is hidden, then show it. Vue.js\u2019 approach to this is wildly different:<\/p>\n

<div class=\"panel-heading apt-addheading\"
\n@click=\"hidepanel=!hidepanel\">
\n     <span class=\"glyphicon glyphicon-plus\"><\/span> Add Appointment
\n<\/div>
\n<!-- panel-heading -->
\n<div class=\"card-body\" :class=\"{ hide: hidepanel }\">
\n...<\/code><\/p>\n

First, you\u2019ll notice that while we do things in jQuery inside JavaScript and outside our HTML code, in Vue, the JavaScript as well as the HTML live together in one place. The template in Vue.js has HTML code with references to scripts. It\u2019s why the Vue.js version seems longer. In this version, we are tracking the click with the @click<\/code> event handler. This handler uses a variable called hidepanel<\/code>. The value of that variable is toggled every time we click on the panel-heading<\/code> element. In our Vue.js version, the element with the class of card-body<\/code> gets a parameter called :class<\/code> that will assign the value of a class called hide<\/code> if the value of hidepanel<\/code> is true.<\/p>\n

If you\u2019ve never seen this type of coding before, it will probably freak you out, because it requires a shift in thinking. In Vue.js and other modern frameworks, the application\u2019s state is what drives what is happening in your interface. We don\u2019t worry so much about manipulating elements in the DOM because our application \u2018reacts\u2019 to the value of data instead. From now on when the value of the hidepanel<\/code> variable changes, the visibility of that panel changes as well.<\/p>\n

So then it become easier to modify your interface because all you have to do is modify the data. Let\u2019s say, for example, that you wanted to hide the panel when a user submits a new appointment. With jQuery, you\u2019d have to remember to issue a .hide()<\/code> method on the DOM element. With Vue.js, you simply set the hidepanel<\/code> variable to true<\/code>. The difference is that with Vue you\u2019re never really worried about what the DOM is doing, you\u2019re always just changing values in your application.<\/p>\n

This reminds me of the third reason why people switch to building applications with Vue.js and that\u2019s the Virtual DOM.<\/p>\n

Virtual DOM<\/h2>\n

The virtual DOM isn\u2019t something that\u2019s unique to Vue.js. It\u2019s one of the reasons that the React framework is so popular. The virtual DOM means that the framework takes care of making changes to the DOM for you. The DOM is a representation of what the page looks like. Frameworks like React and Vue.js create an intermediate DOM, called the virtual DOM.<\/p>\n

This virtual DOM gets updated only when it needs to be.<\/p>\n

Say, for example, that you create an application that shows the first 10 records worth of data and then you fill out a form that causes a record to be added at the end of that list (an 11th record). Instead of redrawing the website, the framework writes the changes to the virtual DOM as if it were the regular DOM. Then Vue.js compares the virtual DOM to the regular DOM. Since you\u2019re only displaying the first 10 records, it notices that no changes need to be made to the real DOM.<\/p>\n

\"Animated<\/p>\n

If you take a look at this application, you can see that Vue.js injects your DOM with lots of data attributes and updates it on the fly as your data changes. The data drives the interface when you do a search or when you delete an element. Here\u2019s some code for a component in Vue.js that displays this list.<\/p>\n

<template>
\n     <ul class=\"appointment-list\">
\n          <appointment-item
\n          v-for=\"(item, i) in appointments\"
\n          :appointment=\"item\"
\n          :key=\"i\" \/>
\n     <\/ul>
\n<\/template>
\n<script>
\n     import AppointmentListItem from '.\/AppointmentListItem.vue';
\n     export default {
\n          name: 'AppointmentList',
\n          props: ['appointments'],
\n          components: {
\n               'appointment-item': AppointmentListItem
\n          }, \/\/components
\n     } \/\/export
\n<\/script><\/code><\/p>\n

This code is pretty simple and it doesn\u2019t show the template for the individual list items, which is being imported in line 11. You can find that code here<\/a>. \u00a0But you can see that this component receives some data from the main component in a variable called appointments<\/code> and then lists the items in that list.<\/p>\n

The important thing is that this component has a single, very focused job\u2026 to display the list. It doesn\u2019t care about what happens when someone adds or deletes a record. The virtual DOM works with Vue.js to react to changes in our appointments list. When it notices a change, it looks at this component and writes any changes from one of those operations into the virtual DOM. Vue.js then compares that with the actual DOM and updates it only if it needs to. The virtual DOM is Vue.js\u2019 killer app. It just works and makes working with the DOM faster and more efficient.<\/p>\n

Components<\/h2>\n

All modern frameworks like Angular, React and Vue are based on a component architecture. That means that we no longer write huge applications, but break them up into mini components that we put together in order to create larger apps. This is especially powerful when combined with the rest of the reactive virtual DOM we\u2019ve been looking at.<\/p>\n

\"Screenshot<\/p>\n

You can break an application up into pieces and each piece can focus on performing a specialised task. So, you could break an application into a component that displays a list of records, another component that allows you to search through those records and another one that allows you to add a record. Here\u2019s the actual code in our main component.<\/p>\n

<template>
\n     <div id=\"main-app\">
\n          <add-appointment
\n          @addRecord=\"addAppointment\" \/>
\n          <search-appointments
\n          :myKey = \"filterKey\"
\n          :myDir = \"filterDir\"
\n          @searchRecords='searchAppointments'
\n          @keyChange = \"changeKey\"
\n          @dirChange = \"changeDir\" \/>
\n          <appointment-list
\n          :appointments = 'filteredApts'
\n          @remove = 'removeItem' \/>
\n     <\/div>
\n<\/template><\/code><\/p>\n

This code is beautiful in its simplicity, but it also reveals that our components only need to worry about few things. Data is passed to a component via props<\/code> or properties that look like HTML attributes, so our appointment list gets passed :filteredApts<\/code>. These are appointments that have been pre-sorted by search or sort. It also receives information should a @remove<\/code> event take place (more on that later).<\/p>\n

The beautiful thing about Vue.js is that our components don\u2019t need to be worried about what the other components need to do. Our list component is only concerned with listing data, our search and our add components only worry about their individual functionality.<\/p>\n

Let\u2019s say that our add-appointment<\/code> component adds a record to our data. Our appointment-list<\/code> component will simply notice that a change has been made to the app\u2019s data and redraw our list based on the new data. With something like jQuery, you have to do two things, modify the data and update the DOM based on that modification. With Vue.js, you only worry about modifying the data. Each component works independently from each other to do its small tasks. It makes applications easier to manage and update.<\/p>\n

If you need to, you handle communication between the components through internal events by emitting custom events when things happen. The events pass information between components and can make it easier to manage the application. That\u2019s another reason people really love these new framework structures.<\/p>\n

Event Architecture<\/h2>\n

Events in Vue.js can help you make your application easier to manage because they can be passed along through the components up to your main application. Let\u2019s take a look at how we would go about deleting a record in our application.<\/p>\n

<button @click=\"requestRemoval\">
\n     ...
\n     methods: {
\n          requestRemoval: function() {
\n               this.$parent.$emit('remove', this.appointment);
\n          }, \/\/requestremoval<\/code><\/p>\n

This simplified example from our AppointmentListItem component<\/a> shows you that you can capture events inside individual components, but because our events are designed to modify data, it\u2019s better to send these events up our component chain to the main component. So we have a local method called requestRemoval()<\/code> that passes information about the appointment to be deleted to our main App.vue component<\/a>. This component runs a separate event, called removeItem<\/code>, that deletes the data. Here\u2019s that entire function.<\/p>\n

removeItem: function(apt) {
\n     this.theAppointments = _.without(this.theAppointments, apt)
\n}, \/\/removeItem<\/code><\/p>\n

I\u2019m using the awesome lodash library<\/a> to remove an element from our data, but you\u2019ll notice that at no time do I worry about the DOM in this sample. I simply have events navigate through the components to modify data. The rest of the app is similar, my search or sort modifies the fiteredApts<\/code> variable. When that changes, the list will automatically be re-drawn.<\/p>\n

Conclusion<\/h2>\n

Clearly Vue.js presents a new way of thinking about applications. It\u2019s vastly different from the approach you\u2019d use if you were building something with jQuery or JavaScript. Angular gives you some of these features, but has a significantly higher barrier to entry and a much more complex installation process. React is closer in features, but it uses a special language called JSX. While JSX is very similar to the way you work with Vue.js components, Vue.js has a language that is closer to and feels more like JavaScript.<\/p>\n

If you really want to see the differences, take a look at the projects I built with jQuery<\/a>, React<\/a> and Vue.js.<\/a> You can also watch my courses Vue.js: Building an Interface<\/a> and Building a Web Interface with React.js<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Find out why Vue.js is gaining in popularity as a JavaScript framwork and why it might be right for your next project in this introductory guide by Ray Villalobos, a full-stack design and development instructor.<\/p>\n","protected":false},"author":2,"featured_media":18371,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,24],"tags":[],"class_list":{"0":"post-18313","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-guest-posts","8":"category-web-design"},"yoast_head":"\n5 reasons developers are switching to Vue.js - Heart Internet<\/title>\n<meta name=\"description\" content=\"Find out why Vue.js is gaining in popularity as a JavaScript framwork and why it might be right for your next project in this introductory guide by Ray Villalobos, a full-stack design and development instructor.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"5 reasons developers are switching to Vue.js - Heart Internet\" \/>\n<meta property=\"og:description\" content=\"Find out why Vue.js is gaining in popularity as a JavaScript framwork and why it might be right for your next project in this introductory guide by Ray Villalobos, a full-stack design and development instructor.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/\" \/>\n<meta property=\"og:site_name\" content=\"Heart Internet\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/heartinternet\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-04-12T11:30:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/glasses-on-laptop2.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"433\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Eliot Chambers-Ostler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:site\" content=\"@heartinternet\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eliot Chambers-Ostler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/\"},\"author\":{\"name\":\"Eliot Chambers-Ostler\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\"},\"headline\":\"5 reasons developers are switching to Vue.js\",\"datePublished\":\"2018-04-12T11:30:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/\"},\"wordCount\":1937,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/glasses-on-laptop2.jpg\",\"articleSection\":[\"Guest Posts\",\"Web Design\"],\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/\",\"name\":\"5 reasons developers are switching to Vue.js - Heart Internet\",\"isPartOf\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/glasses-on-laptop2.jpg\",\"datePublished\":\"2018-04-12T11:30:00+00:00\",\"description\":\"Find out why Vue.js is gaining in popularity as a JavaScript framwork and why it might be right for your next project in this introductory guide by Ray Villalobos, a full-stack design and development instructor.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/#primaryimage\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/glasses-on-laptop2.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/glasses-on-laptop2.jpg\",\"width\":1024,\"height\":433},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.heartinternet.uk\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"5 reasons developers are switching to Vue.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/heartblog.victory.digital\/#website\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"name\":\"Heart Internet\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/heartblog.victory.digital\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/heartblog.victory.digital\/#organization\",\"name\":\"Heart Internet\",\"url\":\"https:\/\/heartblog.victory.digital\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp\",\"width\":992,\"height\":252,\"caption\":\"Heart Internet\"},\"image\":{\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/heartinternet\/\",\"https:\/\/x.com\/heartinternet\",\"https:\/\/www.linkedin.com\/company\/heart-internet-ltd\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28\",\"name\":\"Eliot Chambers-Ostler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"contentUrl\":\"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg\",\"caption\":\"Eliot Chambers-Ostler\"},\"url\":\"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"5 reasons developers are switching to Vue.js - Heart Internet","description":"Find out why Vue.js is gaining in popularity as a JavaScript framwork and why it might be right for your next project in this introductory guide by Ray Villalobos, a full-stack design and development instructor.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/","og_locale":"en_GB","og_type":"article","og_title":"5 reasons developers are switching to Vue.js - Heart Internet","og_description":"Find out why Vue.js is gaining in popularity as a JavaScript framwork and why it might be right for your next project in this introductory guide by Ray Villalobos, a full-stack design and development instructor.","og_url":"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/","og_site_name":"Heart Internet","article_publisher":"https:\/\/www.facebook.com\/heartinternet\/","article_published_time":"2018-04-12T11:30:00+00:00","og_image":[{"width":1024,"height":433,"url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/glasses-on-laptop2.jpg","type":"image\/jpeg"}],"author":"Eliot Chambers-Ostler","twitter_card":"summary_large_image","twitter_creator":"@heartinternet","twitter_site":"@heartinternet","twitter_misc":{"Written by":"Eliot Chambers-Ostler","Estimated reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/#article","isPartOf":{"@id":"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/"},"author":{"name":"Eliot Chambers-Ostler","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28"},"headline":"5 reasons developers are switching to Vue.js","datePublished":"2018-04-12T11:30:00+00:00","mainEntityOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/"},"wordCount":1937,"commentCount":2,"publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/glasses-on-laptop2.jpg","articleSection":["Guest Posts","Web Design"],"inLanguage":"en-GB","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/","url":"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/","name":"5 reasons developers are switching to Vue.js - Heart Internet","isPartOf":{"@id":"https:\/\/heartblog.victory.digital\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/#primaryimage"},"image":{"@id":"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/#primaryimage"},"thumbnailUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/glasses-on-laptop2.jpg","datePublished":"2018-04-12T11:30:00+00:00","description":"Find out why Vue.js is gaining in popularity as a JavaScript framwork and why it might be right for your next project in this introductory guide by Ray Villalobos, a full-stack design and development instructor.","breadcrumb":{"@id":"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/#primaryimage","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/glasses-on-laptop2.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2018\/04\/glasses-on-laptop2.jpg","width":1024,"height":433},{"@type":"BreadcrumbList","@id":"https:\/\/www.heartinternet.uk\/blog\/5-reasons-developers-are-switching-to-vue-js-from-other-frameworks\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.heartinternet.uk\/blog\/"},{"@type":"ListItem","position":2,"name":"5 reasons developers are switching to Vue.js"}]},{"@type":"WebSite","@id":"https:\/\/heartblog.victory.digital\/#website","url":"https:\/\/heartblog.victory.digital\/","name":"Heart Internet","description":"","publisher":{"@id":"https:\/\/heartblog.victory.digital\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/heartblog.victory.digital\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Organization","@id":"https:\/\/heartblog.victory.digital\/#organization","name":"Heart Internet","url":"https:\/\/heartblog.victory.digital\/","logo":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/02\/HeartInternet_Logo_Colour.webp","width":992,"height":252,"caption":"Heart Internet"},"image":{"@id":"https:\/\/heartblog.victory.digital\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/heartinternet\/","https:\/\/x.com\/heartinternet","https:\/\/www.linkedin.com\/company\/heart-internet-ltd"]},{"@type":"Person","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/58ed7f27cc0f3ab6e69135742a5eee28","name":"Eliot Chambers-Ostler","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/heartblog.victory.digital\/#\/schema\/person\/image\/","url":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","contentUrl":"https:\/\/www.heartinternet.uk\/blog\/wp-content\/uploads\/2025\/08\/cropped-Eliot-96x96.jpg","caption":"Eliot Chambers-Ostler"},"url":"https:\/\/www.heartinternet.uk\/blog\/author\/eliot-chambers-ostler\/"}]}},"_links":{"self":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/18313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/comments?post=18313"}],"version-history":[{"count":0,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/posts\/18313\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media\/18371"}],"wp:attachment":[{"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/media?parent=18313"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/categories?post=18313"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.heartinternet.uk\/blog\/wp-json\/wp\/v2\/tags?post=18313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}