The Ultimate Vue Cheat Sheet

Vuejs has become one of the most successfully applied, loved, and trusted frontend JavaScript frameworks in our community. The Vue3 comes with a whole lot of new features. In this article, we will go through all the fundamentals of Vue2 and Vue3. Basically, a Vue Cheat Sheet to make your life easier.

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

Vue DOM

• new Vue({}): This method provides the Vuejs instance with an existing DOM element to mount on. This is where all your Vuejs Codes are defined
• el: A CSS selector string or an actual HTMLElement that all the Vuejs codes will be mounted.
• template: A string template that is used as the markup for the Vue instance. Your Vuejs components are defined here.
• render: h => h(App): The render function receives a createElement method as its the first argument used to create VNodes. Aliasing createElement to h is a common convention you’ll see in the Vue ecosystem and is actually required for JSX. If h is not available in the scope, your app will throw an error.
• renderError (createElement, err): This provides render output when the default render function encounters an error. The error encounter will be passed into the function as a second param.

Vue Data Property

• 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.

props:['users','samples']

• data(){return{}}: This is a data object for a particular Vuejs instance. Here Vuejs convert its properties into getter/setters to make it “reactive”.

data() {
      return {
        name:"Sunil",
        age:80
    }
    }

• computed: Computed properties calculate a value rather than store a value. These computed properties are cached and only re-computed on reactive dependency changes.

computed:{
      sumNumbers:function() {
        return this.a * 2
     }
    }

• watch: This is an object where keys are expressions to watch and values are the corresponding callbacks. Basically, it listens when your data property has been changed.

watch:{
      name:function(val,oldVal) {
       console.log('newval',val,'old',oldVal)
    } 
    }

• methods: This is a method to be mixed into the Vue instance. This method can be accessed directly on the VM instance using the this keyword. Always avoid using arrow functions to define methods.

methods:{
      logName() {console.log(this.name)}
    }

Vue Lifecycle Hooks

A component in Vuejs has a lifecycle that is managed by Vue itself when it creates the component, mounts the component to the DOM, updates the component, and destroys the components.

• beforeCreate: This is called synchronously immediately after the instance has been initialized, before data observation and event/watcher setup.

beforeCreated(){console.log('Before Created')}

• created: This is called after the Vue instance is created.it is called synchronously immediately after the instance has been initialized, before data observation and event/watcher setup.
• beforeMount: In this phase, it checks if any template is available in the object to be rendered in the DOM. If no template is found, then it considers the outer HTML of the defined element as a template.
• mounted: This is called after the instance has been mounted, where el is replaced by the newly created vm.$el. If the root instance is mounted to an in-document element, vm.$el will also be in-document when mounted is called. If you want to wait until all the view is rendered, you can use the nextTick method inside the hook: this.$nextTick()
• beforeUpdate: This gets fired before the changes reflect the original DOM element. Also, take note that the hook is not called during server-side rendering.
• updated: The component’s DOM will have been updated when this hook is called, so you can perform DOM-dependent operations here. However, in most cases, you should avoid changing the state inside the hook. To react to state changes, it’s usually better to use a computed property or watcher instead.
• beforeDestroy: This is called before the Vue instance is destroyed.
• destroyed: This is called after the Vue instance has been destroyed.

Vue 3 Lifecycle Hooks

Vue 3 also comes with its own life cycle hooks which are really great for development. To use them we will have to import them into our components like this:

import { onMounted, onUpdated, onUnmounted } from 'vue'

Here we get to only import the hooks that we want to use. Here are the Vue 3 life cycle hooks:

• onBeforeMount : This hook gets called before mounting occurs
• onMounted : Once the component is mounted this hook is called
• onBeforeUpdate: Called once a reactive data changes and before its re-rendered.
• onUpdated : Called after re-rendering the component.
• onBeforeUnmount: This is called before the Vue instance is destroyed
• onUnmounted : This is called immediately after the Vue Instance is destroyed.
• onActivated: Components in Vuejs can be kept alive, this hook is called when this component is activated.
• onDeactivated: This is called once a kept-alive component is deactivated.
• onErrorCaptured : This is great for error handling. This hook is called once an error is captured in a child component.

Vue 3 Composition API

Before we can access the Vue3 composition API we have to, first of all, install it:

npm install @vue/composition-api

After the installation was successful we can now import it into our main.js file:

import Vue from 'vue';
    import CompositionApi from '@vue/composition-api';
    Vue.use(CompositionApi);

With this done we are set to use the Vuejs Composition API in our application.

Now let's looking at some of the Vue 3 features:

• **setup()**: This function is called when an instance of a component has been created. This method takes in two parameters props and context. – Props are reactive values and can be watched:

export default {
      props: {
        age: String,
      },
      setup(props) {
        watch(() => {
          console.log(`Sunil is : ` + props.age + "years old");
        });
      },
    };
- Context here has this properties `attrs`, `slots`, `emit`, `parent`, `root`. Always remember that the `this` keyword is not available in the setup function meaning that this won’t work :
setup() {
      function onClick() {
        this.$emit // not available
      }
    }

• refs : The new way of getting a reference to an element or component instance in a template is by using the ref method. To use this, we have to, first of all, import it into our application like this:

import { ref } from '@vue/composition-api'

And then use it like this in our component:

<template>
      <div>{{ count }}</div>
    </template>
    <script>
    import { ref } from '@vue/composition-api'
      export default {
        setup() {
          return {
            count: ref(0)
          }
        }
      }
    </script>

Sponsored:

Vue Global Configs

The Vue.config the object is where we can define all our Vuejs global configs. One of the important parts of the Vue Cheat Sheet.

• Vue.config.silent: This config disables all Vuejs logs and warnings
• Vue.config.devtools: This adds configuration on whether to allow vue-devtools inspection or not
• Vue.config.performance : This config enables component initializing, compiling, rendering, and patch performance tracing in the browser dev tools timeline.
• Vue.config.productionTip: This enables production tips on Vue startup.
• Vue.config.ignoredElements: Make Vue ignore custom elements defined outside of Vue (e.g., using the Web Components APIs). Otherwise, it will throw a warning about an Unknown custom element.
• Vue.config.errorHandler : This config assigns a handler for uncaught errors during component render function and watchers.
• Vue.config.optionMergeStrategies : This defines custom merging strategies for options. This merge strategy receives the value of that option defined on the parent and child instances as the first and second arguments, respectively.

Vue / VueJs Templates and Themes

As the above Vue cheat sheet helps you to speed up your workflow, there is another great thing called ready-to-use Vue templates, which are more than helpful, They help you create visually stunning applications using ready-to-use design components provided in the template package. You can definitely check them out for your application. You can download free vue templates from WrapPixel and AdminMart as well if you do not want to invest to start with.