Complete Vue.js 3 Guide

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.
Awesome Future of Frontend in 2020

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 is referred to as the pattern of transforming data to a graphical interface with the use of CSS, HTML, and JavaScript, so that users can easily view and efficiently interact with the data. It distinctively translates a computer programming source code into an intermediate illustration to produce code in a computer output language.

It is also a common term used by programmers and computer programmers to describe part of the layers that make up a website, computer program or hardware, which are depicted based on how accessible they are to a user. The frontend layer strategically placed on top of the backend includes all software or hardware that is part of a user interface.

Professionals such as web designers usually handle Frontend section of every project and the components are customer facing. Some of these components includes:

  • Search engine optimization (SEO)
  • Graphic design and image editing tools
  • Design and markup languages such as CSS and HTML
  • Web performance and browser compatibility
  • Usability and accessibility testing

Frontend Career

Frontend career is an interesting area with availability of various great remunerations as a profession that becomes easier with the adequate knowledge of the three primary coding languages i.e. CSS, HTML and JavaScript. Research has deducted that frontend development is and will always be a good career path for humans because software keeps evolving every day.

The consistent demands for frontend career specialist is very high. Some of the key skills of a frontend developer are responsive design, frameworks, debugging, web performance, CSS preprocessing and command line among others.

Consider taking our VueJS Certification or VueJS Online Course. It’s on-demand, easy to understand and has tremendous benefits for you career.

Relevant Areas of Frontend

An important area where frontend (client-side programming) is of high relevance is UI, UX. There is a distinct relationship between frontend, UI and UX. They work together seamlessly. The UX design centered on the satisfaction of the user experiences with software. Frontend development is the technical implementation of the software user interface.

UI design is the graphical bridge that connects the UX and frontend. An individual can choose to be a UI, UX, and frontend web developer in which he/she will be responsible for applying interactive and visual design experience. For you to be successful in this field, you must be able to observe users behavior to bring the best out of an application. Your primary aim should be to ensure user-based company goals are been reached satisfactorily. Some of the major importance of frontend development in relationship with UI and UX are:

  • Optimize navigation: Intuitive navigation will help gain customer trust by ensuring that the visitors find whatever they are seeking from your site. It majorly comprises of a well-planned site layout, clean, and structured impressive graphics.
  • Visitor retention: This will help increase traffic and conversion. Thus, optimized performance is one of the business benefits of front-end development.

Some other sub areas of its relevance are mobile frontend and web frontend:

  • Mobile Frontend: This can operate effectively without an active internet.
  • Web Frontend: This requires active internet for it work properly on your devices.

Generally, frontend development tools are focused on the user interface and user experiences. These has given birth to the following importance:

  • Creating modern day responsive websites or web app for mobility segment
  • Building bug free, secured and consistent products for high traffic web zone
  • Developing quickly reacting features or interactive app tools for online stores
  • Easy to learn, use and scale technologies, etc

In conclusion, the earlier you learn various frontend skills such as VueJS today – the better. Frontend courses are made easy with the best-qualified teaching procedures at German IT Academy.

Frontend in 2020

As for the prediction of where Frontend will head in 2020 it’s no easy task. Just as VueJS came out of nowhere and allowed more people with lower frontend skills to participate in the development. So can another framework, paradigm or tools do so in 2020.

Responsive stays

It is certainly though that Material Design & Bootstrap are going to continue growing like they already do. They will keep evolving and doing the little hard jobs of micro-designing small buttons and tables for us.

Changing Screen Sizes

If the rise of foldable phones continues, the frontend developers will need to adjust to this new environment of suddenly changing screen size and making sure that the app, page, game works transitions seamlessly between both screen sizes.

Performance & Data Focus

With the rise of data lakes and data on itself, Frontend Industry will be coming up with ways to make their Application lighter and more intelligent in showing, grouping and filtering the right information without overloading the hardware, browser, etc.

Artificial Intelligence in Frontend

With AI supported in-app & on website behaviour analysis of end consumers. We will have insight into deep psychology of our brains. What color triggers more excitement, what button animation triggers more dopamine, etc. The Frontend world will definitely become more fine tuned to our psychological “needs” in our to manipulate the end consumer to … consume.

Frontend in VR & AR

It’s totally new field for us. But one can imagine that Frontend will play a crucial role in AR and VR. This area brings a whole new set of challenges with itself. The user does not use a mouse or a keyboard. The user does stare a small screen. There could pop up a Framework like “ReactVR” (e.g. React 360) or something like that. Which would allow you do design 360 User Interfaces. Or something like “VueAR”, which would allow you to create transparent overlay User Interfaces to allow the user to use your app while they are interacting with their environment.

VueJS Practice – #4 Vuex Store

VueJS Practice – #4 Vuex Store

Here we go again, another VueJS Practice. This time we’ll discuss a very important part of every VueJS Application – the Central Data Store or Vuex Store. Vuex is a VueJS Plugin and extends your Application with centrally available Data and Methods.

Another VueJS Tutorail and Practice by German IT Academy.

Problem / Task

We want to create a Part that is centrally available in our Application: A Shopping Cart. Generate three products in the Vuex Store as states. Create a ProductList.vue View and a ShoppingCart.vue Component. The ProductList.vue should display the products stored in vuex – include a button “Add to Cart”. “Add to Cart” should add the selected Product to a centrally available list, so that the cart list can be access from any other Component. In that view, import ShoppingCart.vue, which should display all Items in the Cart.

Hint

  • For the products: use an Array or Object in Vuex.
  • Displaying multiple UI elements can be done with v-for directive.
  • Centrally available list is nothing else than a list of centrally avaiable products.
  • In order to follow the best practices, consider using
    • Vuex Getters to retrieve data
    • Vuex Actions to modify Vuex States from the outside (e.g. VueComponent)

Solution

As always, let’s jump right into the code.

<template>
  <div class="ShoppingCart">
    <h3>Shopping Cart</h3>
      <p v-for="(item, key) in cart" :key="key">
        {{ products[item].name }}
      </p>
      <hr>
  </div>
</template>

<script>
export default {
  name: 'ShoppingCart',
  computed: {
    products: {
      get() {
        return this.$store.getters['allProducts']
      }
    },
    cart: {
      get() {
        return this.$store.getters['getCartItems']
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
<template>
  <div class="home">
    <img alt="Vue logo" width="300" src="https://i0.wp.com/code.git-academy.com/wp-content/uploads/2019/10/400dpiLogo.jpg?zoom=1.100000023841858&fit=2077%2C1175&ssl=1">
    <hr>
    <ShoppingCart/>
    <ul>
      <li v-for="product in products" :key="product.id">
        <h1> {{product.name}}</h1>
        <h3> {{product.price}} $</h3>
        <button @click="addToCart(product.id)">Add to Cart</button>
      </li>
    </ul>
  </div>
</template>

<script>
// @ is an alias to /src
import ShoppingCart from '@/components/ShoppingCart.vue'

export default {
  name: 'home',
  components: {
    ShoppingCart
  },
  methods:{
    addToCart(id) {
      this.$store.dispatch('addToCart', id)
    }
  },
  computed: {
    products: {
      get() {
        return this.$store.getters['allProducts']
      }
    }
  }
}
</script>

<style scoped>
li { 
  list-style-type: none;
  margin-bottom: 100px;
}
button {
  background-color: blue;
  color: white;
  font-size: 20px;
  border-radius: 25px;
  border: 1px solid black ;
}
</style>
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    products: {
      0: {
        id: 0,
        name: 'VueJS T-Shirt black',
        price: 39
      },
      1: {
        id: 1,
        name: 'VueJS T-Shirt white',
        price: 39
      },
      2: {
        id: 2,
        name: 'VueJS T-Shirt blue',
        price: 39
      }
    },
    cart: []
  },
  getters: {
    allProducts(state) {
      return state.products
    },
    getCartItems(state) {
      return state.cart
    }
  },
  mutations: {
    pushCart(state, payload){
      state.cart.push(payload)
    }
  },
  actions: {
    addToCart(context, payload) {
      context.commit('pushCart', payload)
    }
  }
})

Below you can see the visual result of the above code. If you are interested in more VueJS Practice, examples and tutorials, feel free to enroll in our VueJS Course and get certified by German IT Academy.

VueJS Practice

In the store.js we specify out getters. Our products and cart are just lists in the vuex states object. When we press on “Add to Cart”, we initiate a Vuex Action called “Add to Cart” with “this.$store.dispatch(‘addToCart’, id)“. The ShoppingCart.vue simply iterates over the Vuex State Cart and prints out the items.

It’d be better to outsource the v-for loop in ProductList.vue into another Vue-Component ProductItem.vue. ProductList.vue would import ProductItem.vue as a child, and pass a product id. Then, ProductItem.vue could display the product by selecting it via id.

VueJS Practice #3 – Instance Management

VueJS Practice #3 – Instance Management

Wecome to the third VueJS Practice from German IT Academy. In this module we are going to make sure that we understand the properties and the life cycle of a Vue-Component (or instance).

Problem

Create a Component ProductDetail.vue with

  • a product object with random values for keys (id, price, name)
  • a text input-field “quantity” with default value “0”
  • a text output calculating the total Costs (product price * quantity)

The Component must have following behavior:

  • Before the Component has been mounted, a text output “Specify Quantity.” appears .
  • Data property “quantity” is automatically updated with the input-field quantity.
  • After Quantity has been updated, a text output “Quantity updated.” appears.

Hint

  • For the text above all Content: think about a data property that will be changed on certain Component life cycles.
  • Regarding the quantity and input-field: Do you remember what v-model is good for?
  • For the behavior part: the words “before” and “after” should be ringing a bell in your head. Take a look at the life cycle diagram of VueJS Components/Instances.

Solution

Let’s jump right into the code. Read it and see if you understand everything. If not, see the explanation after the code.

<template>
  <div class="ProductDetail">
      <h2>{{notification}}</h2>
      <p>
        Quantity: <input type="text" v-model="quantity"><br>
        Total Value: {{ totalValue }}$
      </p>
  </div>
</template>

<script>
export default {
  name: 'ProductDetail',

  data() {
    return {
      product: {
        id: 1,
        name: 'VueJS Certificate',
        price: 999
      },
      quantity: 0,
      // You could set 'notification' to desired default value 
      // instead doing it trough life cycle hook 
      notification: '' 
    }
  },

  computed: {
    totalValue: {
      get() {
        return this.quantity*this.product.price
      }
    }
  },

  beforeMount() {
    if(this.quantity==0) {
      this.notification = 'Please specify quantity!'
    }
  },

  updated() {
    if(this.quantity != 0) {
      this.notification = 'Quantity updated!'
    }
  }
}
</script>

<style scoped>
h2 {
  color:orange;
  border: 1px solid orange;
  width:50%;
  margin: 0 25% 0 25%;
}
input {
  height: 40px;
  width: 70px;
  font-size: 25px;
}
.ProductDetail {
  text-align: center;
}

.ProductDetail p {
  font-size: 30px;
}
</style>

Starting with unimportant: styles are just css styles. The {{notification}} in <template> can be either “Please specify quantity” or “Quantity updated!”. The value of this data property changes with the life cycle hooks beforeMount() and updated(). The computed totalValue is an automatic way recalculate a value as soon as a data property (in our case quantity) changes. And then there are the data properties like products with dummy data. The input-field is mapped with quantity data property thanks to v-model.

This is how our result looks like. Simplistic and solves the Task/Problem at hand.

We hope you liked our VueJS Practice and learned something new. If you want to get a deeper insight into how VueJS works, consider enrolling in our VueJS Certificate Junior Course.

VueJS Practice – #2 Routing

VueJS Practice – #2 Routing

Learning by doing – VueJS Practice part 2. Let’s take a look at how a possible school-like question on your VueJS Test would look like. And how you would go about solving it. Btw if you want to dive deep into VueJS 2, take a look at our VueJS Certificate Course.

Problem

You need to create routes for the Vue-Components that we created in the previous VueJS Practice. Create a vue-route (use Vue-Router) for each of the following Components:

  • AssetsDetail.vue and AssetsList.vue
  • ProductsDetail.vue and ProductsList.vue
  • UsersDetail.vue and UsersList.vue

Routes for “*Detail.vue” Components must have a url parameter “id”. Router for “*List.vue” Components must have a url parameter “page”. Also, create a Vue Component called “navigation/TopMenu.vue” where you generate a list of router-links to the previously created routes; use a programmatic approach.

Hint

  • Vue-Router is the obvious choice for a simple routing task like this.
  • Regarding URL Parameters you cheat by reading about Dynamic Routing at Vue-Router Official Docs.

VueJS Practice – Solution

To define your router with Vue-Router, you need to write your routings to router.js. Here is how our prototype looks like.

import AssetsDetail from './components/assets/AssetsDetail.vue'
import AssetsList from './components/assets/AssetsList.vue'
import UsersDetail from './components/assets/UsersDetail.vue'
import UsersList from './components/assets/UsersList.vue'
import ProductsDetail from './components/assets/ProductsDetail.vue'
import ProductsList from './components/assets/ProductsList.vue'


export default new VueRouter({
    mode: 'history',
    routes: [{
            path: '/asset/:id',
            name: 'AssetsDetail',
            component: AssetsDetail
        },{
            path: '/asset/list/:page',
            name: 'AssetsList',
            component: AssetsList
        },{
            path: '/user/:id',
            name: 'UsersDetail',
            component: UsersDetail
        },{
            path: '/user/list/:page',
            name: 'UsersList',
            component: UsersList
        },{
            path: '/product/:id',
            name: 'ProductsDetail',
            component: ProductsDetail
        },{
            path: '/product/list/:page',
            name: 'ProductsList',
            component: ProductsList
        }
    ]
})

The TopMenu.vue Component has two benefits. First, it helps you debug your router.js while you are creating your routes configuration. Second, you can import the TopMenu to the most Upper VueComponent. This ways, if a route changes, your will have adjust the TopMenu.vue only, and the whole App will be updated. This is what i came up with for the Menu.

<template>
  <div id="menu">
    <ul>
      <li v-for="(key, item) in menu" :key="key">
        <router-link :to="item.url">{{ item.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "TopMenu",
  data() {
    return {
      menu: [
        {name: "List of Assets", url: "/asset/list/1"},
        {name: "First Asset", url: "/asset/1"},
        {name: "List of Users", url: "/user/list/1"},
        {name: "First User", url: "/user/1"},
        {name: "List of Products", url: "/product/list/1"},
        {name: "First Product", url: "/product/1"},
      ]
    }
  }
}
</script>

That’s it for our VueJS Practice. If you want more, take a look at our more detailed VueJS Certificate Course.