Vue.js tutorial: from beginner to front-end developer

This course will teach you the fundamental concepts you need to start building applications with Vue.js.

Who is this FREE course for?

complete beginners who want to become web developers

experienced developers who want to explore advanced topics

any programmer who likes to learn something exciting

How long is the course?

This course lasts 4 hours and 22 minutes and is divided into 35 lessons in total. You will find that it is a great resource that you will come back to often.

In this course, you’ll learn why Vue.js is a great choice for a front-end framework and discover how to use it in detail.

You’ll start with building the simplest Vue components and learn how to use basic features like data binding, props, events, and calculated properties.

Then you’ll build that knowledge step-by-step with hands-on projects learning how to use the Vue CLI, modules, observers, and custom events.

You will also master key concepts such as the Vue router and the Composition API. By the end of this course, you will be confident that you are using Vue.js for all your front-end development projects.

What will you learn

Vue fundamentals without build tools or toolchains

create applications, define and use options, organize applications into components

learn toolchains

how to load and work with responsive data

how to handle user input and create custom events

manipulate style, create calculated properties

define objects that monitor the data for changes

how to create single page applications using the Vue router

how to use compose api

Follow, learn by doing

I encourage you to take this course and you will get to know it All the most important features of Vue.js

To help, the Vue.js Tutorial: Beginner to Front-End Developer GitHub repository contains the source code for each lesson and the completed example project that was built during the course.

1. What will you learn

Watch the video lesson [0:00:00] ↗

Get an introduction to the course and an overview of what you’ll be building.

2. Vue.js without tool-chain

Getting started with Vue

Watch the video lesson [0:02:31] ↗

Vue.js is the most accessible UI framework, especially without using tool chains.

Here is the full source code for a minimal, toolchain-free Vue.js hello world app.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Basics</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="content" class="container">
        <h1>{{ pageTitle }}</h1>
        <p>{{ content }}</p>
    </div>

    <script>
        Vue.createApp({
            data() {
                return {
                    pageTitle: 'Hello, Vue',
                    content: 'Welcome to the wonderful world of Vue'
                };
            }
        }).mount('#content');
    </script>
</body>
</html>

Using loops to generate content

Watch the video lesson [0:10:51] ↗

Collections are some of the most common data types you will work with within your application. In this lesson you will learn how to use the v-for directive to loop through the collections to generate output.

Bind data to attributes

Watch the video lesson [0:17:00] ↗

Data binding automatically keeps your components up-to-date with data from the underlying application. See how it works in this lesson.

Here’s an example of binding to data within a loop.

1	<ul>
2	<li v-for="(link, index) in links">
3	<a
4	:href="link.url"
5	>{{ link.text }}</a>
6	</li>
7	</ul>

Event preparation

Watch the video lesson [0:25:11] ↗

Events are the lifeblood of any graphics application. In this lesson you will learn how to listen for DOM events.

Binding CSS Classes I

Watch the video lesson [0:33:15] ↗

Manipulating CSS is the key to providing dynamic and enhanced user experiences. You will learn how to bind CSS classes to state in this lesson.

Using calculated properties

Watch the video lesson [0:41:48] ↗

Sometimes you need to calculate data on the fly to provide responsiveness to your application. Calculated properties give you this ability.

Binding CSS Classes II

Watch the video lesson [0:48:05] ↗

There’s more than one way to skin a cat… err CSS class binding. You’ll learn how to use arrays to do this in this lesson.

Introduction to components

Watch the video lesson [0:55:00] ↗

Components help us organize our applications into smaller, more manageable pieces.

Understanding of data flow

Watch the video lesson [01:04:19] ↗

Components feed data to their children via props, and you’ll need to understand how data flows to build your applications.

Here is a snippet showing how to create and register a new component with Vue.

app.component('page-viewer', {
    props: ['page'],
    template: `
        <div class="container">
            <h1>{{page.pageTitle}}</h1>
            <p>{{page.content}}</p>
        </div>
    `
});

3. Using the Vue command line interface

Getting Started with the Vue Command Line Interface

Watch the video lesson [1:13:00] ↗

Vue’s command-line interface makes it easy to get a full-blown project up and running. In this lesson, you will install the command line interface and create a project.

Current recommendations are to use create-vue with the Vite tools for new Vue projects. vue-cli is in maintenance mode, but still works for building Webpack-based Vue apps like in this course.

Starting a project from scratch

Watch the video lesson [1:21:30] ↗

We’re going to purge most of that fresh new project we created to start completely from scratch. It’s good to practice these things!

Applying CSS to components

Watch the video lesson [1:32:18] ↗

Our applications are broken up into smaller components and those components need CSS. You will learn how to provide CSS to your application and components.

4. Working with data

Using the `created()` Lifecycle event to load data

Watch the video lesson [1:41:51] ↗

THE created() The lifecycle event works very similar to the browser load event. It’s a great time to fetch the data and feed it to the component before it’s rendered in the browser.

Here is an example of using the created lifecycle event to load page data from a remote server.

export default {
    //...

    created() {
        this.getPages();
    },
    data() {
        return {
            pages: []
        };
    },
    methods: {
        async getPages() {
            let res = await fetch('pages.json');
            let data = await res.json();
            this.pages = data;
        }
    }
}

Working with unset props

Watch the video lesson [1:48:19] ↗

Sometimes our components are ready and available before we have the data to work with. You will learn how to handle these situations in this lesson.

Decide when to upload data

Watch the video lesson [1:55:19] ↗

Some components depend on the parent for data; others are independent and upload their own. There are no hard and fast rules, so I’m going to show you some strategies for loading data.

Working with forms

Watch the video lesson [2:01:14] ↗

The primary way we work with user input is through forms. Vue makes working with forms and their data ridiculously easy.

Validation forms

Watch the video lesson [2:08:43] ↗

Did I mention that Vue makes working with forms easier? This includes validation.

Data updating and filtering

Watch the video lesson [2:14:39] ↗

Vue gives us the tools to get/provide the data our components need to work. This includes updating and filtering data.

Using observers

Watch the video lesson [2:21:05] ↗

Observers give us the ability to observe certain properties and react when their values change.

5. Creating and using custom events

Creation of custom events

Watch the video lesson [2:25:19] ↗

Vue makes it easy to create custom events. You will learn how in this lesson.

Write a Global Event Bus

Watch the video lesson [2:32:48] ↗

Unfortunately, custom events don’t emit bubbles, which makes it difficult for parent components to hear events from children nested deep in the tree. Thankfully, we can create our own global event bus.

6. Using Vue Routers

Introducing Vue Routers

Watch the video lesson [2:44:37] ↗

The Vue router allows you to “browse” between components… kind of like pages. You will get the report in this lesson.

Here’s a simple router with a couple of static routes.

const router = createRouter({
    history: createWebHashHistory(),
    itineraries: [
        { path: '/', component: PageViewer },
        { path: '/create', component: CreatePage }
    ]
});

Using path parameters

Watch the video lesson [2:53:19] ↗

Components that handle routes don’t get their data via props because they don’t really have a parent. Instead, they rely on URL data via path parameters. You will learn how to use them in this lesson.

Loading data for views

Watch the video lesson [2:59:18] ↗

Since views don’t get data from their non-existent parent, the data has to be loaded somewhere. A centralized data store could be your solution, and we’ll create one in this lesson.

Look at the parameters to reload the data

Watch the video lesson [3:10:07] ↗

If we try to “navigate” to a view already loaded by the router, we have to reload the data for the new route. You will learn how in this lesson.

Using the router’s active class

Watch the video lesson [3:16:57] ↗

The router keeps track of the currently active link. You’ll learn how to use it in this lesson (and clean up a lot of code!).

Nesting paths

Watch the video lesson [3:23:36] ↗

Paths, like components, can be nested. You will learn how and why you might want to do this in this lesson.

Here is an updated router with parameters and nested routes.

const router = createRouter({
    history: createWebHashHistory(),
    itineraries: [
        { path: '/:index?', component: PageViewer, props: true },
        { 
            path: '/pages', 
            component: Pages,
            children: [
                { path: '', component: PagesList },
                { path: 'create', component: CreatePage }
            ]
        },
    ]
});


7. Using the compose API

Introducing the Compose API

Watch the video lesson [3:30:52] ↗

The Composition API was created to improve the organization of your component code. I will go over the basics in this lesson.

Provide and push dependencies on components

Watch the video lesson [3:40:26] ↗

“Setup” components do not use this, and it complicates how we get to our global properties. Instead, we’ll use Vue’s provisioning and injection capabilities to access our global objects.

Access to Props and Router functions

Watch the video lesson [3:48:18] ↗

The Composition API changes the way we access…everything, including props and path/router. You will learn how to access them in this lesson.

Bind data and work with forms

Watch the video lesson [3:54:58] ↗

In this lesson, you will learn how to bind data to forms in configuration components. It’s easy.

Definition of calculated and observed values

Watch the video lesson [4:06:00] ↗

You can define calculated and monitored values in setup components. You will learn how in this lesson.

Implementation of the delete functionality

Watch the video lesson [4:16:18] ↗

We will complete the management UI by providing the delete functionality.

Conclusion

Watch the video lesson [4:20:42] ↗

Vue.js is my favorite UI framework. And don’t get me wrong: React, Angular and all the other frameworks do their job well. But there is something different about Vue. It’s very easy to get started and lacks many of the wonky rules that seem to plague other frameworks.

I hope by now you have a solid understanding of Vue fundamentals and I hope you will continue to use them in your current and future projects.

Learn more

Find out more in the official Vue documentation or on the Vue Community Portal.

Vue plugins and templates

CodeCanyon, Envato Elements, and ThemeForest are fantastic sources for Vue plugins and templates. They can help you save time, reduce development costs and deliver projects on time.

Source link