O'Reilly logo
live online training icon Live Online training

Introduction to Vue.js

Use the Progressive Framework to build complex or simple web applications

Nacho Anaya

This course is a brief, but deep introduction to Vue.js. We will cover the bases of this powerful and progressive framework which could be your best friend for building complex or simple web application. We are going to review the concepts, patterns, features and why Vue.js broke the existing MV* paradigms to became one of the most popular open source projects.

This course covers the key concepts to start using Vue.js as part of your front end stack. We will start from zero with DOM manipulation: using directives, expressions, view model, event handling and much more. Then we will move to the most amazing feature of Vue: the component system. You will learn how to create our own components, how to reuse them and how to modularize your app in atomic pieces of code.

After this brief introduction, you will see how to use Vue.js in the right way, mixing vue-cli with modern Javascript tools to create web apps using a professional approach without configuration or complex setups.

During this process you will also learn how to interact with REST API’s using fetch, share data between components (and make them interact with each other), setup vue-router to create single page applications, a set of best practices / tips to improve your development workflow and how to move your app to a production environment.

After this course, you will be able to use Vue.js in any kind of web application and handle the whole development process from setup to production.

What you'll learn-and how you can apply it

  • Work with Vue.js in the most simple environment and learn how DOM manipulation and component system work.
  • Work with Vue.js in a professional environment, set up a new project with vue-cli and understand how to use this powerful tool.
  • Understand how to interact with any REST API to exchange information with your backend.
  • Share information between web components and understand how they interact with each other.
  • Setup the vue-router to create simple page applications.
  • Deploy your Vue.js app to production using Now

This training course is for you because...

You are curious why people love Vue.js, and you want to build a simple prototype or a large scale SPA. You will not only learn a new tool or skill, but you will also learn how to use it correctly.

Prerequisites

  • Intermediate JavaScript knowledge
  • Basic understanding of HTML and CSS?

Preparation

The main preparation is to have a basic understanding of how web development works. Know enough CSS and HTML to create simple stuff and have a good knowledge of JavaScript and ES2015 (and beyond) features. Things like shorthand methods, destructuring, arrow functions and promises are part of the content of this course.

Materials, downloads, or Supplemental Content needed in advance

  • Github repo with materials (https://github.com/TrainingByPackt/Beginning-Vue.js)
  • Node.js LTS
  • Git
  • Any web browser with Vue Tools installed (chrome recommended)
  • Any text editor (VS code recommended)

About your instructor

  • I am Full Stack Developer, Tech Trainer and Speaker. I have been working, teaching and spreading JavaScript technologies for more than 8 years. Right now, I am mostly working with JavaScript, Vue.js, Node.js and Blockchain at @BloqInc, but I like to contribute to any kind of dev community or OSS project.

    I love coding, teaching and field hockey. When I am not working or traveling, you can find me playing hockey in Buenos Aires. I am also part of the @Auth0 Ambassadors program and the Organizer of @Vuenos_Aires Meetup.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

DAY 1

Section 1: Hello Vue & Declarative Rendering (50 mins + 15 mins Lab)

  • Lecture: Create a hello world application with Vue.js and review the declarative rendering feature: all the ways and alternatives we have to manipulate the DOM
  • Lab 1: Create the first and most basic Vue.js application using Codepen. Then explore all features and patterns that Vue.js provides for DOM manipulation.

Break: 10 mins

Section 2: Modularize it with the Component System (60 mins + 20 mins Lab)

  • Lecture: How can we create small, atomic and reusable pieces of code. The advantages, the good parts and how can we split our application into small web components.
  • Lab 2: Create the first web (and reusable) component using the same Vue.js application at Codepen. Then explore all features and patterns that we can use to split and modularize applications using Vue.js

Break: 10 mins

Section 3: Vue.js The Right Way (60 mins + 15 mins Lab)

  • Lecture: Install vue-cli, set up new projects, understand the features of the CLI and learn how the difference between templates. In this lesson, you will create a new app using the professional approach.
  • Lab 3: Review de basic commands and use the tool to create our first Vue.js app using a more professional approach. Then move the hello world app created at Codepen to this new structure. Check and explain all the configuration files and how can we extend the default behaviour. Finally, structure the application for the future labs.

Q&A session (10 mins)

DAY 2

Section 4: Relax going SPA (60 mins + 20 mins Lab)

  • Lecture: What is vue-router, how it works and how can we use it to convert our traditional web into a SPA.
  • Lab 4: Install and setup vue-router to the existing Vue.js app. Create new routes and components for each of those routes.

Break: 10 mins

Section 5: Fetching Data (60 mins + 20 mins Lab)

  • Lecture: Interact with a REST API, see how we can consume data from a backend and different approaches to structure and build the business logic of the project.
  • Lab 5: Create the services layer of the application and integrate it with a REST API. Add interaction between existing components/pages and the API service.

Break: 10 mins

Section 6: Going Live with Now (30 mins + 15 mins Lab)

  • Lecture: Deploy the application to production using one of the most popular cloud alternatives.
  • Lab 6: Get the application production ready, compile it and deploy to production through now cli.

Wrap-up: Summary, Discussions (30 min)

  • Takeaways about Vue.js, use cases, tips and how to move forward after the session.