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

00:37

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

04:08

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

08:06

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

09:26

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

07:49

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.

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

00:37

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

06:55

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

06:40

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

09:44

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

04:11

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

08:54

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

09:09

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

06:15

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

07:20

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

08:00

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

05:03

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

09:56

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

04:21

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

06:40

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

05:48

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

04:50

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

02:48

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

03:39

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

07:26

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

06:51

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

13:05

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

06:51

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!

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

00:31

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

02:58

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

06:47

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

05:58

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

03:23

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

02:03

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

08:51

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

04:59

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

03:14

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

03:07

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

04:45

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

05:43

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

04:06

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…

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