hey gang and welcome to your very first view 3 tutorial [Music] so i've just released a brand new view 3 course on udemy which covers all of the new features of view 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 view from the ground up learning all about the options api the view router the view 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 all right then so first things first what is view 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 experience 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 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 view this way what we're actually doing is creating something called a single page application or an sba 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 there after 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 view 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 now when we use view 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 documents it normally contains virtually no visible content but it can do sometimes and with that web page we also get back our view javascript bundle now this view javascript takes full control of the website now in the browser and it renders the different view 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 forward slash contact for example view would intercept that request that we make right here so it doesn't go to the server and instead view 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 view inject 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 view 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 view with very little setup okay then so before we start talking too much about vue i just wanted to address a few major updates to the view 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 two before i thought this would be a nice way to give you a brief overview of what's new in view three so the view team have been working on version three 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 view 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 views call 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 view two but in view three this is absolutely fine so this is definitely a good thing because it reduces the amount of unnecessary html code in our web page another new feature is the teleport components 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 view 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 view i won't assume any prior knowledge and we'll cover everything from the very beginning if you have used vue2 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 view 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 view three in the second half we'll also use firebase as a back end for our view 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 dot 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 boiler plates 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 view 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 view 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