You should be using Vue Class Component

Intro

For those who, like me, arrived at Vue from Angular, probably miss some aspects and prefer others. I particularly prefer Vuex toNgRx when it comes to state management, but something that I never liked about Vue is the creation of components, where those with greater complexity become increasingly difficult to understand. At this point, Angular uses what we can call class-style syntax, where its components are classes with attributes, methods, etc. While in Vue, we use a JS object to create an instance of Vue according to its specifications.

This is the main advantage of using the Vue Class Component library, you transform your components into classes, which allows you to better organize your code, and more. With it you can create custom Decorators, extend other components and/or mixins and use additional Hooks when using Vue Router.

Here, we will cover only the basics, the idea is in the future to create an article on Vue-Property-Decorator that complements the usage of this library.

Installation

To create a project using Vue Class Component from scratch, you just need to follow Vue CLI steps, make sure to manually select your project features, add TypeScript then opt to use class-style component syntax.

Considering an existing project just install the library:

$ npm install --save vue vue-class-component

ou

$ yarn add --save vue vue-class-component

You must ensure that the Vue core is also installed, since Vue Class Component depends on it.

If you are using TypeScript, change your tsconfig.json adding experimentalDecorators: true. If you're using Babel, do the following:

$ npm install --save-dev @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties

Then configure .babelrc:

{
  "plugins": [
    ["@babel/proposal-decorators", { "legacy": true }],
    ["@babel/proposal-class-properties", { "loose": true }]
  ]
}

Then you are good to go.

Example

So, below you can see a regular Vue component:

export default {  

  components: { },
  props: { },  

  data () {  
    return {  
      message: 'Hello World!'  
    }  
  },
  computed: {  
    reversedMessage () {  
      return this.message.split('').reverse().join('')  
    }  
  },
  methods: {  
    changeMessage (val) {  
      this.message = val  
    }  
  },

  created () { },  
  mounted () { },  

}

As mentioned before, our component is a JS object that will turn into a Vue instance, so we must follow some rules.

1. data must be a function that returns an object if you want to reuse this component in other places (and you probably will).

2. computed has properties with functions, but sometimes properties with an object containing one or two other functions (getters/setters).

3. methods is a object with functions

4. The object also contains components that will be included, properties provided by a parent component and methods that are hooks automatically triggered on our component's life cycle.

What about Vue Class Component?

@Component({  
  components: { },  
  props: { },  
})  
export default class extends Vue {  
  message = 'Hello World!'

  get reverseMessage () {  
    return this.message.split('').reverse().join('')  
  }

  changeMessage (val) {  
    this.message = val
  }

  created () { }
  mounted () { }
}

1. Vue Class Component provides a decorator where we can define the components and the properties of our component, which makes sense, since they are one-time configurations.
2. data values are expressed as properties of the class
3. You can use get/set accessors to create computed values
4. Everything else is defined by member functions of the class (life cycle hooks, methods)

Important

It is not necessary to refactor your entire app to use this library. You can do it gradually or only with new components. Compatibility between components stays the same, you can include Class Components in standard components and vice versa.

Conclusion

Even though it is a very simple example, it is possible to observe a much more elegant code using Class Components, for those who like Angular or for the back-enders on duty, it is a much more familiar way of working with Vue.

If you are interested, you can check the original documentation for more.