25 Vue Tips You Must Know

1. Limit props to type lists

Using the validator option in prop definition, you can restrict prop to a specific set of values:

export default {
  name: 'Image',
  props: {
    src: {
      type: String,
    },
    style: {
      type: String,
      validator: s => ['square', 'rounded'].includes(s)
    }
  }
};

This validator function accepts a prop and returns true or false . It can also be used when you need more options than the boolean value allows. Button types or alert types (Information, Success, Danger, Warning) are some of the more common uses.

2. Default content and extension points

Slots in Vue can have default content, which allows you to make components that are easier to use:

<button class="button" @click="$emit('click')">
  <slot>
    <!-- Used if no slot is provided -->
    Click me
  </slot>
</button>

Basically you can take any part of a component, wrap it in a slot , and then you can overwrite that part of the component with whatever you want. By default, it will still work as usual, but you can also choose from a few more options:

<template>
  <button class="button" @click="$emit('click')">
    <!-- Initially add a slot tag that does nothing -->
    <!-- We can override this by providing content to the slot -->
    <slot>
      <div class="formatting">
        {{ text }}
      </div>
    </slot>
  </button>
</template>

Now you can use this component in many different ways.

Simple default method or your own custom method:

<!-- Use the component's default functionality -->
<ButtonWithExtensionPoint text="Formatted text" />

<!-- Use extension points to create custom behaviors -->
<ButtonWithExtensionPoint>
  <div class="different-formatting">
    Do something different here</div>
</ButtonWithExtensionPoint>

3. Use quotes to observe nested values

You might not know this: you can easily look directly at nested values ​​just by using quotes:

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

This is very useful for dealing with deeply nested objects.

4. Know when to use v-if (and when to avoid it)

Sometimes v-show會instead of v-if :

<ComplicatedChart v-show="chartEnabled" />

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

If the component you need to toggle is expensive to render, this may be more efficient. On the other hand, if you don’t need to use that component right away, use v-if so that it skips rendering it and loads the page faster.

5. Shorthand for single-scope slots (no template tags required!)

Scoped slot are more interesting, but to use them you also have to use a lot of template tags.

There is a shorthand that lets us get away with it, but only if we use a single scope slot .

Instead of writing:

<DataTable>
  <template #header="tableAttributes">
    <TableHeader v-bind="tableAttributes" />
  </template>
</DataTable>

We can write it like this:

<DataTable #header="tableAttributes">
  <TableHeader v-bind="tableAttributes" />
</DataTable>

This is simpler and more direct.

6. Conditionally render slots

Every Vue component has a special $slots object which contains all slot . Default slot have default keys, and named slots use their names as keys:

const $slots = {
  default: <default slot>,
  icon: <icon slot>,
  button: <button slot>,
};

But this $slots object only has slot that apply to the component, not every defined slot .

Take this component that defines several slots, including several named slots:

<!-- Slots.vue -->
<template>
  <div>
    <h2>Here are some slots</h2>
    <slot />
    <slot name="second" />
    <slot name="third" />
  </div>
</template>

If we only apply one slot to a component, only that slot will appear in our $slots object:

<template>
  <Slots>
    <template #second>
      This will be applied to the second slot
    </template>
  </Slots>
</template>

$slots = { second: <vnode> }

We can use this in our components to detect which slot have been applied to the component,

For example, by hiding slot 's wrapper element: \

<template>
  <div>
    <h2>A package slot</h2>
    <div v-if="$slots.default" class="styles">
      <slot />
    </div>
  </div>
</template>

Now the div wrapper with the styles applied will only render if we actually fill that slot with something.

If we don’t use v-if , we’ll end up with an empty and unnecessary div if we don’t have slot . Depending on the styles that the div has, this could mess up our layout and make things look weird.

6.1 Why do we want to be able to conditionally render slots?

There are three main reasons to use conditional slots:

• When using wrapper div to add default styles
• slot is empty
• When we combine default content with nested slot
  

For example, when we add the default styles, we add a div around slot :

<template>
  <div>
    <h2>This is a pretty great component, amirite?</h2>
    <div class="default-styling">
      <slot>
    </div>
    <button @click="$emit('click')">Click me!</button>
  </div>
</template>

However, if the parent component does not apply content to that slot, we will end up rendering an empty div on the page:

<div>
  <h2>This is a really cool component</h2>
  <div class="default-styling">
    <!-- There is no content in the slot, but this div will still be rendered-->
  </div>
  <button @click="$emit('click')">Click me!</button>
</div>

Adding it v-if on the wrapping div should do the trick. No content applied to the slot? Like this:\

<div>
  <h2>This is a really cool component</h2>
  <button @click="$emit('click')">Click me!</button>
</div>

7. How to observe slot changes

Sometimes we need to know when the contents of a slot have changed:

<!-- Unfortunately this event does not exist-->
<slot @change="update" />

Unfortunately Vue doesn't have a built-in way to detect this, but there's a very neat way to do it using mutation observers:

export default {
  mounted() {
    // Call `update` when things change
    const observer = new MutationObserver(this.update);

    //Observe the changes of this component observer.observe(this.$el, {
      childList: true,
      subtree: true
    });
  }
};

8. Mixing local and global styles

Often when using styles we want them to be scoped to a single component:

<style scoped>
  .component {
    background: green;
  }
</style>

If you need you can also add a non-scoped style block to add global styles:

<style>
  /*Global application*/
  .component p {
    margin-bottom: 16px;
  }
</style>

<style scoped>
  /*Scoped to this specific component*/
  .component {
    background: green;
  }
</style>

9. Overriding child component styles — the right way

Scoped CSS is easier to keep tidy and prevents styles from accidentally bleeding into other parts of your application. But sometimes you need to override the styles of a child component and break out of that scope.

Vue has a deep selector specifically for this:

<style scoped>
/* Override the CSS of a child component while keeping the style scoped */
.my-component >>> .child-component {
  font-size: 24px;
}
</style>

Note: If you are using a CSS preprocessor like SCSS, you may want to use /deep/ instead.

10. Create magic with context-aware components

Context-aware components are “magic” — they automatically adapt to what’s happening around them, handle edge cases, share state, and more. There are 3 main types of context-aware components, but I find configuration to be the most interesting of them all.

10.1 State Sharing

When you break a large component into multiple smaller components, they often still need to share state. You can do this "behind the scenes" instead of pushing this work onto the people using the component.

A Dropdown component can be decomposed into Select and Option components to provide greater flexibility. But to make it easier to use, the Select and Option components share selected state with each other:

<!-- Used as a single component for simplicity -->
<Dropdown v-model="selected" :options="[]" />

<!-- Split for more flexibility -->
<Select v-model="selected">
  <Option value="mustard">Mustard</Option>
  <Option value="ketchup">Ketchup</Option>
  <div class="relish-wrapper">
    <Option value="relish">Relish</Option>
  </div>
</Select>

10.2 Configuration

Sometimes you need to change the behavior of a component based on the situation in the rest of the application. This is usually done to automatically handle edge cases that would otherwise be troublesome. The Popup or Tooltip should reposition itself so that it does not overflow the page. However, if the component is inside a modal, it should reposition itself so as not to overflow modal . This could be done automatically if Tooltip knew when it was inside a modal.

10.3 Modeling

When you create context-aware CSS , you apply different styles based on what’s happening in a parent or sibling element.

.statistic {
  color: black;
  font-size: 24px;
  font-weight: bold;
}

/* Put some separation between stats next to each other */
.statistic + .statistic {
  margin-left: 10px;
}

Variables in CSS take us a step further by allowing us to set different values ​​in different parts of the page.

11. How to make variables created outside of Vue responsive?

If you get a variable from outside Vue , it would be nice to be able to make it responsive. This way you can use it in computed props, watchers, and anywhere else, and it works just like any other state in Vue .

When you are using the options API, you just put this in the data section of your component:

const externalVariable = getValue();

export default {
  data() {
    return {
      reactiveVariable: externalVariable,
    };
  }
};

When you use the composition API in Vue 3 , you can use ref or reactive like this:

import { ref } from 'vue';

// Can be done entirely outside of a Vue component const externalVariable = getValue();
const reactiveVariable = ref(externalVariable);

// Use .value to access console.log(reactiveVariable.value);

Use reactive instead:

import { reactive } from 'vue';

// Can be done entirely outside of a Vue component const externalVariable = getValue();
// Reactive only works on objects and arrays const anotherReactiveVariable = reactive(externalVariable);

// Direct access console.log(anotherReactiveVariable);

If you’re still using Vue 2 (like many of us are), you can achieve the exact same result using observable instead of reactive .

12. Destructuring in v-for

Did you know you can destructure in v-for ?

<li
  v-for="{ name, id } in users"
  :key="id"
>
  {{ name }}
</li>

As we all know, you can get the index from v-for using a tuple like this:

<li v-for="(value, key) in [
  'Hai Yong',
  'Frozen',
  'Web Beginner'
]">
  {{ index + 1 }} - {{ value }}
</li>

When using objects, you can also grab the keys:

<li v-for="(value, key) in {
  name: 'Hai Yong',
  released: 2021,
  director: 'A blogger',
}">
  {{ key }}: {{ value }}
</li>

You can also combine these two methods to get both the key and index of a property:

<li v-for="(value, key, index) in {
  name: 'Hai Yong',
  released: 2021,
  director: 'A blogger',
}">
  #{{ index + 1 }}. {{ key }}: {{ value }}
</li>

13. Looping over a range in Vue

The v-for directive allows us to iterate over an array, but it also lets us iterate over a range:

<template>
  <ul>
    <li v-for="n in 5">Item #{{ n }}</li>
  </ul>
</template>

Display effect:

Project #1
Project #2
Project #3
Project #4
Project #5

When we use v-for range, it will start at 1 and end at the number we specify.

14. Observe anything in a component

Any response from your component can be observed:

export default {
  computed: {
    someComputedProperty() {
      // Update calculation props},
  },
  watch:
    someComputedProperty() {
      // do something when the computed prop is updated }
  }
};

You can watch:

• Calculation props
• Props
• Nested Values
  

If you use the composition API, you can watch any value as long as it is a ref or reactive object.

15. Stealing Item Type

Copy prop types from child components just to use them in parent components. But stealing these prop types is much better than just copying them.

For example, we use an Icon component in this component:

<template>
  <div>
    <h2>{{ heading }}</h2>
    <Icon
      :type="iconType"
      :size="iconSize"
      :colour="iconColour"
    />
  </div>
</template>

To make it work, we need to add the correct prop type, copied from the Icon component:

import Icon from './Icon';
export default {
  components: { Icon },
  props: {
    iconType: {
      type: String,
      required: true,
    },
    iconSize: {
      type: String,
      default: 'medium',
      validator: size => [
        'small',
        'medium',
        'large',
        'x-large'
      ].includes(size),
    },
    iconColour:
      type: String,
      default: 'black',
    },
    heading:
      type: String,
      required: true,
    },
  },
};

When prop types of the Icon component are updated, you are sure you will forget to go back to this component and update them. Over time, bugs will be introduced as the prop types of this component begin to diverge from prop types in the Icon component.

So that's why we steal them:

import Icon from './Icon';
export default {
  components: { Icon },
  props: {
    ...Icon.props,
    heading:
      type: String,
      required: true,
    },
  },
};

Except in our example we added “icon” to the beginning of each prop name so we have to do a little extra work to make this happen:

import Icon from './Icon';

const iconProps = {};

// Do some processing beforehand
Object.entries(Icon.props).forEach((key, val) => {
  iconProps[`icon${key[0].toUpperCase()}${key.substring(1)}`] = val;
});

export default {
  components: { Icon },
  props: {
    ...iconProps,
    heading:
      type: String,
      required: true,
    },
  },
};

Now, if the prop type in the Icon component is modified, our component will be kept up to date.

But what if a prop type is added or removed from the Icon component? To cover these cases, we can use v-bind computed props to keep things dynamic.

16. Detect clicks outside (or inside) an element

Sometimes we need to detect whether a click occurred inside or outside a specific element el. This is the approach we typically use:

window.addEventListener('mousedown', e => {
  // Get the clicked element const clickedEl = e.target;

  // `el` is the element you are detecting external clicks on if (el.contains(clickedEl)) {
    // Click inside "el" } else {
    // click outside of `el`}
});

17. Recursive Slots

Can we v-for a component using only a template? In the process, I discovered how to use slot recursively.

This is what the component looks like:

<!-- VFor.vue -->
<template>
    <div>
        <!-- Render the first item-->
    {{ list[0] }}
        <!-- If we have more items to go on, but need to leave the one we just rendered -->
    <v-for
      v-if="list.length > 1"
            :list="list.slice(1)"
        />
    </div>
</template>

If you want to do this with scoped slots - why not? ! — Just a few tweaks needed: <

template>
  <div>
    <!-- Pass the item to the slot to be rendered -->
    <slot v-bind:item="list[0]">
      <!-- Default -->
      {{ list[0] }}
    </slot>

    <v-for
      v-if="list.length > 1"
      :list="list.slice(1)"
    >
      <!-- Recursively pass down the scope slot -->
      <template v-slot="{ item }">
        <slot v-bind:item="item" />
      </template>
    </v-for>
  </div>
</template>

Here is how to use this component:

<template>
  <div>
    <!-- General list -->
    <v-for :list="list" />

    <!-- List with bold items -->
    <v-for :list="list">
      <template v-slot="{ item }">
        <strong>{{ item }}</strong>
      </template>
    </v-for>
  </div>
</template>

18. Component Metadata

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

For example: if you were building a bunch of different widgets for an analytics dashboard like Google Analytics:

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

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 metadata from within a component through the special $options property:

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

Keep in mind that this metadata is the same for every instance of the component and is not responsive.

Other uses include (but are not limited to):

• Keep the version numbers of each component
• Custom flags for build tools to treat components differently
• Add custom functionality to components, beyond computed props, data, watchers, etc.

19. Multi-file single-file component

This is a little known feature of SFC. You can import the file just like a regular HTML file:

<!-- "single" file component -->
<template src="./template.html"></template>
<script src="./script.js"></script>
<style scoped src="./styles.css"></style>

This is handy if you need to share styles, documents, or anything else. Also great for those extra long component files that wear out your fingers from scrolling

20. Reusable components are not what you think

A reusable component doesn't have to be something big or complicated, I often make small and short components reusable. Since I'm not rewriting this code everywhere, updating it becomes a lot easier, and I can make sure every OverflowMenu looks and works exactly the same - because they're the same!

<!-- OverflowMenu.vue -->
<template>
  <Menu>
    <!-- Add a custom button to trigger our menu-->
    <template #button v-slot="bind">
      <!-- Use bind to pass click handlers, a11y attributes, etc. -->
      <Button v-bind="bind">
        <!-- Use our own "..." icon, this button has no text -->
        <template #icon>
          <svg src="./ellipsis.svg" />
        </template>
      </Button>
    </template>
  </Menu>
</template>

Here we’ve used a Menu component, but added a “…” (ellipsis) icon to the button that triggers it to open. It's probably not worth it to make a reusable component out of it since it's only a few lines. Can't we just add the icon every time we want to use a Menu like this? But this OverflowMenu will be used dozens of times, and now if we want to update the icon or its behavior, we can do it easily. And it’s much easier to use too!

<template>
  <OverflowMenu
    :menu-items="items"
    @click="handleMenuClick"
  />
</template>

21. Calling methods from outside a component

You can call the method from outside the component by giving it a ref:

<!-- Parent.vue -->
<template>
  <ChildComponent ref="child" />
</template>

 
// Somewhere in Parent.vue this.$refs.child.method();

Typically, we use props and events to communicate between components. Props are sent to child components and events are sent back to the parent component.

<template>
  <ChildComponent
    :tell-me-what-to-do="someInstructions"
    @something-happened="hereIWillHelpYouWithThat"
  />
</template>

But sometimes you may encounter a situation where you need a parent component to trigger a method in a child component. This is where just passing the props down doesn't work.

You can pass down a boolean value and have the child component monitor it:

<!-- Parent.vue -->
<template>
  <ChildComponent :trigger="shouldCallMethod" />
</template>

// Child.vue
export default {
  props: ['trigger'],
  watch:
    shouldCallMethod(newVal) {
      if (newVal) {
        // This method is called when the trigger is set to `true` this.method();
      }
    }
  }
}

This works fine, but only for the first call. If you need to trigger this action more than once, you must clean up and reset the state. The logic then looks like this:

• Parent component passes true to triggerprop
• Watch is triggered, Child component calls method
• Child component emits an event to tell Parent component that the method has been successfully triggered
• Parent component resets trigger back to false , so we can do this again
  

If, instead, we set a ref on the child component, we can call the method directly:

<!-- Parent.vue -->
<template>
  <ChildComponent ref="child" />
</template>

// Somewhere in Parent.vue this.$refs.child.method();

We’re breaking the “ props down, events up ” rule and breaking encapsulation, but it’s clearer, easier to understand and worth it!

Sometimes the "best" solution ends up being the worst solution.

22. Watching Arrays and Objects

The trickiest part of using an observer is that sometimes it doesn't seem to fire correctly. This usually happens because you are trying to look inside an array or an object without setting deep to true :

export default {
  name: 'ColourChange',
  props: {
    colours:
      type: Array,
      required: true,
    },
  },
  watch:
    // Use object syntax instead of just methods colours: {
      // This will let Vue know to look inside the array deep: true,

      // We have to move our method to the handler field handler()
        console.log('The color list has changed!');
      }
    }
  }
}

Using Vue 3's reactive API would look like this :

watch(
  colours,
  () => {
    console.log('The color list has changed!');
  },
  {
    deep: true,
  }
);

If you want to learn more, you can refer to the Vue 3 and Vue 2 documentation.

23. Deep linking with Vue Router

You can store (some) state in the URL, allowing you to jump directly to a specific state on the page.

For example, you can load a page with a date range filter selected:

someurl.com/edit?date-range=last-week

This is useful for parts of an application where users might share a large number of links, for server-rendered applications, or for passing more information between two separate applications than a regular link would normally provide.

You can store filters, search values, whether a mode is on or off, or the position in a list we scrolled to - perfect for infinite paging.

Use vue-router to fetch the query like this (this also works with most Vue frameworks like Nuxt and Vuepress):

const dateRange = this.$route.query.dateRange;

To change it, we use the RouterLink component and update the query:

<RouterLink :to="{
  query: {
    dateRange: newDateRange
  }
}">

24. Another use for template tags

The template tag can be used anywhere inside a template to better organize your code.

I like to use it to simplify v-if logic, and sometimes v-for as well.

In this example, we have several elements that all use the same v-if condition:

<template>
  <div class="card">
    <img src="imgPath" />
    <h3>
      {{ title }}
    </h3>
    <h4 v-if="expanded">
      {{ subheading }}
    </h4>
    <div v-if="expanded" class="card-content">
      <slot/>
    </div>
    <SocialShare v-if="expanded" />
  </div>
</template>

It's a bit clunky and not obvious at first, a bunch of these elements are shown and hidden together. On larger, more complex assemblies this can be a much worse situation!

But we can fix this.

We can group these elements using the template tag and lift the v-if into the template tag itself:

<template>
  <div class="card">
    <img src="imgPath" />
    <h3>
      {{ title }}
    </h3>
    <template v-if="expanded">
      <h4>
        {{ subheading }}
      </h4>
      <div class="card-content">
        <slot/>
      </div>
      <SocialShare/>
    </template>
  </div>
</template>

25. A better way to handle errors (and warnings)

You can provide custom handlers for errors and warnings in Vue:

// Vue 3
const app = createApp(App);
app.config.errorHandler = (err) => {
  alert(err);
};

// Vue 2
Vue.config.errorHandler = (err) => {
  alert(err);
};

Error tracking services like Bugsnag and Rollbar hook into these handlers to log errors, but you can also use them to handle errors more gracefully for a better user experience.

For example, if an error is not handled, the application can not only crash, but also display a full-page error screen and let the user refresh or try another action.

In Vue 3, error handlers only apply to template and watcher errors, but Vue 2 error handlers catch almost everything. The warning handlers in both versions are intended for development only.

This concludes this article about 25 Vue tips you must know. For more relevant Vue tips, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!