Vue 3 Cheat Sheet

Posted on  by admin


Vue Global Configs

Vuejs has become one of the most successfully applied, loved and trusted frontend JavaScript frameworks among our community.

Vue 3 Lifecycle Hooks

Advanced routing

Route alias

Named routes

Getting started with router

The Vue3 comes with a whole lot of new features.

Custom directives

Vue Templates and Themes

What you need to know about Vue 3

Vue Lifecycle Hooks

v-model.lazy="..."Syncs input after change event
v-model.number="..."Always returns a number
v-model.trim="..."Strips whitespace

In this article we will go through all the fundamentals of Vue2 and Vue3.

Vue Cheat Sheet for 3 and 2 Version

Global mixins

Vue Data Property

Global filters

Custom global directives

Router links

.stopStop all event propagation
.self Only trigger if is element itself

What's Inside?

Free Vue 3 Cheatsheet

Basically a Vue Cheat Sheet to make your life easier.

Masa U

Mixin option merging

Vue 3 Lifecycle Hooks

Vue Global Configs

Programmatic navigation

We will break it down our vue cheat sheet into different sections like global APIs, Vue Configs and the rest.



new Vue({}): This method provides the Vuejs instance an existing DOM element to mount on.


beforeCreateAfter the instance has been initialized #
createdAfter the instance is created #
beforeMountBefore the first render #
mountedAfter the instance has been mounted #
beforeUpdateWhen data changes, before the DOM is patched #
updatedAfter a data change #
beforeDestroyBefore the instance is destroyed #
destroyedAfter a Vue instance has been destroyed #

This is where all your Vuejs Codes are defined.


Route redirection


Vue 3 Composition API

el: A CSS selector string or an actual HTMLElement that all the Vuejs codes will be mounted.

template: A string template which is used as the markup for the Vue instance.You Vuejs components are defined here.

Vue 3 Composition API

Vue Templates and Themes

render: h => h(App): The render function receives a createElement method as it’s first argument used to create VNodes.

The Ultimate Resource for All Vue Developers

Aliasing createElement to h is a common convention you’ll see in the Vue ecosystem and is actually required for JSX.

Vue Lifecycle Hooks

Vue Data Property

Programmatic named navigation

Named routes with params

If h is not available in the scope, your app will throw an error.

Multiple slots

Defining routes

Dynamic routes

renderError (createElement, err): This provides render output when the default render function encounters an error.

Also see

  • The error encounter will be passed into the function as a second param.
  • props: This is a list of attributes that are exposed to accept data from their parent component.
  • You can implement this using an array and then pass all the parent data into it.
  • It also accepts extra configs for data type checking and custom validation.
  • data(){return{}}: This is a data object for a particular Vuejs instance.