Why Vue.js Can Be a Good Fit for WordPress

WordPress 4.9 beta 2 is out and the future update is expected to be released on November 14th, 2017. The Gutenberg project, on the other hand, is taking a somewhat different path to the core in that Matt Mullenweg has already confirmed that Gutenberg will ship with WordPress 5.0, but the release will come out when Gutenberg is ready. This approach is part of Mullenweg’s new strategy for core development that makes releases more project-based instead of time-based.

In case you missed it, there was quite an interesting post from Matt Mullenweg on the state of React and WordPress. The short story is that WordPress is looking at alternative Javascript frameworks/libraries to use within WordPress core due to the contentious Facebook patents. The discussion regarding the selection of a new framework is heating up again and seems that Vue is once again among the leading contenders.

On React and WordPress

Back in November 2015, Automattic – the driving force behind WordPress – announced their WordPress shell running on Facebook’s React view library. It was then that Automattic used React and Node.js as the basis for the ground-up rewrite of WordPress.com they called Calypso, one of the largest React-based open source projects.

Earlier this year, WordPress core contributors started the discussion on selecting a new JavaScript framework for use with new core features. After much thought and conversations, WordPress core team narrowed their considerations for a new JavaScript framework to React and Vue.js.

More recently, the WordPress community started to use React for Gutenberg, the largest core project they’ve taken on in many years. While this change in itself is not interesting to the average user, it does impact how WordPress is built. Unlike WordPress.com which has gone Calypso and JavaScript primarily, Gutenberg still has PHP managing code. However, if you carefully look through the Gutenberg plugin files you see that JavaScript and React.js are key integrals in the code. So Gutenberg provides a view of the scaffolding for moving Calypso JavaScript features into WordPress.org’s PHP core.

A few weeks ago, however, Facebook announced they have decided to dig in on their patent clause addition to the React license, even after Apache has said it’s no longer allowed for Apache.org projects. That led to the decision of exploring other options without licensing issues. What is more, the Gutenberg team is going to take a step back and rewrite the new editor called Gutenberg, whose prototype was built on React, using a different library. It will likely delay Gutenberg at least a few weeks and may push the release into next year.

To Vue or not to Vue

The question now is, which library is the team going to choose? Some of the libraries being considered are Preact and Vue.js, with the latter seemingly having a wider fan-base.

Vue.js, however, seems to be the more popular choice for WordPress developers. It is becoming hugely popular in the JS dev community because everyone loves working with its API. It seems to provide a simpler approach to new learners and thus it’s gaining a fair amount of popularity as of late.

What is Vue.js

Vue.js (pronounced /vjuː/, of view) is a new-comer and it was initially designed with an aim to merge the best bits of Angular and React. It is a JavaScript library for building interactive UIs using the MVVM (Model-View-ViewModel) architectural pattern.

It is licensed under the MIT license. Unlike the others monumental frameworks, it is designed from the ground up to be incrementally adoptable in different use cases ranging from embedded widgets, plugin development to full single-page applications. It consists of an approachable core library that focuses on the view layer only, and an ecosystem of supporting libraries that helps you tackle complexity in large Single-Page Applications.

Why use Vue?

When comparing it with its competitors, including Angular, React, etc., Vue boasts of beating some of them in certain aspects. These aspects include simple API, size, performance, learning curve, etc. Once you start working with it you’ll quickly realize that Vue.js is not only much simpler and easier to learn, but also more flexible. VueJS has a huge set of followers and it’s easier for beginners to adopt. You can use it with or without jQuery. You won’t need to install any plugins, though many are available. And it has proven track-record of success with Laravel.

The goal of Vue.js is to provide the benefits of reactive data binding and composable view components with an API that is as simple as possible.

Some of the basic features of Vue.js are:

  1. Component-oriented development style
  2. Lean and extensive core
  3. Flexible transition effect System

How to use Vue.js?

There are various ways to include a Vue.js in your web-based projects:

  1. Though you can get the latest release of Vue.js from GitHub, you might find it easier to load it from a CDN by including a <script> tags in our HTML type file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js">
 </script>
  1. The second way is to install that by using a Node Package Manager (NPM). NPM is the recommended installation method when building large-scale applications with Vue.js.
  2. The third method is to Install using the Bower.
  3. Fourthly you can use a Vue-cli to setup your project. Vue provides official CLI for quickly scaffolding ambitious Single Page Applications.

Fancy giving Vue.js a try? There is absolutely no need to install anything to try it out with FastComet services. Here is the binary file for Vue.js on the server:

/usr/local/bin/vue

FastComet and Vue.js

Vue.js is used by many companies and people across the globe and it is fully supported by FastComet hosting services. If you’re going to build modern interfaces with Vue.js, you would definitely need a modern Vue.js Hosting provider. Your sites, Vue.js install, interfaces, and applications all come hosted on our blazing fast platform. You’ll get an extra speed boost when you choose to host on our SpeedUp RocketBooster featuring up to 300 X faster page loads compared to competing Vue.js Hosting providers.

Elena

Elena oversees all Marketing, Product Management and Community efforts for FastComet and is in charge of telling the brand's story. Always pitching, she’ll share the FastComet vision with anyone who’ll listen. Elena helps our customers make the most of their web sites' and focuses on our inbound marketing efforts; everything from developing new online growth strategies, content creation, technical SEO, and outreach within the FastComet community. Her background includes Sales and Customer Relationship development, as well as Online Marketing.