German IT Academy

Updates, Tutorials and Previews for our Premium Courses

You are a developer? Contribute!

Complete Vue.js 3 Guide

Last updated: 24.12.2019

We at German IT Academy are very eager to see first official release of the third Version of Vue.js 3. Therefore we are watching the developments closely and will be publishing many Posts, Tutorials & Courses on Vue.js 3. It does pay off to be on our Newsletter list (scroll down to subscribe) or check this Vue.js 3 Guide once i a while.

Also, check out the first “awesome-vue3″ repository with an updated and curated list of all resources regarding Vue.js 3.

Currently the vuejs team is working on three projects: the 2.7 Version, Maintenance of current codebase and the Roadmap (mainly the third version of Vue.js).

Major Changes in Vue.js 3

Let’s explore the official plans for third Version of Vue.js. We will also derive a great lot of content from the vue/rfcs, where all the RFCs are developed and discussed (Note: RFC = Request For Comment). We picked some of the most interesting ones and included a basic code example. As the changes become more certain, we will update our Vue.js 3 Guide to have more detailed examples.

Official RFCs December 2019

Composition API

There is a long explanation of what the Composition API is. Generally, the motivation behind it is the reuse of Logic, better Code Structure and better Type Inference. Here is a basic Example:

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

New syntax for scoped slots usage

  • New directive v-slot that unifies slot and slot-scope in a single directive syntax.
  • Shorthand for v-slot that can potentially unify the usage of both scoped and normal slots.
<!-- default slot -->
<foo v-slot="{ msg }">
  {{ msg }}
</foo>

<!-- named slot -->
<foo>
  <template v-slot:one="{ msg }">
    {{ msg }}
  </template>
</foo>

Shorthand syntax for the v-slot syntax

<foo>
  <template #header="{ msg }">
    Message from header: {{ msg }}
  </template>

   <template #footer>
    A static footer
  </template>
</foo>

Dynamic values in directive arguments

<div v-bind:[key]="value"></div>
<div v-on:[event]="handler"></div>

# instead of

<div v-bind="{ [key]: value }"></div>
<div v-on="{ [event]: handler }"></div>

Global API

Currently in 2.x, all global APIs are exposed on the single Vue object:

import Vue from 'vue'

Vue.nextTick(() => {})

const obj = Vue.observable({})

In 3.x, they can only be accessed as named imports:

import Vue, { nextTick, observable } from 'vue'

Vue.nextTick // undefined

nextTick(() => {})

const obj = observable({})

Re-design app bootstrapping and global API

Global APIs that globally mutate Vue’s behavior are now moved to app instances created the new createApp method, and their effects are now scoped to that app instance only.

// Before
import Vue from 'vue'
import App from './App.vue'

Vue.config.ignoredElements = [/^app-/]
Vue.use(/* ... */)
Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)

new Vue({
  render: h => h(App)
}).$mount('#app')


// After
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp()

app.config.ignoredElements = [/^app-/]
app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)

app.mount(App, '#app')

More Material on Vue.js 3

  • Github Repository ‘awesome-vue3‘ with a compilation of most recent and most popular Vue.js 3 Resources.

Introduction to Ruby on Rails

Learn why Ruby on Rails can help speed up the development process. and why so many big companies rely on Ruby on Rails to run their business.

Serve Keras Model with Flask REST API

This tutorial will briefly discuss the benefits of serving a trained Machine Learning Model with an API. Then we will take a look at a precise example using a Keras Model and Python Flask to serve the model. You'll learn how to Serve Keras Model with Flask REST API....

How to create a WordPress Plugin

Introduction What is WordPress? A technical definition is "WordPress is an open source content management system (CRM) built in PHP". Currently WordPress is the most popular CRM available for free! If you've ever used WordPress, you definitely know about themes &...

Getting started with PHP 7 in 2020

What is PHP? PHP stands for Hypertext Preprocessor (earlier called "Personal home page"). It is an open source scripting language created for the web development. PHP is a server-side language which means all the code is rendered on server and only static HTML, CSS...

Complete Vue.js 3 Guide

This is the first and most comprehensive Guide to Vue.js 3. We give an overview of the Changes, an introduction in usage of VueJS3 with Example Codes.

IT Career Path Nobody Is Discussing

Whatever path you decide on, we will help you find out the ideal things to do to take. Your career path contains the jobs you should hit your final career objective. While the career path will appear different for everybody, aiming to acquire equal parts experience in...

Awesome Future of Frontend in 2020

Before we dive in to Future of Frontend in 2020. Let's begin with some basics as we gradually get more forward-looking. We obviously cannot know what technology will dominate in 2020 and what framework will pop up. But we can try at least. What is frontend? Frontend...

How to Run Moodle with Docker Compose

How to run moodle with docker and docker-compose. Tutorial how use moodle in a docker container with docker-compose and Dockerfile.

Node.JS Tutorial: REST API & CRUD Operations

The following Tutorial will guide you through creating a simple REST API and CRUD Operations. Our Stack is ExpressJS, Mongoose and MongoDB. This API will perform CRUD Operations on Data stored in MongoDB. It's best to start from scratch and try creating this app by...

VueJS Tutorial – #6 Template Syntax

Before we start with another VueJS Tutorial, let me promote our VueJS Course with a Certificate right at the beginning. You'll see more interactive and deeper Content about VueJS. At the end you'll also receive a VueJS Certificate from German IT Academy. That's it....