Introduction to Vue.js
Use the Progressive Framework to build complex or simple web applications
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.
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.
- Basic understanding of HTML and CSS
Materials, downloads, or Supplemental Content needed in advance
- Github repo with materials (https://github.com/TrainingByPackt/Beginning-Vue.js)
- Node.js LTS
- Any web browser with Vue Tools installed (chrome recommended)
- Any text editor (VS code recommended)
About your instructor
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.
The timeframes are only estimates and may vary according to how the class is progressing
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)
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.