In-Depth Vue 3 For Beginners (Inc. Composition API, Router)
A premium training course to teach you all about Vue 3, especially designed for beginners to help build various user interfaces.
Development,Web Development,Vue JS
Lectures -137
Duration -11 hours
30-days Money-Back Guarantee
Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.
Course Description
This course is ideal for web developers with little to zero web development experience. We recommend you learn some basics first. This is also for individuals who are new to Vue.js. This course is not for Vue.js Ninja, probably not unless they want to get up to speed on the latest Vue.js 3 features or just want a course to go through and try out some new projects.
Vue is a JavaScript framework to build user interfaces and single-page applications. This course is focused on the latest version of Vue 3, its important features, and working on 4 projects to implement the skills learned.
Personal portfolio/blog project:
This project strips away the complexities/build tools and focuses purely on Vue.js.
Taking a simple HTML file, we add the Vue library to not only learn the core features but also to see how easily we can add it to an existing website.
Countdown app:
Once you have a solid grounding, it is time for project 2. This is an event countdown app that introduces you to a more sophisticated setup using the Vue CLI.
While building the project, you will learn so much more, including watchers, computed properties, forms, conditional rendering, and teleport, to name a few.
Dashboard app:
Project 3 is a dashboard application with multiple pages, making use of dynamic components.
We will discover different ways of passing data in Vue.js, including provide/inject and the different types of slots available.
Creative cards app:
The last project is a card editing application. You will begin with a library of greeting cards the user can select, and then once chosen, an edit screen will allow the user to edit the text, images, and overall styling as well.
This project will introduce the new Vue 3 Composition API, how to organize your code into reusable files, routing, lazy loading, cloud functions, image uploading, and using a database.
By the end of this course, you will have already built 4 projects and learned all of the essential Vue skills, along with the new Vue.js 3 features and syntax.
The code files and all related files are uploaded on the GitHub repository at https://github.com/PacktPublishing/vue-3-course
Goals
The ability to build single page applications
Understand Vue 3 in depth
A varied range of projects to cover many use cases
How to structure apps with components
How to pass data between components
Front end routing
How to organise your Vue 3 projects with composition
Reactivity
Chunks and code splitting techniques
The difference between Vue 2 and Vue 3
Prerequisites
The class is beginner friendly, however prior experience of basic Javascript will be a benefit
Experience of other programming languages will help. You should be comfortable with HTML, CSS and generally how websites are constructed to get the best out of this course.
Existing React or Angular users should have no problems with this class
![In-Depth Vue 3 For Beginners (Inc. Composition API, Router) In-Depth Vue 3 For Beginners (Inc. Composition API, Router)](https://d3mxt5v3yxgcsr.cloudfront.net/courses/8216/course_8216_image.jpg)
Curriculum
Check out the detailed breakdown of what’s inside the course
Getting to Know Vue
5 Lectures
-
Introduction 01:53 01:53
-
What You will Need for this Course 00:44 00:44
-
What is Vue.js and What can it Do? 02:50 02:50
-
Overview of Vue 3 Changes 04:56 04:56
-
Project Source Code 01:50 01:50
First Look at Vue.js
13 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Component Basics
5 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Build Tools and Single-Page Applications
5 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Countdown Project
12 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Forms, Events, and Modifiers
11 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Validation and a Deeper Look at Props
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Slots and Dynamic Components
13 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Provide/Inject
7 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Introduction to Routing
12 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Composition API
16 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Pushing On with Our Project
20 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Navigation Guards and Lazy Loading
4 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Uploading Images
8 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Deployment
2 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Instructor Details
![Packt Publishing](https://www.tutorialspoint.com/assets/profiles/154467/profile/200_283401-1581924256.png)
Packt Publishing
Course Certificate
Use your certificate to make a career change or to advance in your current career.
![sample Tutorialspoint certificate](/market/public/assets/newDesign/img/primePacks/V-certificate.png)
Our students work
with the Best
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfc bank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfcbank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
Related Video Courses
View MoreAnnual Membership
Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses
Subscribe now![Annual Membership Annual Membership](/market/public/assets/newDesign/img/membership-large-small.jpg)
Online Certifications
Master prominent technologies at full length and become a valued certified professional.
Explore Now![Online Certifications Online Certifications](/market/public/assets/newDesign/img/traning-for-a-team.png)