Simplify Vue Components with vue-class-component

InstructorJohn Lindquist

Share this video with your friends

Send Tweet

While traditional Vue components require a data function which returns an object and a method object with your handlers, vue-class-component flattens component development by allowing you to add your data properties and handlers directly as properties of your class.

Insart
~ 7 years ago

What the reason to use it? This is not trivial approach and it's difficult to explain to new people.

Erkan Buelbuel
~ 7 years ago

is the following an error?

new Vue({
  el: "#root",   // <---- in Video is #app here (code) #root
  render: h => <App />
})

I think that is a poi-configuration? How can I extract poi-configration at all?

Erkan Buelbuel
~ 7 years ago

Dear John in each lesson you use an another UI-Library, Tailwind, Tachyons, Semantic-UI,.. Meanwhile, I cannot memorize all the abbreviations, how do you do that? Dou you have a certain formula? Thank you for this great Video-tutorial, I never thought, I can see them all without falling asleep.

George Katsanos
~ 7 years ago

I also will agree that this method of writing components looks (and is) unnecessary complex and has no real practical benefits.

Jack
~ 6 years ago

meh, so pointless.

Sergei
~ 6 years ago

Hi John, I'm wondering how to use Vuex and mapGetters and mapActions with vue-class-component. Could you please point me in a right direction?

Wlad
~ 6 years ago

Evan You (9/30/18 https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf):

3.0 will support class-based components natively...

Fabrzio Anichini
~ 5 years ago

Cool, How we should structure the hook that come with the component lifecycle ( for example mounted, created...) in a class-based component?