Exclusive tips every week

Join 8135 other Vue devs and get exclusive tips and insights delivered straight to your inbox, every week.

    Picture of Michael Thiessen

    πŸ‘‹Hey friend! I work hard to send you amazing stuff each week.

    β€”Β Michael

    You have great content in your emails. I seriously learn something from every one of them.
    Titus Decali
    Thanks for another beautiful tip πŸ™
    Victor Martins Onuoha
    Loving these, and the spaced repetition.
    Mark Goldstein
    THANK YOU! I did not know about the deep property, so I assumed you simply couldn't watch objects.
    Darryl Noakes

    Here are some tips I've shared

    Use quotes to watch nested values

    You may not have known this, but you can easily watch nested values directly, just by using quotes:

    watch: {
        '$route.query.id'() {
          // ...
        }
      }

    This is really useful for working with deeply nested objects!

    When should you use v-if?

    Instead of using v-if, it's sometimes more performant to use v-show instead:

    <ComplicatedChart v-show="chartEnabled" />

    When v-if is toggled on and off it will create and destroy the element completely. Instead, v-show will create the element and leave it there, hiding it by setting it's style to display: none.

    Doing this can be much more efficient if the component you're toggling is expensive to render.

    On the flip side, if you don't need that expensive component immediately, use v-if so that it will skip rendering it and load the page just a bit faster.

    Component metadata

    Not every bit of info you add to a component is state. Sometimes you need to add some metadata that gives other components more information.

    For example, let's say you're building a bunch of different widgets for an analytics dashboard like Google Analytics:

    If you want the layout to know how many columns each widget should take up, you can add that directly on the component as metadata:

    export default {
        name: 'LiveUsersWidget',
        // πŸ‘‡ Just add it as an extra property
        columns: 3,
        props: {
          // ...
        },
        data() {
          return {
            //...
          };
        },
      };

    You'll find this metadata as a property on the component:

    import LiveUsersWidget from './LiveUsersWidget.vue';
      const { columns } = LiveUsersWidget;

    You can also access the metadata from within the component through the special $options property:

    export default {
        name: 'LiveUsersWidget',
        columns: 3,
        created() {
          // πŸ‘‡ `$options` contains all the metadata for a component
          console.log(`Using ${this.$options.metadata} columns`);
        },
      };

    Just keep in mind that this metadata is the same for each instance of the component, and is not reactive.

    Other uses for this include (but are not limited to):

    • Keeping version numbers for individual components
    • Custom flags for build tools to treat components differently
    • Adding custom features to components beyond computed props, data, watchers, etc.
    • and many more I can't think of!

    See a live example here: https://codesandbox.io/s/vue-metadata-bew9j?file=/src/App.vue

    πŸŽ‰ 35% discount coming soon!
    Check it out!