We may earn an affiliate commission when you visit our partners.

Master Vuejs from scratch (incl Vuex, Vue Router)

Are you a javascript / frontend developer looking forward to improve your fields ? Search no more . Vuejs is the most popular javascript framework in 2018. Yes, it is, and it keeps increasing in popularity and more and more companies keep adapting it.

Vue-js is really In this short 5-hour course, I will take you from beginner to master in vue-js. I will teach you everything you need to be able to build applications with vue-js. After taking this course, you will have and know everything you need to build your own real world vue-js applications.

We are going to cover topics like

Reactive vue data
Displaying data
Form data collection
Displaying data sets
Event handling
Components
Props
Component reusability
Asynchronous api calls
JWT Authentication
Login & Signup
Pagination
Loading state
Error handling
Frontend css frameworks integration
Vue-cli
Application deployment

You'll build real world projects and solutions in this course to be able to build your own projects. Go ahead and enroll into this course and start learning immediately. By this time tomorrow you can complete this course and add vue-js to your skill set.

I'.

Enroll now

Or start a personal plan

And upskill your team with Udemy

Here's a deal for you

We found an offer that may be relevant to this course.

Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.

Use code at checkout. Valid until January 1, 2025

New customers offer

Visit Udemy from OpenCourser as a new customer and claim these savings on your first order.

What's inside

Learning objectives

Build real world vuejs applications from scratch
Integrate frontend frameworks with vuejs applications
Use vue-cli 3 for more scalable and productive vue-js application development

Handle authentication workflows in vuejs applications
Build vue applications based on real world rest api communication

Build real world vuejs applications from scratch
Integrate frontend frameworks with vuejs applications
Use vue-cli 3 for more scalable and productive vue-js application development
Handle authentication workflows in vuejs applications
Build vue applications based on real world rest api communication

Syllabus

Introduction

Links to the source code for all sections

Installing vuejs

Creating our first vue instance

Creating a dynamic footer

Introduction to reactive data

Introduction to event listeners and methods

Conditionally displaying elements

Introduction to computed properties

Build a currency converter

Setup application structure

Get list of currencies

Caching currencies to limit api requests

Populating currencies to select lists

Getting form elements data

Converting currency

Conditionally disabling convert button

Adding button loading state

Fix amount bug

Vuejs components

What are vue components

Introduction to props

Looping through components

Child to parent component communication

Stateful vue components

Build a shopping cart

Installing vue cli

Understanding the vue project structure

Creating the shop layout

Creating the product component

Displaying product via props

Adding products to cart

Disabling product button after adding to cart

The cart component

Remove items from cart

Displaying cart total

Build a complete community blog app

Introduction to vue router

Setting up bootstrap

Using router link

The login component

Getting user form data

Api requests in vue apps

Handling successful registration

Displaying auth user data

Displaying registration errors

Add signup loading state

User login

Handling user logout

Adding toast notifications

Authentication guards

Displaying a list of articles

Passing props to article component

Single article page

Single article details

Add disqus comments

Implement home page pagination

Creating articles

Uploading images to cloudinary

Vue cli environment variables

Article categories

Saving article to api

Deploying to netlify

Understand and use vuex

Master vuex !

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Taking this course to completion with proficiency allows learners to build their own real-world applications and to add "Vue.js" to their skill set

Covers topics that are standard in industry and that are highly relevant to real-world "Vue.js" applications

Teaches skills, knowledge, and tools that are core to "Vue.js" and to frontend engineering

Instructor has experience and a recognized presence in the industry

Starts with beginner-level content and moves into intermediate and advanced topics

Teaches both the fundamentals and advanced concepts of "Vue.js"

Save this course

Save Master Vuejs from scratch (incl Vuex, Vue Router) to your list so you can find it easily later:

Save

Reviews summary

Practical vue.js foundation

Learners say foundational content is presented in a practical way in this practical course on Vue.js. They appreciate the first principles approach as it helps complex concepts be more easily understood. Students remarked that the course content is informative and the instructor is knowledgeable and helpful.

Knowledgeable and helpful instructor.

"Thanks"

Informative course content.

"The title of the course was exactly what I have experienced."

"First principles approach helps to understand the more complex concepts."

Practical course content.

"The title of the course was exactly what I have experienced."

"First principles approach helps to understand the more complex concepts."

"Thanks"

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Master Vuejs from scratch (incl Vuex, Vue Router) with these activities:

JavaScript Refresher

Show steps

Review JavaScript fundamentals to lay a solid foundation for your Vue.js learning journey.

Browse courses on JavaScript

Show steps

Review online resources or tutorials.
Practice writing JavaScript code.

Vue.js Crash Course

Show steps

Start your Vue.js journey by following a guided tutorial that offers a comprehensive overview of the framework.

Browse courses on Vue.js

Show steps

Watch the video tutorial.
Try out the code examples.
Build a simple Vue.js app.

Vue.js Meetup

Show steps

Attend Vue.js meetups to connect with like-minded individuals, share knowledge, and learn from others.

Browse courses on Vue.js

Show steps

Find and register for a meetup.
Attend and introduce yourself.
Network and exchange ideas.

Five other activities

Expand to see all activities and additional details

Show all eight activities

Vue.js Study Group

Show steps

Join or create a study group to discuss concepts, share knowledge, and support other students.

Browse courses on Vue.js

Show steps

Find or organize a study group.
Set regular meeting times.
Prepare topics for discussion.

Vue.js Coding Challenges

Show steps

Reinforce your understanding of Vue.js concepts through hands-on coding challenges.

Browse courses on Vue.js

Show steps

Solve coding exercises online.
Contribute to open-source Vue.js projects.

Vue.js Workshop

Show steps

Attend a Vue.js workshop to learn from experienced professionals and gain hands-on experience.

Browse courses on Vue.js

Show steps

Find and register for a workshop.
Prepare for the workshop.
Attend and actively participate in the workshop.

Vue.js Blog Post

Show steps

Write a blog post explaining a Vue.js feature or concept to solidify your understanding.

Browse courses on Vue.js

Show steps

Choose a topic and outline your post.
Write the first draft.
Edit and revise your post.
Publish your blog post.

Vue.js Portfolio Project

Show steps

Build a portfolio-worthy Vue.js project to showcase your skills and expand your knowledge.

Browse courses on Vue.js

Show steps

Plan your project.
Design and implement your app.
Test and deploy your app.

Career center

Learners who complete Master Vuejs from scratch (incl Vuex, Vue Router) will develop knowledge and skills that may be useful to these careers:

Front-End Developer

Front-End Developers take the user interface designs and turn them into responsive, functional websites. This course teaches the fundamentals of Vue.js, which would provide an excellent basis for any aspiring or current Front-End Developer. Using Vue.js, Front-End Developers can build complex web applications featuring interactive user interfaces, dynamic data display, and reusable components. This course teaches developers how to use Vue.js to create both simple and complex web applications. Enrolling in this course will help Front-End Developers increase their value to potential employers and their current company.

See salaries and explore the career path for Front-End Developer

User Interface (UI) Designer

UI Designers are responsible for creating the overall look and feel of digital products, including websites, apps, and software. Having a strong understanding of front-end development best practices is helpful for UI Designers who want to translate their designs into functional products. This course teaches the basics of Vue.js, which could help UI Designers stay on top of current trends and technologies used by Front-End Developers. This course can also provide a solid foundation for UI Designers who want to expand their skill set.

See salaries and explore the career path for User Interface (UI) Designer

Software Engineer

Software Engineers apply engineering principles to the design, development, deployment, and maintenance of software systems. This course would be a great fit for Software Engineers who want to expand their knowledge of front-end web development frameworks. Vue.js is one of the most popular front-end frameworks, so learning its features and capabilities can be a valuable asset to Software Engineers. This course will help Software Engineers stay competitive in the job market and increase their value.

See salaries and explore the career path for Software Engineer

Web Developer

Web Developers are responsible for both the front-end and back-end development of websites and web applications. It is beneficial for Web Developers to continue learning about different front-end frameworks in order to stay competitive in the job market. This course provides a comprehensive introduction to Vue.js, a popular front-end framework. It covers the fundamentals of Vue.js, including its reactive data system, component-based architecture, and routing. With this knowledge, Web Developers can create interactive and dynamic web applications.

See salaries and explore the career path for Web Developer

Full-Stack Developer

Full-Stack Developers are responsible for both the front-end and back-end development of websites and web applications. This course provides a comprehensive introduction to Vue.js, a popular front-end framework. While this course focuses on front-end development, Full-Stack Developers can benefit from this knowledge to expand their skill set. Vue.js is also flexible enough to be integrated with a variety of back-end technologies, so knowledge of this framework can be valuable.

See salaries and explore the career path for Full-Stack Developer

Quality Assurance (QA) Analyst

QA Analysts are responsible for testing the functionality and quality of software products. Although this course emphasizes software development, it may still be useful for QA Analysts who want to expand their testing skills to include testing the front-end of web applications. Having a foundational understanding of Vue.js can help QA Analysts better understand the structure and functionality of web applications, which can lead to more efficient and effective testing.

See salaries and explore the career path for Quality Assurance (QA) Analyst

Business Analyst

Business Analysts are responsible for analyzing business needs and developing solutions that meet those needs. This course may be helpful for Business Analysts who want to expand their knowledge of front-end web development and stay on top of current trends and technologies. Having a foundational understanding of Vue.js can help Business Analysts better communicate with Front-End Developers and understand the technical feasibility of different solutions.

See salaries and explore the career path for Business Analyst

Product Manager

Product Managers are responsible for defining and managing the development of software products. This course may be helpful for Product Managers who want to expand their knowledge of front-end web development and stay on top of current trends and technologies. Having a foundational understanding of Vue.js can help Product Managers better understand the technical feasibility of different features and make informed decisions.

See salaries and explore the career path for Product Manager

Information Technology (IT) Manager

IT Managers are responsible for planning, implementing, and managing IT systems and services. This course may be helpful for IT Managers who want to expand their knowledge of front-end web development and stay on top of current trends and technologies. Having a foundational understanding of Vue.js can help IT Managers better understand the technical needs of their organization and make informed decisions about IT investments.

See salaries and explore the career path for Information Technology (IT) Manager

Technical Writer

Technical Writers are responsible for creating user manuals, technical documentation, and other written materials that explain technical concepts. This course may be helpful for Technical Writers who want to expand their knowledge of front-end web development and stay on top of current trends and technologies. Having a foundational understanding of Vue.js can help Technical Writers better write documentation for web applications and explain technical concepts to non-technical audiences.

See salaries and explore the career path for Technical Writer

Sales Engineer

Sales Engineers are responsible for selling and supporting complex technical products and services. This course may be helpful for Sales Engineers who want to expand their knowledge of front-end web development and stay on top of current trends and technologies. Having a foundational understanding of Vue.js can help Sales Engineers better understand the technical capabilities of the products they sell and provide more informed support to customers.

See salaries and explore the career path for Sales Engineer

Project Manager

Project Managers are responsible for planning, executing, and closing projects. This course may be helpful for Project Managers who want to expand their knowledge of front-end web development and stay on top of current trends and technologies. Having a foundational understanding of Vue.js can help Project Managers better understand the technical aspects of web development and manage projects more effectively.

See salaries and explore the career path for Project Manager

Systems Analyst

Systems Analysts are responsible for studying business processes and designing IT systems to meet those needs. This course may be helpful for Systems Analysts who want to expand their knowledge of front-end web development and stay on top of current trends and technologies. Having a foundational understanding of Vue.js can help Systems Analysts better design and implement IT systems that meet the needs of their users.

See salaries and explore the career path for Systems Analyst

Database Administrator

Database Administrators are responsible for managing and maintaining databases. This course is not as relevant for Database Administrators, but it may still be useful for those who want to expand their knowledge of software development and gain a better understanding of the different components of modern web applications.

See salaries and explore the career path for Database Administrator

Network Administrator

Network Administrators are responsible for managing and maintaining computer networks. This course is not as relevant for Network Administrators, but it may still be useful for those who want to expand their knowledge of software development and gain a better understanding of the different components of modern web applications.

See salaries and explore the career path for Network Administrator

Reading list

We've selected five books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Master Vuejs from scratch (incl Vuex, Vue Router).

Blazor in Action

Save

Provides a practical guide to building .NET applications with Vue.js. It covers topics such as state management, routing, and testing.

C# 10 and .NET 6 – Modern Cross-Platform Development

Save

Provides a practical guide to building C# applications with Vue.js. It covers topics such as state management, routing, and testing.

C# 10 and .NET 6 – Modern Cross-Platform Development

Paperback

Check price

C# 10 and .NET 6 – Modern Cross-Platform Development

Kindle Edition

Check price

Testing Vue.js Applications

Save

Provides a comprehensive overview of Vue.js, from the basics to more advanced topics. It's a great resource for beginners who want to learn the basics of Vue.js, as well as for more experienced developers who want to learn more about the framework.

Testing Vue.js Applications

Paperback

$$$

(中文) Vue JS application test(Chinese Edition)

Paperback

Testing Vue.js Applications

Kindle Edition

Vue.js 3 Design Patterns and Best Practices

Save

Provides a collection of patterns for working with Vue.js. It covers everything from common UI patterns to complex architectural patterns, making it a great resource for developers of all levels.

Vue.js 3 Design Patterns and Best Practices:...

Kindle Edition

Full-Stack Vue.js 2 and Laravel 5

Save

Provides more depth on the Vue.js framework, including topics such as the virtual DOM and the build process.

Full-Stack Vue.js 2 and Laravel 5: Bring the...

Kindle Edition

Help others find this course page by sharing it with your friends and followers:

Facebook

Copy Link

Similar courses

Here are nine courses similar to Master Vuejs from scratch (incl Vuex, Vue Router).

Vue - The Complete Guide (incl. Router & Composition API)

Most relevant

20 Web Projects With Vanilla JavaScript

Most relevant

Nuxt.js 2 - Vue.js on Steroids

Most relevant

Complete Vuejs Course: Vue.js + Nuxt.js + PHP + Express.js

Most relevant

Vue JS 2: From Beginner to Professional (includes Vuex)

Most relevant

The complete VUE JS course ( 2024 edition )

Most relevant

Introduction to TypeScript Development

Most relevant

Micro Frontend Fundamentals

Most relevant

Svelte.js - The Complete Guide (incl. Sapper.js)

Most relevant

Effort

5 total hours

Via

Udemy

Instructor

Frantz Kati

Language

English

Good to know

Taking this course to completion with proficiency allows learners to build their own real-world applications and to add "Vue.js" to their skill set

Covers topics that are standard in industry and that are highly relevant to real-world "Vue.js" applications

Teaches skills, knowledge, and tools that are core to "Vue.js" and to frontend engineering

Instructor has experience and a recognized presence in the industry

Starts with beginner-level content and moves into intermediate and advanced topics

Teaches both the fundamentals and advanced concepts of "Vue.js"

Share and help others discover this course.

Facebook

Link

Don't miss out

Enroll today to gain access to this course

Enroll in this course

Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.