Welcome to the Vue 3 Tutorial
Hey gang and welcome to your very first Vue 3 tutorial.
So I've just released a brand new Vue 3 course on Udemy which covers all of the new features of Vue 3 in detail and the link to that is going to be down below. But I also wanted to release a free version on my YouTube channel too which will include some of the new stuff from this Udemy course.
So in this tutorial series on YouTube, we'll cover the basics of Vue from the ground up, learning all about the Options API, the Vue router, the Vue CLI, etc. But then we'll also learn about the newer Vue 3 features such as the Composition API and we'll build a mini blog project with that as well.
So I really hope you enjoy it and if you do, feel free to share, subscribe, and like. That really, really means a lot.
Anyway, on with the tutorial.
What is Vue.js?
All right then. So first things first, what is Vue?
Well in a nutshell, it's a very popular JavaScript and TypeScript framework for creating fast and reliable and interactive web apps and single page applications. Now it can also be used to create standalone widgets like a search bar or a contact form or any other kind of interactive component that you might find on a website.
Now when we use vue.js to create websites or widgets, it makes it really easy for us as developers to interact with the user via the DOM, that's the Document Object Model, and also to manage state and data for the application so that we can easily do things like update the UI dependent on user actions like clicking buttons or typing into an input field or something like that. Or we could reflect changes in data such as filtering articles that we show on a blog depending on what a user searches for. In all, Vue is a great framework for creating dynamic, data-driven, and interactive websites or user experiences.
So that's what Vue does for us. Now let's take a look at exactly how it works.
So as I said before, Vue can be used for either standalone widgets, which we can drop into a website, or it can be used to create full websites too. Now in the case of standalone widgets, we'd simply create a view component for that widget, for example, a signup form, and then that widget could be injected anywhere into our HTML pages. They could even be reused in multiple sections of your website. For example, you could create a widget which is a signup form, and then you could drop that widget into two different places on your website.
Now these widgets would be self-contained and all of the code and logic required to power that widget would generally be inside of the View component itself, and that way they could then be reused in many different places on your website if needed. Now the rest of your website might just be static HTML and CSS with multiple pages. It can be built however you wish, but this drop in sign up form right here, this would be a widget or component powered by Vue.js.
Traditional Websites vs. Single-Page Applications (SPAs)
Now the other more popular way to use Vue is to create full websites with them which are then made up of several different components and pages. Now when we use Vue this way, what we're actually doing is creating something called a single page application or an SPA for short. Now this is just a term for a website which handles most of the routing between different pages or views in the browser instead of the server. So let's look exactly how this works.
So for typical websites which don't use Vue or something else similar like React, the following normally happens. First of all, we'd make a request for the website or the web page from the browser by typing in an address in the address bar and hitting enter. That sends a request to a server somewhere. The server handles that request and sends back the HTML page which we then see in the browser. Now if we were to click on a link on this page, for example, this one right here, then it would send a fresh request to the server, which would then send back a new HTML page. And the same is true for every link you click on thereafter. So the browser is constantly making requests to the server for every new page and each request could take some time to do, so the overall experience might be a bit slow.
Now on some pages, we might choose to use Vue to create a standalone widget like a search bar which can then be injected into the separate pages, but in this case, Vue is not controlling the flow of the overall website because we're still making requests for every page to the server.
How Vue.js Creates a Single-Page Application
Now, when we use Vue to create and control a full website, things work differently. The browser still makes the initial request to get a web page from the server, and that web page is normally a blank, bare-bones HTML document. It normally contains virtually no visible content, but it can do sometimes. And with that web page, we also get back our Vue JavaScript bundle. Now this Vue JavaScript takes full control of the website now in the browser, and it renders the different Vue components that are needed for that page, like a navbar component, an article component, and a sidebar component.
And it also takes over all of the linking and routing to other pages on the site too. So if I was to click on a link in this page to /contact, for example, Vue would intercept that request that we make right here so it doesn't go to the server, and instead Vue handles this in the browser instead. And then what it would do is render a contact component to the browser. Now it does this really quickly, so it means the website feels much faster and smoother when you're navigating from one page to the next.
Now, when we create a website in this way, we call it a single page application because it's only ever a single HTML page sent to us by the server initially. And after that, Vue injects whatever components are needed for that page and it intercepts any link clicking and requests to other pages and just changes the components that we show based on the URL that we navigate to.
Now, most of this course is going to focus on creating full Vue websites, single page applications. So we'll learn much more about how they work as we go forward. But to begin with, to get us familiar with the basics of Vue, we'll just be using it to create standalone widgets or components. And that way we can easily jump right into using Vue with very little setup.
What's New in Vue 3: Composition API & Multiple Root Elements
Okay then. So before we start talking too much about Vue, I just wanted to address a few major updates to the Vue framework in version 3. Now you may never have used Vue 2 before, which is fine, you don't need to be familiar with Vue 2 before you start this course. And in that case, much of this video might not make much sense, but don't worry, I'll explain all of these features in more detail later in the course and we'll be learning everything from the ground up. But for those who have used Vue 2 before, I thought this would be a nice way to give you a brief overview of what's new in Vue 3.
So the Vue team have been working on version 3 for what seems like an eternity, but it's finally here and it comes with some nice improvements. The main one is the introduction of the Composition API, and this basically opens up a whole new way of creating Vue apps. It improves reusability, organization, and the readability of our code, especially for more complex components. Now, it does this by giving us access to a setup function inside components where we can tap into some of Vue's core functionality. It's a really, really nice addition to the framework and we'll be using it a lot later in the course, mainly in the second half of the course.
The next big change is that we can now have multiple root elements for a component template. So before we'd have to wrap everything inside a single root element inside the template, but now we can have as many root elements side by side as we like. A bit like this, we have two divs right here and they are both root elements. That wasn't allowed in Vue 2, but in Vue 3 this is absolutely fine. So this is definitely a good thing because it reduces the amount of unnecessary HTML code in our web page.
More Vue 3 Features & Course Structure
Another new feature is the Teleport component. And the Teleport component basically allows us to render content from one component in a completely different part of the DOM. So this is really useful for things like modals that you might always want to show at the very bottom of the body tag, but they might be nested somewhere in a component tree in your application. So this is really nice and we'll see this later on.
There's also a Suspense component which allows us to handle asynchronous code and components very easily and provide fallback content until any data is loaded, like a custom spinner or loader for example. And another huge update is that it comes with TypeScript support out of the box. So if you prefer writing your code in TypeScript, now you can. So this is a really good step forward for TypeScript developers. In this course, I will be using JavaScript, but I will be releasing a small Vue and TypeScript course on my YouTube channel soon for free.
Aside from those changes there are a few others like multiple v-models for custom components, improved reactivity and performance gains, etc. But the ones I've mentioned here are the big ones and we'll work with most of them throughout this course at some point, especially the Composition API, which is the chunky part of the update.
So again, don't worry if none of that made sense and you're completely new to Vue. I won't assume any prior knowledge and we'll cover everything from the very beginning. If you have used Vue 2 before and you wanted to jump straight into the new stuff, I'd suggest skipping to chapter nine where we start to talk about the Composition API. Because the first half of the course, or most of it, will focus on the basics of Vue, so that includes things like data binding, routing, the Options API, etc. The second half of the course I will shift to the Composition API and all the newer features which can only be used with Vue 3. In the second half, we'll also use Firebase as a back end for our Vue sites too, so we'll see how Firebase and the Composition API can work together nicely as well.
So you can use whatever code editor that you like throughout this course, but the one I'm using and the one I would highly recommend is called VS Code, and you can download it for free at code.visualstudio.com. Now the reason I'm using this is because it comes with some really nice features and it's very flexible. And also there's a couple of packages for VS Code that are going to help us throughout this course that I'll be using as well. The first one of those packages is called Live Server, and that allows us to spin up a local development server to preview our working.
Now, if you want to download it, you just go to the extensions tab and then search for Live Server. It's this extension right here. You should see an install button. It's already installed in mine. Now the way this works is if we have an HTML file, which I'll create right now, index.html. Now if we were to right click inside this file, we could go to open with Live Server to preview this in a live reload browser. And by live reload, I mean if we were to make a change in the code and save, it would automatically update in the browser.
So let's just see this in action. I'm going to type in doc and then tab, and in VS Code this boilerplates an empty HTML document for us with a head and a body. I'm just going to change this to Learning View and then let's do an h1 over here and say Hello View. Okay so if I wanted to preview this in a browser I could save it, right click and go to Open with Live Server and that's opened up in a browser on my other page, woohoo, over here. So there we go. This is how we preview the code in a browser. Now later on, we're going to be using Vue to create full websites and that's going to come with its own live development server, so we'll be using that instead. But for the first few chapters, we'll be using this local development server instead.
So that's the first package I'm using. The second one I wanted to show you is called vita and that is this one right here. So you can search for that as well and install this. And this brings some extra features such as syntax highlighting, formatting, and snippets which help for Vue applications. Now I'm also using the material icons theme to give me these different icons inside the file tree over here. So to install that you can search for material icons and let me just try and find that over here. It's this one, Material Icon Theme, so you can install that as well if you wish. This one's just a personal preference so you don't need it, but I would definitely recommend both Live Server and vita for this course.
