Overview

Vue.js is a relatively new frontend JavaScript framework that is as powerful as its major counterparts Angular and React. However, Vue.js has a simpler syntax, has less overhead and is faster to learn. Vue.js is used by companies like Nintendo, Alibaba, L’Oréal and countless other (e-commerce) companies. A website in Vue no longer consists of separate, linked HTML pages, but of several relatively small, specialised web components that work together to form a complete application.

The training course Vue.js Fundamentals will learn you the basics of Vue applications and the structure and architecture of Vue projects. Of course you will also work with code and learn everything about data binding and component styling. You will learn how components communicate with each other via props and events, and you learn how to use Vue Router to set up larger applications. Attention is also paid to communicating with external APIs and the way in which data from external sources is processed in the application. Finally, we discuss state management with Vuex and deployment of applications to a production environment.

After the training you know the Vue.js ecosystem and you can set up, expand and roll out Vue applications to production yourself.

Target Audience

The training Vue.js Fundamentals is meant for web developers who want to work with this new framework and have a thorough basic knowledge of HTML, CSS and JavaScript. Also, developers who have a background in Java or C# can usually quickly get on with Vue.js. However, it is important that your JavaScript knowledge is up to par as we will be working in JavaScript solely.

Prerequisites

• Some knowledge of HTML and CSS.
• Thorough knowledge of JavaScript (functions, arrays, objects, functional programming).
• Experience with debugging web applications in Google Chrome.
• Experience with a backend MVC-framework like .NET MVC, Java Spring Boot or PHP Laravel, or a frontend framework like Angular of React may come in handy, but is not absolutely necessary.
• Some knowledge of NodeJS, working in a command line environment (DOS-prompt) and installing NPM-packages.
• Some knowledge of the English language. Many websites, documentation and background information are only available in English.

Course Objective

After this training you know the Vue.js ecosystem and you will be able to set up Vue applications yourself, maintain applications of others, expand and roll out applications to production.

Table of Contents

• What is Vue, overview of the Vue landscape
  • Vue 2x. vs. Vue 3.x
  • What a Vue application looks like
  • Tooling – working with Vue CLI, Vue Devtools and the Style Guide
  • Your first Vue project
• Setting up the environment
  • Creating a project with the Vue CLI
  • Starting the project
  • Customize the homepage
• Vue components
  • Global components vs Single File Components
  • Creating components yourself
  • Load data into the application
  • Data binding with {{ … }}
  • Attribute binding with v-bind
  • Event binding with v-on
  • Shorthand notation for binding, : and @
• Advanced components
  • Computed properties
  • Conditional binding with v-if and v-show
  • Repeating and loops with v-for
• Component styling
  • Global styles vs scoped styles
  • Conditionally applying styles
  • Conditionally applying classes
  • Reuse code with mixins
  • A look at the Composition API (Vue 3)
• Inter-component communication
  • Working with custom properties (props)
  • Typing and validating props
  • Working with custom events
• Vue Router
  • Installing and setting up the router
  • Refer to linked pages
  • Working with route parameters
  • Setting up HTML5 history mode
  • Allow or prohibit routing with guards
• Managing state with Vuex
  • Setting up a Vuex store
  • Change the store state with Mutations
  • Retrieve and display items from the store
  • Use Actions to work with APIs and asynchronous data
  • Working with Promises and Actions
  • Organize the store with modules and namespaces
  • State Management in Vue 3.x – Working with Pinia
• Deploy a Vue application to production
  • Creating a basic build with Vue CLI
  • Using environment variables and build modes
  • Deployment to a production server
  • A few words on WebPack configuration

Course materials

The course material consists of self-developed slides and handouts, exercises and labs, and numerous example projects and code. The distribution in the training is approximately 50% instruction and 50% hands-on practical experience. During the course and afterwards the trainee has access to a Github repository with all examples and lab code.

Installation requirements

• A modern PC with Windows, MacOS X or Linux and Google Chrome as a browser.
• An editor the trainee likes to work with. We recommend Visual Studio Code (free) or JetBrains WebStorm (30-day version available).
• NodeJS 8.9 or higher installed.
• Administrator rights on the PC to install packages via NPM (not behind a proxy or firewall).
• Free access to the Internet.
• No additional software or VM needs to be installed.