Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Define Props on a Vue Class with vue-property-decorator

    John LindquistJohn Lindquist

    vue-property-decorator allows you to define your properties directly on your class with a simple @Prop() decorator. This approach allows your classes to stay clean and flat compared to the traditional approach of defining a props object with each prop defined on it.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    Instructor: If you want this message to be a prop, then you define your props up in this options object. We'll say message has a default of "hello from default prop." Delete this line here, hit save, and you'll see "hello from default prop."

    If we were to pass in a prop -- I'll say message, "hello from index" -- hit save here, and you'll see "hello from index." Since we're embracing decorators, we can simplify this as well, where I'll undo all of my changes, and install vue-property-decorator.

    Then I can import from vue-property-decorator the prop decorator. The prop decorator can just be placed on a class property. We'll say prop. This takes that same prop config object. We'll say default, "hello from prop decorator."

    Delete this on this side, hit save here, and you'll see, "hello from index," because we still have it set in our index file. Delete that, and you'll see, "hello from prop decorator," which we defined right here.

    Now, just to be a bit more terse, vue-property-decorator includes vue-class-component, and re-exports component. You can just import that from vue-property-decorator as well, and get the exact same result.

    vue-property-decorator also provides emit, inject, model view, and watch decorators, but I find the 90 percent scenario is just using component and prop.