Exclusive tips every week

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