Vue.js 2 Academy: Learn Vue Step by Step
3.9 (172 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,023 students enrolled

Vue.js 2 Academy: Learn Vue Step by Step

Learn vuejs in a practical, project based approach. Also covers using the Vue-CLI & Firebase storage
3.9 (172 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
1,023 students enrolled
Created by Chris Dixon
Last updated 5/2018
English [Auto-generated]
Current price: $104.99 Original price: $149.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 8.5 hours on-demand video
  • 1 article
  • 3 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Understand the Vue framework
  • Add vue js to existing web sites or apps
  • Build complex, scalable single page applications
Course content
Expand all 102 lectures 08:30:29
+ Introduction & Getting Started
3 lectures 06:52

Welcome to the Vue.js academy course!

This course is designed to take you from a vue.js beginner, to competent vue.js developer.

This will be achieved in a practical, project based approach where you will learn by building real examples and projects.

Let's begin!

Preview 02:45

Let's take a moment to look at exactly what vue.js is, and how using it can benefit us.

What is Vue & why should I learn it?

To get started with this course and Vue.js, we only need a few things.

This video covers popular text editors and web browsers required for the course.

We also look at Visual Studio Code, which we will be using, along with a plugin to allow Vue JS 2 snippets and syntax highlighting.

Visual Studio installation
+ Vue Basics: Guest List App
16 lectures 01:00:23

Welcome to this new section and Vue.js project!

Section intro

You will find the starter project for this section attached to this video.

I am going to place my folder on the desktop for easy access but it can be added anywhere you want to. 

Using a started HTML project will allow us to dive straight into looking at when Vue.js can offer us!

Download project starter

Installing Vue.js is simple. Here we take a look at 4 different ways we can include it in our projects.

To begin we add the CDN version to keep things simple.

Installing Vue.js

Now we have Vue installed, we now take a first look at the vue instance.

This is the heart of our vue.js applications and controls all of the data in our app.

We look at how the vue instance is set up and also begin working with el and the data object.

Preview 07:28

This video takes a step back from the code we have been looking at to discuss what is going on behind the scenes.

We look at why the code we write in our templates is different to whet Vue.js renders to the DOM.

We also discuss the virtual DOM and how vue uses this to render more optimally. 

Templates & the virtual DOM

Vue.js provides us with v-model to enable 2 way data binding.

This set up allows us to have a 2 way data flow between our data property and the user interface.

Two way data binding with v-model

Event handlers are a commonly used tool in Javascript applications. Vue.js allows us to add these easily to our code.

We can use all of the standard event handlers we can normally use in Javascript such as onclick, onhover and onsubmit.

This video looks at how we can use onsubmit in Vue to trigger a method when a form is submitted.

We also take a first look at how Vue implements event modifiers such as preventDefault().

Event handling & methods

We now move on to look at how Vue.js renders lists using v-for loops.

We loop through the guestName array and display them to the screen. 

List rendering

Conditional rendering will render content depending on the circumstances, similar to using Javascript if/else statements.

This video looks at how Vue.js handles these conditions by adding or removing text depending on if there are any names on the guest list.

Preview 05:19

This video takes a look at how to use the v-bind directive in Vue.js.

V-bind, is used to add dynamic data to HTML attributes. We use this vue directive to change the background colour to green once the form is submitted.

Binding attributes to elements

Binding styles is a great way to add CSS into our application.

W take a look at adding dynamic styling inline, then move on to adding a style object as a vue data property.

Binding styles

This video shows some of the shorthand syntax you can use with vue.js, specifically for v-bind and v-on.

Vue shorthand syntax

We now cover some new directives which can be used as an alternative to text interpolation.

First, we cover v-text which is used to update the elements text content.

Then we move on to v-html which is used to update the elements innerHTML.

Finally, we look at v-once which only renders data once. This means any updates from the Vue instance will not cause an update in the app. 

Outputting text & HTML

V-show is an alternative way to display content depending on a condition.

This video will discuss the pros and cons with using both v-if and v-show to render content.

V-if vs v-show

Vue.js not only allows us to output reactive data using the interpolation syntax (double curly braces), but we can also use the full power of Javascript.

Vue and Javascript can be used independently or we can even combine the data to achieve almost any result we want!

Using Javascript expressions

Congratulations for getting to the end of this section, hopefully by now you will be getting more comfortable with Vue.js.

Section outro
+ A deeper look at Vue: Guest list app
17 lectures 01:30:08

Welcome to this new section where we will begin to take a deeper look into what Vue.js has to offer.

Section intro

We continue with our Guest List app in this section by adding a progress bar.

This progress bar is increased each time we add a new name to the guest list.

This gives us more practice adding dynamic vue.js data and also binding styles.

We also add a event capacity and restrict the number of names to be added. This gives us chance to add to our vue methods and also use Javascript to work out how full the event is, in a percentage.

Adding a progress bar

Computed properties are a great way to add operations to your vue.js apps.

We can remove code from inside of our templates, and add it to a computed property. This also allows our code to be re-usable.

Computed properties are also aware of any data properties inside of them and will observe them, updating the view when necessary.

Here you will learn the key differences between computed properties and methods and learn when to use each.

Computed properties

Using a watch property is an alternative way to computed properties.

Watchers, observe a data property and will re-render if any data changes.

Watchers can be useful as, unlike computed properties, they can be used to perform asynchronous tasks.


This video covers how we can use the v-on directive to trigger events.

We have access to the full range of HTML events such as keyup and keydown.

Also covered is how vue.js provides us with modifier aliases, which are useful to avoid the need to remember keyboard key codes. 

Key events and modifiers

Vue.js also provides us with a property called filters. Filters are used to apply common text formatting or transformations.

This video looks at how to use single or multiple filters to format the entered names. We also discuss when it is best to use a filter or a computed property.


Index numbers are important to have access to when rendering lists using loops.

Index numbers allow us to access the number of each item stored. This number can easily be accessed by adding a second argument to the v-for loop.

We also look at how to dynamically bind a unique key to each item in the loop, this allows vue.js to better track each item and allows for more accurate updating.

More on looping: keys & index numbers

We can also use as many Vue instances as we link in our apps.

So far, we have only used one to control the whole of our app.

In this video we add a second vue instance, to control a single section. This is an ideal way to split our code up into sections and control related data.

There are some drawbacks though, such as communicating with data from other instances is more difficult.

Using multiple Vue instances

We already know how to loop through arrays, we looked at this earlier in the course.

Now we will take a look at how we can loop through arrays of objects.

You will learn how to use this with the HTML <template> tag to render to the screen.

We will also discover additional arguments vue.js allows us to pass to the for loop, the key and index number.

Looping with objects

Now we know how to loop through an array of objects using vue.js, we use this knowledge to now tailor the navigation to our app.

We add a URL to the object and use this to add links to our navigation.

Earlier in the course we looked at adding keys to loops, here we put this again into practice by using our unique key reference.

Adding our navigation links & keys

When using multiple vue instances, we can not reference data from other instances using the "this" keyword.

There are however some other ways which we will look at.

We can use Javascript to access data properties externally.

Or we also look at how to do this from inside of a vue instances method call.

Accessing vue instances externally

So far we have added our own data properties and methods to the vue instance.

Along with these, Vue.js also provides us with some native properties and methods which we have access to.

This video takes a look at what we can access inside of our vue instance, and also looks at getters and setters before and after creation.

Vue instance properties & methods

In the last video we looked at some properties and methods which are available to us in the vue instance.

One of them is "ref", this allows to to add a reference to an element.

We can then use this ref to access or set the elements data.

Referencing elements with ref

So far, we have linked our vue instances to a HTML element using the 'el' property.

There is also an alternative way, which is to create a string template inside of the Vue instance.

We can then mount it using a Vue instance method called $mount.

Also, we take a look at some of the limitations to using this method.

Using string templates

Vue.js provides us with lifecycle hooks to run some code during various phases of the vue lifecycle.

Here we take a look at the stages of the vue lifecycle, and also when each lifecycle hook is ran.

The Vue lifecycle

In the last video we looked at the vue lifecycle hooks and at which stages they are called.

Now we put them into practice in our app and trigger each one.

Vue lifecycle hooks in action

I hope you have enjoyed this section and your first vue project. By now you should be getting more comfortable with vue.js and what it can do.

Section outro
+ Build Tools & Workflow: Creative Cards App
6 lectures 30:25

Welcome to a new section. I hope you have enjoyed your first vue.js project and are looking forward to starting your next one. 

We will begin by setting this project up with a tool called the vue-cli, which will give us a better workflow by taking advantage of build tools such as Babel and Webpack.

Section intro

We will be creating this next project using the Vue CLI. We will look at this in more detail in the next video.

This video walks through the steps required to install Node.js and NPM which is required for the Vue CLI. As we progress in the course we will also use this Node Package Manager (NPM) to install Vue.js and various other packages to use in our projects. 

Installing Node & NPM

In this video we are going to be using a tool called the Vue CLI to scaffold our projects.

CLI stands for Command Line Interface and it allows us to create a new project with most of the common set up taken care of for us.

Scaffolding projects with the vue-cli

Now we have the vue-cli project set up, let's take a better look at our project structure.

Here we look at all the files and folders which we have, along with the build tools we have such as Babel, for compiling our code, and Webpack to bundle our modules.

Exploring our project layout & build tools

When working with components, the data property inside of the vue instance is different to our last project.

This is because the components can be re-usable but we still want them to manage their own data or 'state' individually.

This video covers the differences in the data property and the syntax we now need to use.

Using the data object with single file templates

Congratulations, you have reached the end of this section. This has been a short, but important section.

We now have our project set up and are ready to move onto building it with components.

Section outro
+ Introduction to Components: Creative Cards App
21 lectures 01:58:44

Welcome to this new section!

We are now going to look at using components in our vuejs apps. And also the important topic of how components communicate with others.

Then finally, we will finish off this section by looking at using slots for content distribution.

Section intro

Components are a really big part of building larger vue.js applications.

They allow us to break up our code into smaller maintainable pieces.

This video takes a deeper look into using components, and looks at how they will work in our next project.

What are components?

Now we have a better understanding of what components are, and how we are going to break up our app into components, let’s get to work on actually creating them.

Vue.js provides us with different ways of creating components, here we take a look at registering components globally.

This means we can create them once, and then re-use them anywhere in our app.

Registering global components

Now we have looked at global components, now we are going to look at how we can register a local component which is only available in the scope of other instances or components.

Registering local components

The third and final type of component we will be looking at is single file components.

Single file components are like the app.vue file which we have been working with.

They contain 3 main sections. They have a template section where we can create the markup to display, a script section to handle and vue.js data and Javascript, and finally, a style section for CSS.

These self-contained components are also re-usable and we will be using this type of component for the rest of the course.

Creating single file components

The CardFront component is the first of our card sections to create. This will be a wrapper for the front section of the card, which we later drop in our text and image components to.

This component will also be one of the sections which we can later switch between to change views.

Adding the card front component

Now we are going to take a look at passing data between components, more specifically data from a child to a parent component

Vue.js handles this by using custom events to pass data to the parent. The parent component then listens for this event and can receive the data passed to it. 

Emit data to parent components

In this application, we want to create components to display the different sides of our greeting card

We also want to switch between these components when the user clicks on the menu links

Using dynamic components allows us to achieve this effect.

We can switch between multiple components and place them in the same mounting point

All we need to do is use the reserved component element

Dynamic components

We are making good progress with our knowledge of how components work.

In this video, I want to create the additional card components.

We already have the cardFront component, but we still need to create the cardInsideLeft, cardInsideRight and the cardBack vue files.

We will be using these as containers for the text and image components later. Also, we will switch these components to change views.

Creating the additional card components

We have our card sections completed now and we can switch between different views by clicking the menu links.

Now it’s time to create the text input components.

These components will be our first reusable vue components, so we can create them once, and use them multiple times in the app as you can see here.

The component itself is pretty simple.

It basically consists of a text area input, it uses 2-way data binding with v-model to update a data property when a user types.

This data property is then emitted to the parent component for us to use when we get to the text output components.

So everything we do for this component, we already know and have covered so far in the course.

Creating the text input component

In the last video we successfully created and registered our new text input component.

Now we are going to continue by adding this component to the front of the card 2 more times.

Even though we re-use these components, they will also have their own data property so they will work independently.

Receiving data from the text input

Now we have the input component receiving data from the user, now we are going to create the TextOutput file, this is going to be the component which displays the text on the card.

Creating the text output component

We already know how to pass data from a child to parent component, we do this by emitting a custom event.

And we already are doing this in our app so we have this part covered.

Next, we need a way to do this the other way around.

The parent component needs to pass this data back to a child component, in our case to the TextOutput component.

We can do this with props, which is short for properties.

Props are custom attributes for passing data to child components.

Passing data with props

When using dynamic components and switching between them like we are here, there is a small problem created which we may need to address.

The problem occurs when we switch the active component using the menu links.    

If we select a different component, such as Inside Left, then return back to the Front, we see the text we added is lost

Also later in the project when we add text and image inputs to all pages, the same thing will happen to these components too.

So why does this happen?

Earlier in the course we looked at the vue lifecycle which is the stages a vue instance goes through from creation to being destroyed.

When we change the dynamic component, the component we move away from is destroyed and removed from memory.

Vue.js provides us with a simple solution to this which is the keep-alive element.

Keeping components alive

This video looks at how scope can affect CSS. We look at how CSS will be applied across all components, and how we change this to restrict the styling to just one section.

Scoping CSS styles

When passing data to child components via props, sometimes we want a way of making sure we are sending the correct type of data to be used

For example, if the child component expects a number to be passed to it, but instead it receives a string, then this can cause problems

Using prop validation is a way to set the requirements for the prop to be received, if the validation fails then vue.js will send out a console error during development.

Prop validation

Our app is now being passed a validated prop which is a number, we can use this number to set from outside, the height we want to text box on the card to be

This prop is called containerHeight and we are going to pass the value to a style object to set the container height using CSS

To do this, let’s set up a computed property inside of the TextOutput component, so it will only re-render when there is a change to the containerHeight prop.

Passing prop data to a style object

We now know how to pass data from the parent to the child component using props

We can also pass data to the child component using a method called slots

Slots are used for what is called content distribution

Often, we need to mix the parent and child components content together, and slots allow us to do this in a controlled way.

Introduction to slots

Now we are going to look a little deeper into how Vue.js handles slots.

First we look at adding fallback data, for if there is no content to insert.

Then we will take a look at scope. Here we look as if the scope of the content is within the parent or child component.

Slot scope & fallback content

So far, we have only used a single slot element.

This single slot as it is, will be used to receive the entire content section which we want to pass in.

Rather than just using a single slot to accept the full content, we can use one or more slot elements, with a special name attribute, to only distribute sections of the content.

Named slots

I hope you have enjoyed this section!

You should now have a better understanding of how components work in Vue.js.

You have learned all about the different types of components, passing data between components, props and slots to name a few.

Section outro
+ Components Continued & Firebase Storage: Creative Cards App
23 lectures 02:25:38

Welcome to this new section.

We are now going to be stepping things up by taking a deeper look at components, and also dive into Firebase to store the user uploaded images.

The app will also be completed by the end of this section, including all of the components and finishing touches, such as making the images draggable, and also editing the text.

Section intro

This project will take advantage of using Firebase's storage feature. Firebase is also great for adding databases and authentication to our app.

Firebase works with any framework including Vue.js projects.

In this video we will set up our Firebase project, and add our config settings to our project.

Setting up Firebase

Hopefully now you should have Firebase initialized in your app with no console errors

If you do, then you are ready to create the ImageUpload component

This component, will be responsible for doing a few things:

  • It will have a HTML file input to allow users to select an image from their system
  • It will also push the selected image to Firebase
  • It will have a progress bar to show the progress of the upload to Firebase
  • There will be an image preview thumbnail
  • Also, it will have a button to then confirm we want to use this selected image
  • Then finally, it will emit the name of the image selected to the parent component

Later, this image name will be passed to the ImageOutput component to download the file from Firebase  

Creating the Image Upload component

We have now set up the component button which allows the user to select a file from their system.

We also need to push this image to Firebase for storage.    

This functionality can be added to a method, which is called when the file input is triggered, we can detect this with the on-change event handler.

We look at the Firebase ref() and put() methods to allow us to send this selected image to Firebase storage.

Uploading images to Firebase

We are making good progress with our Greeting Card app, the next step I want to take is to take the image file data which we now receive, stored in the file data property, and display an image preview on the screen.

To do this, we are going to take advantage of the Javascript FileReader object.

We will use FileReader, to read the contents of the image file we provide it.

We then pass the result of the event to our <img> tag as a src attribute.

Image preview thumbnail

We can now select an image from the user’s computer and successfully upload to Firebase

Also, we have a small image preview under the file uploader

We are going to do 2 things in this video:

  • First, create a HTML progress bar to display to the user the progress of the image upload to Firebase
  • Then second, we want to $emit the name of the file to the parent component

This is important because when we create the component to display the image on the card, we need to pass the name of the image to it via props, so it can download the correct image from Firebase

Upload progress bar & $emit file data

We now have all we need to enable us to create the ImageOutput component to actually display the image on the card. So now let's create the image output component to display the image.

This component will receive the prop with the image name from the parent component, then in the next video we will use this name to download the correct image from Firebase.

Image Output component

Well done for reaching this stage.

We have covered a lot so far and I hope it makes sense.

If you are still struggling to understand, don’t worry too much.

As you keep going with this course you will get lot’s more chance to practice, and you have already covered most of the core concepts of vue.js.

In this video, we are going to download and display the image to the card.

Already, we are being passed the image name via the displayImage prop.

We can set up a watch property to detect changes caused when the user uploads a new image.

Inside of here we want to communicate with Firebase to download the image to display on the card.

Downloading images from Firebase

We have added a “Set Image” button in the HTML but we have not wired it up to do anything yet.

The purpose of this button is to do 2 things:

  • First, it allows the user to confirm they want to use the image from the thumbnail
  • Also, as we mentioned in the last video we are trying to download an image before it has the time to upload to the server
  • This button can also solve this problem if we use the button to $emit the file name
  • We can hide the button and only make it visible when the progress bar is at 100%
Set image button

We are going to return to out text output component now and add an options menu.

The menu will appear when the user hovers over the text with the mouse to allow us to change font size, text alignment, and even add bold or italic options.

In this video, I am going to begin by setting up the menu to appear on hover, and also add font size options.

Text options menu: font sizes

Our menu is now appearing when we hover over the text and we also have successfully added a select input to change the font size.

Now we can continue with the menu and add some more options, specifically 3 buttons to set the text alignment.

It will follow a similar process to the select box but this time we will use radio buttons.

Text options menu: text alignment

Now it is time to finish off our hover menu by adding options to change the text to be bold and italic.

We can’t use a radio button like the last video, because we want to be able to select both bold and italic at the same time, radio buttons only allow one to be selected.

This can be achieved using checkboxes instead.

Text options menu: font style & weight

In the next few videos I am going to add some extra functionality to finish off our image component.

To begin, I want to add a button which appears when the user hovers over the image, to allow the image to be removed.

Once removed this will set a default placeholder image onto the card.

Remove image button

We have already looked at parent child component communication.

We know a parent passed data to a child using props, and also a child passes data to the parent with custom event.

There is an alternative too, which I want to make you aware of and this is using callback functions.

Passing data with callbacks

All of the image functionality is nearly in place now.

One of the problems we have mentioned is if we upload an image which is larger or smaller than the card container, it doesn’t look too great.

We can add jQuery into our app to easily make our image draggable by the user.

If you are not familiar with jQuery, it as a Javascript library which allows us to easily add features such as DOM manipulation, animations and event handling to name a few.

Making images draggable

The card front section we have been working on so far is now completed.

We can now re-use the text and image components to put together the different sides of the card, beginning with the inside left.

The inside left is a simple section which has a text input and a full height text output so the user can add a block of text.

Finishing the CardInsideLeft component

Now we are going to move onto the inside right of the card.

Again, this should be pretty straightforward as we have already done most of the work.

 We just need to add 3 text input and output component to make this up like we see here.

So, it is pretty much a repeat of the inside left, but we need 3 components and 3 data properties too.

Finishing the CardInsideRight component

We are now getting toward the end of the project so well done for getting this far.

The back is the last side of the card we need to finish and it will look like this.

Again, it should be simple because we have already completed the components which make this up.

We need to add the image upload and output, then just a simple copyright logo to finish things off.

This would be a good chance to give this a go yourself by adding the image upload and output components, just remember this one need a callback method too to clear the image just like we used in the card front component.

Finishing the CardBack component

When looking at components in this last few sections, we have looked at how parent-child components can communicate.

We know we pass data from the child to the parent with custom events.

Also, we know we pass data back from the parent to the child using props.

This works well if the components which are to communicate are only 1 level apart like so far in the app.

For example, the text input and output components are direct children of card front.

This makes communication easy to achieve.

However, there are often circumstances where components are nested 2 or more levels apart and need to communicate.

This is common as our app grows. For this vue js provides a solution called the event bus.

Introduction to the event bus

We now have a Section Completed component and the event bus set up.

In this video, we are going to import the event bus into this component file, then $emit a custom event back to the event bus.

Sending events to the event bus

We have now sent data to the central event bus using $emit to send custom events.

Now we will be creating the final component of this project which will be the progress section inside of the header.

This component will also use the event bus, but this time to listen for the event and use the data from it.

Receiving events from the event bus

As our app grows bigger there may sometimes be situations where components will need to re-use the same code.

Usually, it is not good practice to repeat the same code more than once.

Inside of our app, if we look inside of the CardFront and CardBack components, we do repeat some code such as the clearImage method.

To help with this, vue.js provides us with mixins.

Mixins are an easy way to take any of the functionality from our components, this includes anything such as our data, methods and computed properties, and place in their own separate file.

This file can then be imported into each component which needs access to it.

Adding mixins

Congratulations on getting to the end of this section and the project.

You should now be really comfortable using vue.js and creating projects using it!

I would encourage you to keep going and continue to build some more projects of your own, feel free to share them with me too!

Section outro
+ Transitions & Animations
14 lectures 56:57

Welcome to this brand new section!

We are going to take a break from adding new features to our app and components to look at some ways to really make our app a lot nicer to use.

This section is all about adding transitions and animations.

This is a great way to make your apps look a lot more polished and really improve the user experience.

So I hope your looking forward to this new section….

Section intro

When working with enter-leave transitions, there are 6 classes which are applied during various stages of the transition.

We have 3 for the enter phase which deals with the starting, ending and also the active phase.

The same also applies for the leaving phase where we also have access to the starting, leaving and active classes.

Here we take a look at what each of these do in a simple example.

Transition classes

Now we have a basic understanding of the transition classes, I am now going to head back to the Creative Cards application to put this into practice.

Here, we take a look at the <transition> wrapper element, provided by Vue.

We also look at adding custom transition names too.

Adding CSS transitions

Along with transitions we also have the option to add animations too. Animations allow us to gradually change from one style to another.

We could gradually change an element from one color to another. Or for this example, I am going to add a scale effect to the “remove image” button.

This means the button will begin small and grow to be full size when the mouse hovers. Then when the mouse leaves the button will shrink out of view.      

For the animation, we need to setup the @keyframes rule. We need to set up keyframes to control the steps of the CSS animation.

Adding CSS animations

We are not limited to adding transitions and animations to just elements, we can even transition between components when we click on the menu links  It starts with the familiar <transition> wrapper which we can still use with the <keep-alive> tags.

Vue,js also provides us with transition modes too, to declare if we want the components to be removed before the new one enters, or the other way around.

Component transitions & transition modes

During this section, we have used CSS to create animations and transitions in our app.

Vue.js also provides us with Javascript hooks which we can use during certain phases of the transition.

If you remember from earlier in the course, we looked at how we could use hooks during various lifecycle stages, well transition hooks work like this too.

By using these hooks, we have access to all the features which Javascript offers us, not limited to just applying CSS.

Javascript hooks introduction

Now we know what hooks we have available to us during the transition, we can add them to our app.

I am going to use them to add some instructions to our app.

These instructions will simply tell the user to edit the section on the left, and the changes will appear on the card on the right To do this, I am going to go over to App.vue, and add an enter hook to the components transition.

We will also cover when and why we should tell vue.js if we are using both CSS and Javascript together during transitions.

Javascript hooks in action

We have looked at using both transitions and animations independently so far. Both of these can also be mixed to work together too.

We will do this in this video, by mixing both together and also look at how we can set they transition type, to declare which takes priority.

Mixing animations & transitions

So far when using transitions, we have used the classes provided to us by vue.js such as v-enter and v-leave.

This is ideal for a lot of cases but there may be times we want to use our own custom CSS classes.

These situations can arise, particularly when using third party libraries for animating.

Animation libraries, such as animate.css work by including the library as a CSS file, or by using  CDN link to the library.

Then to access the animations, we use custom class names for each animation, such as class=”bounce” for example.

We can’t add this custom class name using the hooks provided, however, vue.js provides to us custom classes to replace each transition class.

Custom transition classes

When our app loads for the first time, the card appears in with no styling.

When we switch between components we have added a fade effect.

It would be nice if we could also fade the card in when the app loads up too.

To do this vue.js provides us with the appear attribute.

We can simply add this attribute inside of the <transition> element.

Also, we take a look at how to override the default transition by adding our own custom class names for appear.

Initial render transitions

The transitions we have looked at so far have only involved a single element

For example, the “remove image” transition was a single button element.

Also, the text options we faded in and out, although this had many elements nested, there was a form as the main outer element.

 We can also transition between 2 separate elements too, common need for this is when used with v-if and v-else.

Element transitions & keys

In the last video, we mentioned adding transitions to a list, such as how we do here with the v-for loop, work a little differently.

For this case, vue provides us with the <transition-group> element.

We also take a look at how this element automatically adds a <span> element, and also how we can change this if required.

Group transitions

If you remember from earlier in the course when we created the guest list app, we set it up so the names added are arranged alphabetically.

When we add in a new name, the rest of the names jump out of place to allow the new name to be inserted.

Rather than these names jumping, this moving of the elements can also be animated using the v-move class.

V-move class & dynamic transition names

Congratulations on getting to the end of this section.

I hope you have enjoyed learning all about how we can add transitions and animations to our projects.

Hopefully you can now see, that even just adding some small effects to our apps can really finish them off and make them look and feel a lot nicer for the user.

This is another great feature of the vue.js framework and I hope you have enjoyed this section…

Section outro
+ Thank You
2 lectures 01:22

Thanks for taking the Vue.js Academy course.

I hope you have enjoyed this course and gained a lot from it!

Thank you
Keep on learning
  • A willingness to learn new things
  • Basic computer knowledge, such as saving, renaming, copying files etc
  • You should know basic HTML & CSS
  • A basic Javascript knowledge would be of benefit

Take your HTML, CSS & Javascript skills to the next level by learning one of the hottest Javascript frameworks available today, Vue.js!

Course updated:

October 17: New Section (Transitions & Animations)

September 17: New videos (Event bus & Adding mixins)

If you are unfamiliar with vue.js, or Javascript libraries and frameworks in general, some of the questions you may be asking is:  

What is Vue.js?  

And why should I learn it in the first place?  

Vue.js is a really fun and easy to use Javascript framework for building user interfaces  

The core of the framework is very lightweight and fast, and it can be used in projects of any size  

From easily dropping it into an existing website or application to just control a part of it such as adding new components,  

Right through to medium or large single page applications  

Considering the lightweight size of the vue.js core, it is still packed full of features which you will learn about during this course.

During this course you will build 2 fun, exciting and challenging projects, to apply everything you will learn instantly.

We begin with a guest list app where users can add their name to an event guest list. This is a simple app but will guide you through all of the vue.js essentials such as:

  • Two way data binding

  • Event handling

  • Templates and the Virtual DOM

  • List & conditional rendering

  • Binding attributes & styles

  • The Vue instance 

  • Javascript expressions

  • Instance properties: Data, Computed, Watchers, Methods, Filters etc

  • Looping & filters

  • Refs and other instance properties and methods

  • Vue lifecycle

  • Plus much more!

You will then build on this knowledge, by building a greeting card application, where the user can create and edit their own custom greeting card. They can add their own text and images to create a personalised card.

This project introduces more concepts such as:

  • Components (local, global and single file)

  • The Vue CLI for scaffolding projects with build tools such as Webpack & Babel

  • Installing Node & NPM

  • Passing data with $emit 

  • Storing & retrieving images from Firebase

  • Props and prop validation

  • Slots and slot scope

  • Binding to menu options to change fonts & styles

  • Event bus

  • Mixins

  • Plus much more!

So are you ready to learn one of the hottest and most upcoming Javascript frameworks available?

Join me now and I look forward to having you on board!

Who this course is for:
  • An existing website creator, designer, developer looking to learn a new Javascript framework
  • Somebody looking to improve their Javascript knowledge
  • Students who want to keep up with modern Javascript frameworks
  • Anybody looking for an enjoyable, yet powerful tool for building both simple and complex web applications