Understanding Vue Shorthand Syntax

The Vue prefix

Vue uses specific attributes on your html elements or components. All Vue related attributes are prefixed with v-. You might be familiar with or have seen v-if, v-on, v-for etc. This prefix makes it easy to see and use Vue specific features. But some of them feels repetitive to write over and over again. If we for example have a component with multiple props, the v-bind:prop might feel unnecessary to write each time.

For this example say we have a SuperHero component with multiple properties. We would use this component like this:

<SuperHero
	v-bind:name="The Hulk"
	v-bind:real-name="Bruce Banner"
	v-bind:color="Green"
	v-bind:feature="Gets really angry"
	v-on:click="getAngry"
	v-on:mouseenter="openEyes"
	v-on:mouseleave="closeEyes"
/>

You can see that the v-bindand v-on words are feeling redundant. We can solve this with shorthands.

What is a shorthand

A shorthand is something that Vue provides on directives to reduce the amount of repetitive code you have to write in your templates.

v-bind shorthand

Instead of writing v-bind Vue provides a shorthand with only a colon :.

<!-- full syntax -->
<SuperHero v-bind:name="The Hulk" ... />

<!-- shorthand syntax -->
<SuperHero :name="The Hulk" ... />

v-on shorthand

Instead of writing v-on Vue provides a shorthand with an at sign @.

<!-- full syntax -->
<SuperHero v-on:click="getAngry" ... />

<!-- shorthand syntax -->
<SuperHero @click="getAngry" ... />

The above example with shorthands will now look like this instead. A lot easier to read and less boilerplate.

<SuperHero
	:name="The Hulk"
	:real-name="Bruce Banner"
	:color="Green"
	:feature="Gets really angry"
	@click="getAngry"
	@mouseenter="openEyes"
	@mouseleave="closeEyes"
/>

Dynamic argument

Both v-bind and v-on supports dynamic keys. Useful if you want to change what property or event that should be triggered based on a variable instead. You can dynamically set a specific property or event name. One use case is if you want to switch between click or mouseenter depending on device.

<template>
	<SuperHero @[event]="getAngry" :[key]="The Hulk" ... />
</template>

<script>
export default {
	props: ['useRealName'],
	computed: {
		key() {
			return useRealName ? 'real-name' : 'name'
		},
		event() {
			return isMobile ? 'click' : 'mouseenter'
		},
	},
}
</script>

Named v-slot shorthand

When using slots in Vue you have the option to set a name to a slot, e.g. named slots. This enables you to target different slots from the component using the slots. For example we could have a slot for the main content like this:

<slot name="content"></slot>

When setting content for this slot Vue provides a directive called v-slot. If you want to target your content slot you would write:

<template v-slot="content">Content</template>

The v-slot directive also comes with a shorthand. Introduced in Vue 2.6 you can now use #to replace v-slot:. The above code would now be written as:

<template #content>Content</template>

Once again this reduces the amount of code you have to write. Shorthands are nice to use when your template code gets bigger.