DEV Community

loading...

You should be using Vue Class Component

kennyrafael profile image kennyrafael Updated on ・3 min read

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
Enter fullscreen mode Exit fullscreen mode

ou

$ yarn add --save vue vue-class-component
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then configure .babelrc:

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

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 () { },  

}
Enter fullscreen mode Exit fullscreen mode

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 () { }
}
Enter fullscreen mode Exit fullscreen mode
  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.

Discussion (3)

pic
Editor guide
Collapse
ksnyde profile image
Ken Snyder

VueJS 3.x does not support the class component approach and while I did use to love class components, I strongly suggest people just move to Vue 3's composition API. Much better in so many ways.

Collapse
kennyrafael profile image
kennyrafael Author

Vue Class Component V8 is beta now, should be available soon with support to Composition API features. Evan You itself put his hand on this project, I would not believe they will let it go that easily.

Collapse
ksnyde profile image
Ken Snyder

That's interesting. I had thought retiring this functionality would not go over well and eventually the "upgrade pressure" if nothing else would force this to happen. Personally, having now gotten used to the composition API, I will not be going back to the class syntax but I do have a 2.x project which makes heavy use of the Class Components and maybe I'll look at the upgrade path based on this being available.