Vue - The Complete Guide (incl.

- The Basics (including the basic Syntax,

Understanding Templates and much more!)
Router & Composition API)
- How to Output Reactive Data & Listen to
Udemy Events
Level: Vue.js is an awesome JavaScript - Interacting with DOM (Rendering Lists,
Framework for building Frontend Conditionally attaching/ detaching
Applications! VueJS mixes the Best of Elements ...)
Angular + React!
- Setting up a Development Environment and
Commitment: 32 hours total Workflow
Professor: Maximilian Schwarzmüller - Using Components (and what Components
Join this bestselling Vue course to learn how to are to begin with)
use the latest version of VueJS to build - A Deep Dive Look Behind the Scenes of Vue
amazing, modern web apps!
- Binding to Form Inputs
No matter at which metric you look at (Google
Trends, Github Stars, Tweets ...) - VueJS is the - Sending Http Requests to Backend APIs
shooting star in the world of JavaScript
- Authentication & Vue
frameworks - it simply is amazing!
- How to make your App more Beautiful with
This bestselling Udemy course teaches the
Animations and Transitions
latest version of Vue (Vue.js 3) from the
ground up and in great detail. We'll cover all - How to create an awesome Single-Page-
the core basics but we'll not stop thereafter - Application (SPA) with Routing
this course also dives into advanced concepts
like the Composition API introduced with Vue - How to improve State Management by using
3. Vuex

Frontend frameworks like Vue JS are - How to Deploy the App, And much more!,…
extremely popular because they give us this All these topics are taught with real examples
reactive, great user experience we know from and demo projects. This course is full of
mobile apps - but now in the browser! No exercises, challenges and bigger courser
wonder that jobs requiring frontend framework projects that allow you to practice what you
skills like VueJS are amongst the best paid learned.
ones in the industry!
Along with many other smaller projects, we
You may know Angular 2+ and ReactJS, will build a couple of bigger main projects:
well, VueJS combines the best of both
frameworks and makes building anything from - The "Monster Slayer" Game - a game
small widgets to big, enterprise-level apps a running in the browser, 100% powered by Vue
breeze and a whole lot of fun! - The "Learning Resource Manager" - a web
And if you don't know the two mentioned app that allows you to manage (add, delete,
frameworks: That's fine, too, this course does list) your favorite learning resources
not expect any knowledge of any other The "Find a Coach" app - a web app that
frontend framework - you will learn it all allows you to sign up / login, register as a
throughout this Course! This course covers it coach, list and filter available coaches and
all! send messages to coaches
We'll start at the very basics, what Vue.js is Is this course for you?
and how it works before we move on to more
complex and advanced topics but I'll be Now that you know what this course is about,
honest: It's too much to fit it all into one let's see if this course is for you! Here are three
sentence, so here's what you'll learn in this types of students who will love this course:
Course:
Student #1: Has some JavaScript experience
What is VueJS and Why would you use it? and is interested in what this language can do.
You heard and read that JavaScript allows you
to create nice web applications and enhance Vue.js version three and speaking of the
existing web pages. VueJS is your choice! Vue.js version three
I released this course in 2016 with Vue.js two.
Now, since then Vue.js evolved and I
Student #2: You already have some completely updated and rerecorded this course
experience with other frontend frameworks from scratch.
like Angular (2+) or ReactJS. But either due to
interest or disappointment of the existing When Vue.js version three was released simply
frameworks, you seek some alternatives - to give you the best possible learning
VueJS might be what you were looking for! experience. And that's what this course is
about.
Student #3: Has experience with backend
frameworks/ languages but now also wants to Now I would say let's not waste any time,
enter the frontend world. VueJS is an awesome instead let's start with the most important
choice here, it's fun, it uses native JS and it's question first. What exactly is Vue.js?
extremely powerful!
Student #4 Is disappointed by Angular 2+.
Does a good framework need 2 hours of setup? Lecture 2: What is Vue.js?
No, certainly not - as VueJS will prove to this
student!
So what is Vue.js. Vue.js (Vue) is a
Let's dive into VueJS right now! JavaScript framework that makes building
interactive and reactive web frontends, which
are basically web applications that run in the
MODULE 1: GETTING STARTED browser, so in the end what the user sees,
easier.
Lecture 1: Welcome to the course
This is a nice sentence and it would be a
Hi, and welcome to this course. My name is
correct definition, but it might not be too
Maximilian Schwartzmuller, and I will be your
helpful, so let me make this a bit clearer and
instructor in this course.
let's highlight the important parts here.
I will take you from Vue novice to expert, and
And of course, one important part is
I will share all my knowledge with you to turn
JavaScript, Vue.js is for JavaScript and it uses
you into an advanced Vue.js developer.
JavaScript, it's all about JavaScript because
We'll start at the very basics, the core syntax JavaScript is the programming language which
and the question why exactly we need Vue? we can use in the browser.
And we will then gradually build up
We can run it in the browser after a page was
knowledge, dig deeper into Vue and into the
loaded by the user. It allows us to manipulate
advanced concepts it has to offer.
what the user sees on the screen without
And you will therefore learn all about Vue, fetching a new page from the server and that
which you need to build any kind of Vue allows us to provide rich user experiences and
application that you wanna build. I'll come back to this rich user experiences
point in just a second.
Now, this course is not a theoretical course.
We will get our hands dirty, we got plenty of But it's not just for JavaScript, indeed Vue.js is
projects, plenty of assignments and practices, a JavaScript framework, now what does
demo projects. framework mean?
It's all in there so that you learn Vue in a hands A framework, not just in JavaScript, but in
on approach, really writing code yourself. At any programming language is basically a third
least if you want to. party library which means it's code not
written by you, but by someone else which
Of course, you can also just follow along the exposes certain utility functionalities, certain
videos and learn it step by step, by doing that. methods, certain tools, which you don't have to
Now, with this course, you will not just learn write on your own and that's important, unlike
the basics, but all the advanced topics like the a regular library, a framework is a library that
composition API that was introduced with does not just give you those extra
functionalities, but which also gives you a set Now why would we use something like
of rules you could say. It gives you a clear Vue.js? Why would we want this reactive
guidance, a clear approach that you should web frontend?
follow when it comes to building your
application, it basically gives you a clear idea Well, let's take a step back and let's not think
and structure of how to write your application about web applications, let's think about
code, so it's the utility functions plus the rules. mobile applications.

Now, why would we use Vue.js? We also Mobile applications are very responsive, things
have that in a sentence because with it we can happen instantly, we basically have like one
build interactive and reactive web frontends. screen where we add overlays, where we
render lists, we can navigate to different
screens with a smooth animation, it all feels
like one unit you could say.
So mobile apps and also desktop apps feel very
reactive, we don't have to wait for new pages
to load, we don't have to wait for HTML to be
downloaded and rendered by the browser,
instead, the entire user interface is already
there, the entire user interface is part of the
mobile app the user installed and the only
thing that might be loaded behind the scenes is
Reactive is a pretty fancy term, but in the end
data.
what it means is that our app should be very
responsive to what the user does. Now in web apps, traditionally, we click a link
and we wait for a new page to load and that
If a user enters something on the screen, we
happens over and over again.
want to be able to react to that, for example, to
show validation errors below a input field, we We might enter some data in a form, we click a
want to be able to show overlays with warning button, that data is submitted and as a
messages, we wanna give a user a very modern response, we get a new HTML page. So in a
look and feel in our web application. Often we traditional web page, we wait for responses
try to achieve what we know from mobile apps all the time.
and I'll come back to that as well.
So we wanna provide a great user experience
in the end and Vue.js makes it easier for us to
achieve that and the web frontends part is all
the important.
This basically means that Vue.js is involved
with what the user sees, it's not a server side
framework, we don't use it with PHP or with
node, well, we can use it with all of that, but
simply in a combination, but it doesn't help us
write better PHP or node.js code because
vue.js is for the browser side JavaScript. JavaScript can help us here, JavaScript can
speed this up and JavaScript in the browser
With HTML, CSS and JavaScript and allows us to provide a more modern web
possibly Vue.js in the browser, we can control application, a more modern user interface.
what the user sees and we can provide rich
user interface in the web. JavaScript has the huge advantage of running
in the browser on the loaded page, that means
And Vue.js is a framework that helps us with we have a language running in the browser,
building such a JavaScript driven user which can be used to change that page without
interface running in the browser for our web fetching new HTML behind the scenes.
application that might be talking to a server,
but it's all about the browser side code that Instead, we can manipulate the HTML
helps us achieve that. structure, Document Object Model (DOM) of
a page with JavaScript.
 annoying stuff which we would have to do
otherwise.
That's why we use frameworks like Vue and
for the course, this will become obvious once
we dive into all the features Vue offers and
how easy those features make it to build
amazing web applications and user interfaces.

And that means that in modern JavaScript

driven web applications, we're not sending a
request to get a new HTML page, instead, we Lecture 3: Different ways of using Vue?
only do this once and thereafter, we just So, now you have a rough idea of what Vue is
exchange data behind the scenes and we use and why you might want to use it.
client side JavaScript and possibly frameworks
like Vue to update what's on the screen. And In case you're not fully convinced yet, no
we're using solutions like Vue.js because just worries. We'll see it all in action very soon.
JavaScript may not be ideal. There is one important thing to realize about
using Vue, though.
Theoretically, we can build any kind of web
application with just “vanilla” JavaScript, so We can use Vue in two main ways, you could
with just JavaScript without any extra say. We can use it to control parts of an HTML
frameworks or libraries. page and make that part a bit more reactive and
interactive.
So, we could, for example, *control the sidebar
on a page to load elements there dynamically,
or we have a chat overlay, which the user can
open up and that chat overlay is controlled by
Vue.
So, we don't have to control everything on the
page with it. We don't have to use Vue for
everything on a page if we don't have any
No framework like Vue is needed in reality, reactivity. If we don't need an interactive
but it wouldn't be much fun to use just element somewhere on our screen, we don't
JavaScript because we have to write all the have to use Vue for it.
code, all the logic on our own, we have to And we can therefore use Vue to build so-
reinvent the wheel over and over again. called Widgets. And that's not a general term,
We might even write sub optimal code and that's just a term I came up with. We control
introduce errors and bugs because we have to parts of a page by dumping in small Widgets,
write everything from scratch and we have to like a chat screen, like a interactive sidebar,
do these things correctly, otherwise we might and other parts on the page are totally not
have poor performance or security issues. affected by Vue.

Working in a team might also be harder The opposite, the other way of *using Vue
because not everyone knows our code would be that everything on a page is
structure, the philosophy behind our code and controlled with Vue. So, every element is
how to use our code. rendered and controlled by Vue.

And that's why we use something like Vue, it This is the so-called Single-Page-Application
gives us a clear rule set in which we have to approach (SPA) where the server only ever
work, which everyone in a team has to use and sends one HTML page, which includes
we don't have to figure out all the small nitty basically no markup, but all the script imports
gritty details like updating a part on the page, we need importing Vue and our Vue code.
instead, we can focus on our core business
logic with Vue and let Vue do the heavy lifting
of updating the page and of doing all the
 Well, React is one Alternative to Vue. It's
basically also a JavaScript framework, though
officially, it's just a library because it has less
features than Vue actually. It only focuses on
rendering Uis and it misses some features like
routing which Vue offers out of the box.
You will learn what routing is in this course by
the way, and therefore React.js is very popular
indeed. But it actually also depends quite a bit
on community packages whereas Vue has
And thereafter, our Vue code defines what
everything built in.
should be rendered on the screen in the
browser after the page was loaded. Now, Angular is yet another Alternative, yet
another framework which you could use, and it
Now, there also are some mixtures, but you
actually has a bit more features than Vue.
will learn all about that, all about those two
approaches in great detail throughout the So it helps you with even more problems that
course. you could possibly have. It's therefore
especially popular in the enterprise world,
We're going to start with the left approach
though big companies are using all three
because that's easier to get into Vue, but we'll
frameworks.
then also move to the other approach, to the
everything is controlled by Vue approach so
that by the end of the course, you feel
comfortable using either of the two approaches
and you will also know when to use which
approach because it turns out, there is no better
approach.
These approaches are simply good for different
things. And throughout the course, this will
become very, very clear.
There are large companies using React, there
are large companies using Angular and there
Lecture 4: Exploring Vue Alternatives are large companies using Vue.
And like Vue and also like React is component
based, it actually uses TypeScript.
It's also worth mentioning that we have
alternatives to Vue. Vue.js of course, is the Vue also supports this but it's optional. In
focus of this course and here we will learn all Angular, it's basically mandatory. And for
about Vue. smaller projects, you could say that Angular
could be overkill because of all its features, but
Vue will turn out to be a complete component- of course that always basically comes down to
based UI framework. And you will learn what personal preference, I would say.
component-based means throughout the
course, no worries. In general, all three are very popular and used
a lot. Vue is a bit less popular amongst big
And it's a framework that includes basically all companies but there definitely are large
core features you need to build modern web companies using it.
applications.
And attached to this lecture, you also find a
Now you already see that it has one downside, more detailed comparison article which you
and that is that it's a bit less popular than React can dive into, though you will get the most out
and Angular. of this article if you come back to it later, once
you learn a bit more about Vue.
Now we'll get back to the downside in a
second. But of course, the first important For now, it's enough to keep these Alternatives
question is, what is React and what is in mind and then you can explore them once
Angular? you know more about Vue. Because good
news also is, that if you ever would want to
switch to a different alternative, once you
learned one of these three, switching will be
easier because whilst they of course do have
different code which you write, they do have
fairly similar concepts and therefore switching
isn't too hard.
Now these are the Vue Alternatives and now
that's enough of the theory I would say. Why
don't we now simply get started by writing
some Vue code and getting a first feeling for
how Vue works.

Lecture 5: Building a first app with just

Javascript

MODULE 2: BASICS & CORE CONCEPTS

– DOM INTERACTION WITH VUE

MODULE 3: RENDERING CONDITIONAL

CONTENT & LISTS
MODULE 4: COURSE PROJECT: THE
MONSTER SLAYER GAME
MODULE 5: VUE: BEHIND THE SCENES
MODULE 6: VUE: INTRODUCING
COMPONENTS

Lecture 1: Everything you need to know

about this course

Lecture 2: The 2,000 year old “Secret”