Vue is a very attractive framework for building interfaces that has rapidly become an alternative to other popular tools like React & Angular. It’s lean, it’s fast and it’s actually fun to use while making code easier to read and reason with. It’s beginner friendly while also providing every foundation needed to build out the most complex of apps and websites. It’s great for individual coders but also allows works well in large teams of collaborators.
Why Vue Works Great in WordPress Projects
In a WordPress setting Vue.js is a suitable solution for small pieces of functionality as well as entire themes because it is a small payload. Vue uses html templates that are easy to understand. Unlike some other frameworks, you don’t need tooling to get started. You can include Vue on your page and start creating components without ever touching webpack, node.js or configuring a transpiler without any noticeable dip in performance. Those tools are only required if you want to take the development approach up a notch.
Vue compares favourably to other ways of building interfaces. If you’re just using plain javascript or leveraging jQuery, Vue will help you write less onerous code that is more efficient. More sophisticated tools such as React and Angular have arguably a higher barrier to entry by comparison. Working with css and creating transitions also is easier in Vue. Vue allows you to work with ‘single file components’ where you can easily organize and reason with the different parts that make up a component; javascript logic, html templating and css are kept separate, yet come together in the same file. If you already have mastered any one of these languages, working with Vue may feel much more comfortable to you than working with similar components written for other frameworks.
Another benefit of Vue is that any additional tools you might choose to compliment Vue with are pretty easy to chose. For additional state management help you can add on Vuex, for routing there is vue-router and vue-resource provides a bunch of goodies when making web requests. You don’t have to endlessly research and compare the merits of different competing 3rd party projects like is the case in the React ecosystem (a disadvantage of React’s more sprawling ecosystem).
Learning Vue and Complimentary Tools
The home of the Vue project is noted for its excellence and is the best place to learn the ins and outs of Vue, go visit it here:
Guide to Vue.js
Vuex is a complimentary library that is useful for non-trivial projects that use Vue that you might like. It also comes with excellent documentation from the project’s creator:
What is Vuex
Video tutorials:
Vue.js 2 – Getting Started is a free video series on Youtube by @Maxedapps. If you like the instructor, he also has a paid course on Udemy that is excellent value.
Vue.js 2.0 in 60 minutes by Traversy Media.
Learn Vue2: Step by Step is a free(?) video series on laracasts.
Books:
Learning Vue.js 2 by Olga Filipova
Vue.js 2 Cookbook by Andrea Passaglia
Vue.js 2 Basics: Learn the basics of vue.js and earn your blackbelt by Tony Lea
WordPress Guides & Tutorials
Tutorials by Paulund that cover Vue usage in WordPress.
Josh Pollock wrote one of the first Vue tutorials for WordPress over at TorqueMag, describing how to work with Vue & the REST API.
Here’s is another write up by Josh Pollock on using Vue inside of the admin while taking advantage of ES6
Here you can learn how to create a Vue plugin from Ramsay Lanier, in it he demonstrates a content parsing solution for WordPress use cases.
WordPress Projects Using Vue
Riad has set up a limited experiment for Gutenberg the WordPress editor project which uses Vue instead of React.
Bill Stavroulakis has worked on an offline-first SPA using Vue.js, the WordPress REST API and Progressive Web Apps.
Wyvern provides WordPress theme boiler plate for a Vue project.
RtCamp have created Vue Theme, a starter theme which uses Vue as the basis.
WordVue is starter theme that helps you set up a workflow for a Vue powered WordPress theme