Vue Cheat Sheet

Posted on  by admin

The Ultimate Resource for All Vue Developers

··

18 min read

Our Vue 3 Essentials Cheatsheet will save you time by giving you code snippets that every Vue developer needs to know.

Our up to date cheatsheet includes the Vue 3 Composition API, fundamentals of Vue’s template syntax, lifecycle hooks, and dozens of more key topics.

It's been downloaded over 5000 times by Vue developers of all skill levels! The fundamental concepts of Vue, all in one place.

Expressions

  • Code examples of core Vue concepts like template syntax, directives, lifecycle hooks, and dozens more!

Slots

Component

Stay up to date with the newest Vue 3 features including changes to the Options API and the new Composition API! Save time looking up "how to ___ in Vue" by having these snippets right beside you while you're coding.

Also see

  • Stop wasting time Googling the same Vue questions over and over again.
  • Our Vue 3 Essentials Cheatsheet is not only perfect to review Vue concepts, but a great resource to keep open while you're programming!
  • By compiling the most useful Vue concepts into a single resource, you can quickly find whatever you're looking for.

And best of all, it's 100% free. It's been trusted by thousands of Vue developers so what are you waiting for?

Go get your free cheatsheet and start leveling up your Vue skills.

Single file components

Up-to-date Vue 3 code snippets. Composition AND Options API code .

Vue.JS Cheat Sheet

Lifecycle hooks

Vue Directives (v-if, v-for, etc.) . Creating your app with Vite . Lifecycle hooks. See: Delimiters.

Custom events

See: Directives. See: List Rendering. See: Components Basics. See: Lifecycle Hooks. Use props to pass data into child components,custom events to pass data to parent elements.

Methods of the Vue object

See: Custom Events. See: Single File Components. See: What About Separation of Concerns?

Vue CLI(cli.vuejs.org). Vue Router(router.vuejs.org).

Vue DevTools(chrome.google.com). Vue.js v1.0.28 cheatsheetLegacy version. JS officially came into the limelight in 2014 and is being widely used for web development.

Single file

Vue.js is a JavaScript progressive framework with a variety of tools for building user interfaces.

Example

Vue.JS framework usage is not just limited to web interfaces; it is also being used for both mobile app development and desktop with Electron framework.

Binding

Programmers can undertake Vue.JS training through front end web development training programs.

Before we jump to the Vue.JS cheat sheet let’s have a look at the positives offered by Vue.JS, which made it one of the most loved frameworks in 2019.

Small Size: It takes users no time to download this framework with just a mere weight of 18 KBs.

The framework just not only has a small size but has a faster speed too and beats the likes of Ember.js., Angular.js.

Vue instance asset

Easy to understand: A framework reaches mass adoption when it’s easy to comprehend, which is the likely case with learning Vue.js. To start-off with Vue.JS, you simply need a basic understating of CSS, HTML, and JavaScript.

DOM

Through this framework, you can develop both small-scale and large-scale templates, which can save time. Simple Integration: JS is based on a JavaScript framework and can be easily integrated into other applications built on JavaScript.

This means that it is useful for altering the pre-existing applications along with developing new web applications. Flexible: Vue allows its users to write a template in JavaScript file, HTML file, and JavaScript file using virtual nodes.

What you need to know about Vue 3

Js facilitates switching from React or Angular as its internal organization is a mixture of two. Detailed Documentation: Documentation with Vue.Js is well structured and comprehensive covering all aspects from installation to in-depth things like scaling of the app and reactivity.

Two-Way Communication: Lastly, Vue.js facilitates two-way communications, inherited from Angular, which makes it easy to handle HTML blocks.

Built-in components

With two-way data binding, it’s convenient to update related components and track data updates.

Vue.js uses double braces [[ ]] in the code as place-holders for data.

Vue.js directives are mainly HTML attributes with the prefix v-.

In this example, a new Vue object is developed with new Vue(). The characteristic here” el:” will bind the new Vue object along with the HTML element by using.

Vue.js Directives

[[ message ]]

. When a Vue.JS object is bound with the specific HTML element, the HTML element will alter as the Vue object changes.
[[ message ]]
.

Modifying events

Enroll in Our Online Coding Bootcamp Training Program. QuickStart offers coding bootcamp program partnering with the reputed universities in the United States to help you launch your career as a Developer.

Vue Composition Options

To make the model modify when the change event occurs, & not any time the user presses a key, the user can use “v-model.lazy” as a substitute to” v.model”.

Working with input fields, “v-model.trim” is quite useful as it automatically removes whitespace.

Properties of a Vue instance

If you accept a number as a replacement to a string, ensure to use “v-model.number”.

Use “click” for possible events. v-on:click.stop: Stop the click event propagation.

Component anatomy

v-on:click.once: The event will only get triggered exactly once.

beforeCreate: Called before the app is created. Created: Called after the app is created.

beforeMount: Called before the particular app is mounted on the DOM.

mounted: Called after the particular app is mounted on the DOM. beforeDestroy: Called before the app is destroyed.

destroyed: Called after the app is destroyed.

beforeUpdate: Called before a property is updated. updated: Called after a property is updated.

Separation

activated: Called when a kept-alive component gets activated. deactivated: Called when a kept-alive component gets deactivated.

Global Configuration of the Vue object

Vue provides 5 built-in components:. The Vue.config object has properties as listed in the table given below, and these can be modified when the instance is created:.

What's Inside?

Defaults to false, if true suppress logs & warnings.

Instance Properties

Allows to state a custom merging strategy for options.

Defaults to true in development, & it is set false in production.

Such values can be overridden. Allows setting an error handler function.

Using a single slot

It is useful to hook Sentry and other similar services.

Allows to set a warning handler function, and is similar to errorHandler, but for warnings instead of errors. Used to let Vue ignore custom elements stated outside of it, same as Web Components.

Directives

Defaults to false. If set to true, it traces the performance of Vue components in the given browser. Let you define custom key aliases for v-on.

Defaults to true. Set to false to deactivate the notice “you’re in development mode” during development in the console.

Start a 7-day FREE TRIAL at QuickStart.com and start your certification journey today!

Directives: The set of directives to link to the Vue instance.

Filters: The set of filters to link to the Vue instance.

Components: The set of components to link with the Vue instance.

Expressions

Allows to subclass the Vue object, to make a custom profile. Defers the callback which is to be executed after the next DOM update cycle.

Actions/Events

Add a property to the object. Delete a property from the object. Set (or get) a global directive. Set (or get) a global filter. Set (or get) a global component.

Install a Vue.js plugin. Set a global mixin.

Compile a template string in the code to a render function.

List rendering

Returns the currently installed version of Vue. Parent: Specifies the parent instance.

Multiple slots

Mixins: Sets an array of mixin objects. Extends: Extend another component. el: It will set the DOM element where the instance will mount on. It can be an HTMLElement or a CSS Selector,.

Template: Itis signified as a string, that will replace the mounted element. Render: It is to define the template, you can describe a template using a render function.

Given an instance of Vue, kept into a variable i.e. const vm = new Vue(/*..*/), you can review & interact with it.

$data: The data object is mainly linked with the instance.

$props: The props the instance has received. $options: The object is mainly used to instantiate the Vue instance.

Working with Form elements

$parent: The parent instance. $root: The root instance (the root instance, this points to itself).

$children: It is an array of children instances. $slots: An array of the linked slots contained in the template. $scopedSlots: An array of the linked scoped slots.

$refs: An object which contains a property for every element pointed by a refattribute stated in the template.

$isServer: True if the Vue instance is running on a particular server (beneficial in server-side rendering).

$attrs: An object of attributes that are delivered to the component but not defined as props.

$listeners: An object of v-on event listeners which is allocated to the component. Want to know more?

Free Vue 3 Cheatsheet

Talk to experts.

'#title' identifies the template in the title slot. The v-slot: title syntax can also be used

Internally the custom-button looks something like this:

Note that the main slot is still available

(the tags here are optional) but it is possible to add a second slot with a name

Slot Props

Slots can have props

The Props can then be used

It is possible to define Props for the main slot using '#default'

Note that if there is no named slot. It is possible to use the default Props with this syntax

Vue Router

Client-Side Routing

The client-side routing allows you to change the url address of the browser and load another Vue page / component without refreshing the browser. All this is possible thanks to the VueRouter library.

Installation VueRouer v4

VueRouter Configuration

Add in main.js

RouterView

This component comes with the vue-router library and acts as a container to render the routes we have defined

App.vue

RouterLink

On clicking this element, Vue will render the route specified by the 'router-link' tag and the 'to =' attribute. The render will take place where you placed your

Route Parameters

It is possible to extract the information relating to the path. Like for example the Id of a product: /products/id

You can then launch the link from the Products component

It will finally be possible to read this parameter from the ProductDetail component:

It is also possible to read this parameter as a component Props (eg ProductDetails component)

To enable the conversion of the parameter to Props, you must mention it when you define the route.

$route / this.$route

Is a global object that contains information about the current route:

  • name
  • fullPath
  • path
  • query
  • params

Route redirection

It is possible to redirect from one road to another.

Route Alias

It is possible to have two routes which display the same component

'/' et '/home' point to the same component.

The alias property can also be an array ['/ home', '/ homepage']

404 redirect

It is possible to redirect a page if the route does not exist

Modify the route in your code with this.$router

Route query

It is possible to read the query parameters passed to the routeex: /products?brand=Apple

It is possible to call a route with a query parameter

If query is equal to undefined then it will not appear in the url bar of the browser

Nested Routes

Allows you to manage the sub-routes. ex: / products / 1050 / tags

You must first define the sub route with the property children

In the ProductDetails component you can display the component tags using tags

Composition API

Is an alternative to the Option API and allows us to write our code bundled and more naturally, without using properties / objects and without using the keyword 'this.'

setup() method

All the code of your component will be write inside this method

Note that the template and style section remains unchanged

Return value of the setup () method

If you want to use a variable or a function outside the setup () method, in the template for example, you must return it in the return () method

Props

You can access your component's props with the props parameter

Reactive Variables

To use the v-model directive on a variable. you must make this variable reactive with the function ref()

.value property

To modify a reactive variable, declared with ref(), you must use its .value property

ref directive to link an HTML element

The ref directive can also be used to create a binding with an html element (replacing this.$ref in the API option))

reactive: an alternative to the ref function

Note that the reactive function only takes an object as a value (no string, number, etc.) and that unlike the ref() function you should not use the .value property to return the value of the variable.

Combination of BeforeCreate and Created Lifecycle Hook

To run code when creating the component simply place some code directly in setup()

onMounted

Allows you to run code when creating the component

Emit

The emit function replace $emit

Using the Store (Vuex)

The this.$store method is not available in composition API mode, you must now use the useStore() method

Note that the saveTitle function is in fact a function. Returning a function allows you not to execute the commit right away but only when calling saveTitle

The computed() methods

The computed variable 'count' will be refreshed only if the value of the 'state.count' changes.

Watch method

Allows you to run code when modifying a variable

To make a watch on several variables at the same time you can use the function watchEffect ()

The function will run on each modification of all the variables present in the watchEffect()

Using Router and Route

In Composition API mode you cannot use 'this.$router' and 'this.$route', you will have to use useRouter and useRoute