Official Vue Projects You Probably Don’t Know About

Follow us on LinkedIn for our latest data and tips!

, , ,

Official Vue Projects You Probably Don’t Know About

One of the things that Vue has done to set it apart from its competitors, like React, is to create officially supported projects to fill the gaps in its ecosystem. For example, React-Router and Redux were not created by and are not supported directly by Facebook, the creator of React. Instead, they were created by the community and are maintained by the community.

This is not a bad thing, but this means that it could end up no longer being maintained if the maintainer decides to give it up, or it may take a while to make it compatible with new releases of React if there are significant changes. Thankfully, the React Community organization is working to mitigate those issues, but Vue does things differently. Vue-Router and Vuex—the equivalents to React-Router and Redux for Vue—are maintained by the Vue team. The Vue team also works on things like Vue Devtools, vue-loader, and other projects that help integrate Vue development into your normal workflow, rather than leaving that responsibility to the community. Of course, the community is perfectly free to contribute since Vue is open source, so it’s a win-win.

If you’ve spent a non-trivial amount of time looking into Vue, you were probably already aware of the projects I mentioned before, and you may or may not have been aware that they were supported by the official Vue team. In this article, I hope to make you aware of some of the more obscure projects that the Vue team has developed to expand the ecosystem and offer its users officially supported tools that they can trust will be around and up-to-date. Several of these aren’t finished yet, so you’ll have to keep an eye on them and wait it out a bit before they can be truly taken advantage of in production applications. Assuming they ever reach a full release, Vue will eventually be in a better place because of them.

So here’s the list:

#1: Vuex Router Sync

Vuex Router Sync is a tiny library that creates some state in a Vuex store that synchronizes with the Vue Router so route information and changes can be accessed globally from every component in the same way that the rest of the global state is accessed: via a Vuex store. Also when the route information changes, the Vuex store’s reactivity makes it much simpler for components to react to those changes.

Though it isn’t useful for many apps, this is useful for showing the active page in navigation bars and can help in larger applications. It’s also useful if your components need to check the query or parameters for requests.

#2: Vue Component Compiler

Vue Component Compiler isn’t ready yet. In fact, there doesn’t even seem to be any actual code written for it yet. That’s because they’re still discussing how they want it to work and how to design the API, and you can find that discussion in the single open issue the project has on Github.

But what is it? It’s a project for compiling single file components (SFCs) down to JavaScript modules. Of course, they already have something like this, right? Why do we need another SFC compiler? The answer can be found in that issue:

So far, we have seen the logic of compiling an SFC duplicated in multiple projects:

  • vue-loader
  • vueify
  • rollup-plugin-vue
  • jest-vue

…and others. The goal here is to extract shared logic regarding SFC compilation into a dedicated package to avoid redundancy and ensure all of these tools are on the same page regarding SFC features and behavior.

This project personally excited me because the compiler for Jest has always been sub-optimal because it strips out the style section rather than compiling it, and it seems to be a goal for this project to be able to handle compiling styles. Not only will Jest be better supported, but adding features to Vue template syntax or any other part of SFC will be simpler to implement because it will only need to be done in a single project.

#3: Vue Class Component

Many people like the way Angular creates their components using decorators and standard ES2015 class syntax. If you’re one of those people, then you’ll want to take a look at this project because it allows you to write Vue components in a very similar way! Take a look at the example below, and if you like it, you’ll want to take a look at the Vue Class Component project.

    <input v-model="msg">
    <p>prop: {{propMessage}}</p>
    <p>msg: {{msg}}</p>
    <p>helloMsg: {{helloMsg}}</p>
    <p>computed msg: {{computedMsg}}</p>
    <button @click="greet">Greet</button>

import Vue from 'vue'
import Component from 'vue-class-component'

  props: {
    propMessage: String
export default class App extends Vue {
  // initial data
  msg = 123

  // use prop values for initial data
  helloMsg = 'Hello, ' + this.propMessage

  // lifecycle hook
  mounted () {

  // computed
  get computedMsg () {
    return 'computed ' + this.msg

  // method
  greet () {
    alert('greeting: ' + this.msg)

#4: Vue Test Utils

Recently we published an article about unit testing Vue components. At the end of the article is a list of a couple tools to help aid your testing of Vue components and one of those, which is currently in beta, is Vue Test Utils. If you’re unit testing your components, and you probably ought to be, then this project could come in quite handy for you.

Vue Test Utils offers shallow rendering, simplified DOM traversal with selectors, simplified event triggering, transition stubbing, and more. Feel free to start using it to help them finish up their beta testing, and then you’ll have a full-featured testing utility belt for your Vue applications.


This is a very exciting time for Vue developers. Vue has really started to prove itself as a contender in the JavaScript framework space and is now beginning to mature into a full ecosystem. Of course, contributors are welcome to help out with any of these projects, so if you can’t wait for some of the pre-release projects to finish up, feel free to help push it along and help out the rest of the community while you’re at it.