Vue 3 All-in-One Tutorial Series (3 Hours!)

hey developers today we're gonna look at over three hours of content on vue.js three that's over several different projects we're gonna look at a pokemon app we're gonna look at a stripe checkout app we're gonna look at an itunes search app we're gonna learn all about the script setup we're going to look at view three project ideas we're also going to look at render functions we're going to compare react versus view and then we're also going to learn about veet so this is like a complete series on vue js3 i've actually compiled this from some of my previous videos all together i deleted out a bunch of extra stuff so it's just one video i'll put links in the description so you can jump around each different section or different video so make sure you check that out and also if you're a fan of this type of stuff make sure you click that subscribe button i'm really trying to hit a hundred thousand subs you could do that that'd be awesome so yeah let's just jump right into the videos all right so we are in the app right now so this is what we're gonna create so here we call it the pokemon picker app you can type in the name of the pokemon you want like for example bulbasaur you click here and then it gives you a little bit of a card and some information and shows the front and back of the pokemon so this is all retrieved from the poke api you see here you can also get see what types it is you see the front back if you click here about the back if you click back on the banner it goes back to the front page and then you can search again i know like a rat tacate i'm not pronouncing that right apologize leave a comment below the correct pronunciation pronunciation but yeah so this is really simple but there's a lot of interesting details behind this app that i think would be fun to learn and since we're using the composition api i can kind of show you how i did that as well now to give a shout out this is the poke api i'll put a link in the description below it's 100 free restful api it's really simple to use you just send some parameters over the url it works it doesn't require any authorization or or api keys or anything like that so you can kind of test it out it probably does rate limit you so obviously if you were using this in production it probably would not work meaning that you can you could only send a certain amount of things to the to the website before it would wouldn't allow you to send any more information in so that's the app but let's take a look at how we would create that so we are using vue.js we're using the latest version we're gonna use view three so i am uh in my vs code i opened up the terminal here and the way i would start this is i would make sure i had node installed of course so if you don't know how to install node check out i've done some other videos on node but you just basically go to nodejs.org and you install it in your local operating system then you want to install vue cli and by the way if this is if this is too easy for you i'll put links if you look at the video itself there'll be time stamps you can jump around this video jump around to a section that that's a little bit more advanced for you i guess you should say or more at your level but i'm assuming you know nothing about view so that's where we're going to start so you do npm install tac g at view cli in the command line and this will go ahead and install view for you i've already done that so i won't do that again now to create an app you do view create and then we'll call it the pokemon app and then this will ask you for a few questions now i've run this in the past and i got this asd here don't worry about that that's you can set different presets and i did that at one time so i'm going to manually select features and this time i'm going to use a router because we want each route to be its own pokemon api so people can link to it and i'll just bring it up and i'm just going to leave everything else default here i'm going to use the 3x preview and i'm just hitting enter there and error prevention only i'm just going to hit enter through these do you want to save for future projects no and what'll now we'll do is we'll go ahead and set up our app so this will just take a moment okay so went ahead and installed and give us a little information that we want to move to the pokemon pokemon api folder we can run npm run serve before we do that i actually want to use tailwind css as our css library to make things a little easier so view makes that really easy just do view add tailwind and it's going to ask us a few questions so this is like a plugin system that's built into view just makes it really easy to get up and running with different libraries you can certainly have added a bunch of other things in here i think a bunch of other libraries are already in this ecosystem that we can add so this will just take a second cool so at the bottom here it's asking us what if we want to generate the tailwind config file i do that always because i use this this vs code extension that helps me do intellisense with tailwind and it requires that the tailwind config file be there so i'm just gonna do minimal okay so it went ahead and set up everything up for me so i'm gonna go and open that folder real quickly okay so i'm in my pokemon api folder and this is what our view app our view 3 app created for us so i'm going to do a little bit of housekeeping here i'm going to delete this link here and delete some of these styles so this will just take a moment i'm not going to worry about this vtor extension error i'm going to delete this component here hello world and then the about leave that the same delete the logo hello world here hello world and i'm just gonna do h3 hello world and i'm gonna just see if it works just cool so i'm gonna open localhost 8080. here there's hello hello world great so i am now up and running so the first thing i want to do is set up some params so that way i can pass things to different routes so that shouldn't be too hard first i want to go back to our app view or our main.js yep our app view here and we get rid of this and what i want to do in my app view is just set some styles here to make it look a little nicer so i don't need this id nav here i'm going to do class i'm going to do a p14 so now i'm going to use some tailwind to do a little bit of cleaning up so this p14 adds padding around the sides of everything and i'm going to do a class here i'm going to put flex i'm going to justify center so just justify everything i'm going to make the text a little bit larger and i'm making it yellow 700 so now i have this big home right in the middle there it is doesn't say much great and now i want to change this home to call pokemon picker pokemon picker good all right so this always give me back to the the front the first page and this first page this router review here if we look at our routes we have this router file that was automatically created for us from view and it has this home route which automatically gets added because this is the the route which is the the route of the of it and then has this about i kind of want to do with this one thing where normally we would call this pokemon but we can call it about that's not a problem let's add a dynamic route called slug in here and we'll show you that in a minute how that works so if we go into we'll refresh it now okay looks about the same if i go into this about i have actually have access to that slug in that param so i could just test this out i can go route dollar sign route dot params dot slug i remember correctly so let's see here we go slash about slash one here it is see there's one right here this is the about page um don't worry about the squiggly line um because it doesn't exist but don't worry about that it obviously does exist you can see here it loaded fine right there so we know definitely know that we can get router information inside our route and we said about one here so if we look at the poke api let me show you how it works so if we look at it right here we need to kind of do two things first uh this is the api that's going to list all the pokemon and there's a lot of them but it defaults to the first 20. and you can see all it has is a name and a url and if you look at this url it has this one two three four five six seven eight nine ten eleven till all the way to twenty so what we could do here is we i can list all these names and then instead of passing this whole url over all i need to do is pass this number in and if i pass this number in to my about route then i can have the about route just plug it into this url here and then get the information for this pokemon and that's kind of the route that we want to take on this so first thing we need to do is can we list all these different names of these pokemon from this backend api and so this is the completed one so i'm going to close this so let's see if we can do that first so i'm going to do that inside my home my home hello world here so i i think the first thing we should do is uh set this up correctly now i'm going to use view three and we're going to use the composition api so i'm not going to worry about this this that components here and we're going to just grab the information soon as the app loads now there's a few ways we can do this uh i think just throwing it into the setup function is fine and that should work for our our use case so i'm going to use a fetch i'm going to copy and paste that that api url and it's then able basically it returns a promise and we know that we want to grab the json and then we want to we'll have some data that comes back from it and we want to do something for so first i want to console.log the data just to make sure what's working so i'm going to refresh it i'm going to look inside the inspect inside the console and we so cool so we have an object so it did work our our quick check to see if we got the console log and since we're using the setup function we don't really have a data object but we can add data in here so first i want to import in this re uh import in reactive from view view so that what that'll do and this is supposed to be in quotes oops uh so what this will do this reactive is a way we can create kind of reactive objects using the composition api that will change whenever anything inside of it changes so and by the way my my keyboard's a little clicky i apologize in advance so we can do state and we can do reactive here and then inside the reactive we'll have a few things we're gonna have our pokemons um and uh we'll have well right now we'll we'll do that in a url id lookup so we want to do is we want to store that number remember that number we have right here this last number here we want to store that somewhere that we can look up later so we can pass that in to our route so i'll show you how that works okay so we're going to do state.pokemon and that's going to equal the results that's coming back so that'll have all the pokemon data for each pokemon and by the way maybe if someone wants to go through this video and mark down how many times i've said pokemon i'll give you uh i'll give you a high five so then we're gonna we wanna set that url lookup id so we're gonna do a data.results and we're going to do a reduce on it and if you remember a way to reduce this we can create basically a new object from it we're going to create this lookup table so we want the accumulator we know we have the current index in the index so the current value and the index when we go through this array and well you know what we'll do we can do this all in one line and what we're going to do is we're going to have this accumulator and it's going to equal it's going to create a new object and we want to do here basically by the way i'm going to put down here we can actually start with an object so that makes sense so what that does is it basically as soon as this reduce starts it'll have this object that that'll be in the accumulator so we'll use we'll use a little es6 magic here where we destructure the acc and then so that way if there's anything in it we don't override it then we're going to get the current.name which is the name of the pokemon and we're going to set the index up which it starts at 0 but we know we the the api starts at 1 so we're going to add one to it and that should be it so that state url lookup will then be populated with this url id lookup so that's good so now we have the first part of fetching the api and of course this won't work until uh here in our setup function until we do something with this so we want to return these values and i'm just going to use this thing called two refs and two refs is allowed allows us to take objects and to destructure them so we'll do like this and have it still be reactive so instead of having to do state.pokemons and id lookup inside the template everywhere we use this two.refs to do it for us so now we just can access everything by pokemons and urlidlookup so to see if this worked instead of having the whole hello world we'll just do pokemons and so we'll see if this works come back over here cool so yeah we see this hello world and then we see this big string here but this looks really ugly so let's make it look a little nicer so this is where we're going to use some some tailwind magic here to make this our job a little easier so first i'm going to create a div and we're going to create some classes on it so once we're going to make this 100 full we're going to make a flex and justify center inside of this first div i'm going to um i want to create an input which we'll do here we'll type equals text and we're going to do a placeholder at first we're not going to uh this will not do anything but we want to put this in place enter pokemon here and we're going to add some classes on here so we're going to do give us a little space at the top guess margin top 10 a padding 2 we're gonna make it border blue 500 and then we'll put a border on it um and i think i think that's all we want here for right now for this oh we have a problem because i'm not closing it okay so this input's closed now the next thing we want is another div and this is just a little bit of we'll have some margin at the top there and some padding we're going to wrap it and we're going to justify center it and then in here we're going to have another div and this is where we're going to actually iterate through all the different pokemon so first i want to do a little bit of look up here i'm going to put some margin left so each one of these has a little bit of space to the left of it we're going to do text 2xl and then we'll make it blue 200 i think and then we want to add a few things here so i'm going to do a v4 and so in view we obviously when we iterate through things we use a v4 it's the best way to do it and we'll do pokemon and we'll grab the index in and we'll call it pokemons and the key will be the index of this div and now we can just show this works correctly if i can type correctly there it is pokemon dot name so let's see if we did that right okay so here they all are um let me clean this up a little bit more i'm going to first delete out this um when we're listing all these pokemon right here really i don't need this this or this and i guess the 200 was a little light so let's do i don't know 400 500. okay so here it is so now we have the name and then we have these things now they don't do anything right now but here we've able to to see all the pokemon which is good but we want to be able to link well first we want to filter this list based on what you type in here so uh let's do that right now let's we're going to go to the url id lookup and we're going to add in a few things here we're going to add in a text and we're going to call something called a filtered pokemon list and you might this might be interesting if you're not used to computer properties so computer properties get changed whenever any of their values inside them change so they get cached and then there also updates whenever any values inside them change that are reactive so we can use this computed property like this and then we can call a new function which we're going to haven't created yet we're going to call update pokemon so now i can create a function called let's call it function update pokemon and now this function will go ahead and and filter out our pokemon text and so by the way since we have text right here and we have this input now this is where we can add in a v model which will do some 2a data binding to us for us so do be model equals text maybe not a great name for it but that'll work so now we have a text there and now we can set up this update update pokemon so first we want to make sure that if the text isn't there at all then we just don't do anything so we'll turn it empty set otherwise we want to return state dot pokemons which is that and then we'll filter it for each pokemon and then inside here we'll return pokemon.name.includes and then state.txt so if the text is inside the pokemon name it'll return so now we have this new update pokemon and we just need to change what is right here so instead of v4 through here we're going to change it to filtered pokemon is it pokemons let me check filth no just one n without the s so we come back here we save it everything is gone but now when we type stuff it'll automatically filter for us it's not the best filter of course but it works so we have blastoise charmander anything with c in it anything with a in it i mean you could probably do lots of things now since we are running this right this setup since we just put this fetch right in the setup here at right here it's going to run soon as the app loads so we don't have to worry about um having doing like debouncing the input and then keep on setting the fetch over and over again we're just gonna assume that the data hasn't changed and we're only doing 20 at a time so it's not that big of a deal now obviously if we were doing like thousands then we might have to find a better way of doing this cool so this is working but we really want to do is have this clickable links to get to the about route that we created so that shouldn't be too bad so what we need to do is we're going to use the router link so we're going to do a router uh link writer link it's router dash link and then inside there we're going to have a 2 and we're going to bind it that's what the colon is and we're going to do um we're going to do a string literal here so we're going to about and then we're going to do that url lookup remember that one i created that url id lookup and we're going to pass in the pokemon.name to it so that should look up in our little hashmap i guess you can call a hashmap here our little object where we set up our url id lookup to to add that index in so that way we send the correct index over to the about route so if we do that right it should work so i'm gonna refresh it here i'm gonna see uh that didn't work because i need to do one more thing i need to move um this up to here and let me try it again okay so now i click see you see here five here so it definitely seems to be working i know that ratchat is like 20 or 19 or something yeah 19. so this is working correctly so cool so we have made some progress all right so now let's do the about page to see if we can actually pull up the information about the uh pull up information about the pokemon so uh there's gonna be a lot of of of us css in here using tailwind so let's let's see if we can first grab the information from the back end and then we'll work on the css so i'm going to add in a script tag right here and we're going to um since we are using uh the view excuse me view 3 with the composition api we can actually import in use route because we don't have access if we use the setup function here we actually don't have access to the to the route the dollar sign route um one easy way of getting past that is to use use route from view router so now we can get access to it so we can do const route equals use route if i type that right use route and i'll put that in the setup function and now we can do a lookup for us so first i'm going to now have a const pokemon and i need to actually grab in reactive from view as i did before so now i'm going to do reactive and i'm going to grab in this pokemon equals null and you know i kind of like calling this state just makes a lot of sense to me so i'm going to call it state now we're going to do the fetch we're going to do the fetch and inside that fetch we're gonna do the poke api dot co slash api v2 pokemon and then we're gonna pass in so now we have the route dot params so that should be what we need and then well it's a promise so we know it's then-able so we're gonna have res we're gonna grab the json of it out of it and then we're going to use data and first i always like to console log the data to make sure it's working so let's see if this works oh we got an error state is assigned but never used that's fine so what we can do we do the same thing we did before we're going to use two refs to destructure it so i'm going to return two refs of the state so now it should be being used and if we look inside our console here's our object and here's our stats so yeah it looks like it came up correctly for this ratchet time perfect so now we can assign that to our pokemon data so we do state dot pokemon equals data and i think that's all the code that we need so the really now we need to focus on is to make this look a little bit better so i'm going to delete this i don't need this params here i'm going to do a div i'm going to make sure that that pokemon is actually there and i'm going to use um some classes here you know what i'm going to skip this class right now i'm just going to go into an h3 and this is going to have a class of text to excel and we'll do text green 900 i can type right 900 and we're gonna make it uppercase and this should be the pokemon.name and we'll have double brackets here then we need to have another div sometimes my emmett acts up there we go and then it's going to have flex and then justify center and this one will have a couple of images and this first will be source will be we're going to bind it to the pokemon dot sprites dot front shiny the second one will be back shiny and i'll make it a little bit bigger i'm going to make this class a width of 48 and i'm going to paste it here cool and then we're going to have another h3 and inside here and put a class of text yellow i'm 400 to call it types and we're going to have another div it's another v4 just the structure of it and we'll do type index in pokemon.types we're going to have key equals idx and then inside here we're gonna have an h5 we're gonna make this text blue 900 and this will be the type dot type dot name i think i did that right okay let's see what it looks like okay here's our rat attack so let's let's go back here to this df pokemon we'll add some classes here as well so we'll make this width 3 12. we'll center it we'll put a background purple on a 100 we'll have a little spacing at the top we'll put shadow excel we'll do 2xl flux justify center flex column item center see what that looks like all right there it is so now we have a rat to chat we have types normal we have the back in front now if we type in cool so we have done it hey developers today we're going to look at stripe we're going to create our brand new checkout page we're gonna look at a couple of different ways you can create checkout pages how you can integrate stripe into your own apps using vue.js and express so stay all the way to the end and i'll think you'll learn something hey so we are today creating this checkout page here so this is a checkout page i'll tell you guys all about it but for example you can put in a name eric test at example.com put a street name i know sycamore street reno nevada 89523 and then it has a credit card field at the bottom here so it actually uh validation on here and then after you put something in whatever you want you can hit pay and it actually charges a stripe account for you it redirects and if you don't necessarily want to use your own custom form i'll show you how you can integrate stripes custom checkout pages by just clicking this pay 1999 page look here this is a custom page that you can essentially create and it has all integrated in with stripe and you can actually buy something through here and i'll show you how you can track this on your back end with some web hooks all right so here is the checkout page again that i have so let's begin and we're going to take this in a few steps and by the way once again thanks to our sponsor.tech domains it's really awesome how they're partnering up and helping people learn web development and computer science i think that's really really cool so here's the app here and i'm going to show you i went ahead and created uh two apps really um just before i started rolling this camera here i created a brand new view 3 app and in this view 3 app i'm i'm using the latest version of the strike js which is a library we're going to use but let me go ahead and do show you guys quickly around and show you what's inside here like i said this is a view three app i'm using something called veet and if i look see look inside here this this is the index.html i'm including some libraries in here first i'm using this nes library and that's what kind of look and feel of the page and by the way if you want to follow along i'll put a link in the description to all these resources so that and this code so that way you can kind of take this step by step if you like to code along with me i've also added in some press start 2p which is a cool font library which i actually included inside the credit card field as well and then i including the source now there's a couple of ways you can add stripe to your projects the official documentation which by the way is pretty great it's one of the probably the best documentations out there for technical documentations it recommends that you use stripe either as a source tag a script tag directly inside your header of your html you can download it as a json or excuse me as a package and install it through npm but i kind of just preferred using it as a script like this i think this makes more sense and they recommend this because it gives you some more security as well so here's all the three things here now if we look inside our package json the only thing i installed outside that was a view router so this is using veet which i created a brand new app and then i also on top of that i created a few folders so once again i think this is i did this so it'll be uh just a little quicker to go through this tutorial if we have this as a basis inside my app view file i'm using the router and i only have two routes right now and the two routes are home and success and then inside the home route the home route actually all it does is it shows the checkout and that's this one right here so this has the most code in it if we look inside here is this is just html that i copied and pasted in here before we started you see here all we're doing is we're using these classes that are built into this this library we have an image that i'm grabbing this donkey kong image then i have a button at the bottom and then i also have a button at the top right now i don't have any view code or anything like that it's empty so we're gonna go through and add in the actual logic to glue this all together to make it work so we're going through 11 different steps so i broke this up into 11 different steps so you can follow along i'll put timestamps below so you can jump around if you like so the first thing we need to do is to create a product as you imagine so there is a couple of ways of doing this so here's my stripe account and what i did is by the way if you go in stripe it's absolutely free you can go ahead and create it at stripe.com and then i tuned i chose this for viewing testing data because throughout this tutorial we're going to use the test data obviously we're not going to use production data with real credit cards and i highly recommend if you're testing to use the test data first because that's what makes the most sense strike gives you a bunch of different ways to create a to do payments so you can do subscriptions you can do one-time payments and then they have their own products so you can create like your own pages with your own products or you can just kind of dynamically create your products as you like and then use the stripe api to actually do the payments for you what i would recommend like if you're brand new starting off and you have no idea how to use stripe it's not a bad idea to to create products so to create products you just click the little products link here on the left hand side i guess i'll make this a little bit bigger and then and then after you click the products button you can go ahead and click add product and it's going to ask you a few pieces of information about this product like the name the description you can upload a picture and then it's going to ask you some uh information about pricing so you can do standard pricing gradual pricing volume pricing i mean to make things as easy as possible i would just do standard pricing put a price and do a one-time payment and then click save products so i went ahead and did that and so i created this one called donkey kong country so it's it's basically priced at twenty dollars 19.99 and it has this api id and so this is the one thing you'll need in this tutorial to show you how this works so make sure you copy and paste this api id and the next thing is if you really didn't want to use uh technology at all and for example you didn't want to actually create your own web page at this point you can click this view payment link copy and paste this and then just paste it into your url and here you go here is a whole dedicated site for your product and it even has apple pay it has google pay that is and you can just have someone you can send this link to somebody and they can pay for whatever you're doing and then you would have to figure out how to figure out after that actually someone paid so you could like either look at the dashboard you can use a service like zapier too i don't know if you guys are familiar with zapier but it's just like a it's a service that you can connect in with stripe that you can connect to another product so you can like send yourself an email when someone purchases and this would require like not having a website at all you could just share this url with people probably the best bet and i think the next thing we want to do is let's see how we can create a redirect button to product so we don't have to do this so instead of having to like just copy and paste this link everywhere let's say i have a website and i just want it to redirect to this page and then i want it to go to its own success page or its own failure page so if you actually fill in all this information and click pay it'll just tell you like congratulations you paid but you can't really customize it or edit it very much so it's not super useful so let's see how we would uh do that i want to have this button go to that page that's that page we just saw and then have a way to to actually be able to go to a success page or failure page i'm going to turn off my camera so you can see the whole page here my face isn't in the way all right so let's let's begin here and i'm gonna create since we're using view three i have this setup function here and i can just go ahead and put anything i want in here to do setups or redirects uh so the first thing i'm gonna do is i'm gonna create something called redirect and what this redirect is going to do is uh i wanted to redirect to a checkout page when someone clicks this so i have this right up here at the top um this button i'm going to do an at click event and i'm just going to go to my new redirect url redirect method that is and the next thing we need to do is actually get stripe set up here and then we can have this redirect do something so um we're gonna do is i'm i need to uh first inside the setup function i'm gonna create something called stripe it's gonna be null and then i want to set up stripe here and before i do this redirect actually i'll make sure i pass it back is uh i'm going to use the hooks so don't get confused don't try to set up stripe directly inside your setup use one of these setup hooks and one of them is called on mounted so i'm using on mounted here and it's going to be async and then this is going to return a this is basically a function here and then this is where i can kind of set up stripe for the first time so right up here i'm going to import load stripe from and then at stripe stripe js so make sure it's loaded and then this on mounted i want to load it correctly so i'm do stripe equals await load stripe and then i need to put the strike key in so to get our keys if you go back to stripe you can go to the developers and then go to api keys and we'll need to grab the publishable key and then the secret key i'm not going to show you my secret key but what you need first is when you're on the client side you use the publishable key and then when you're on the server side use the secret key so i'm going to copy the publishable publishable key and since i'm using v this is kind of a vedism i should say i can create a env file and if i did that oops i didn't name that right i'm going to rename this to dot env and inside this emv file is where i can now put in some secret codes that i want so i'm going to create one and since it's v i have to always call it veets v at the beginning with an underscore key and i'm going to go ahead and paste this key in that i just got from that other screen cool and now inside my checkout here i should be able to go ahead and import it in and the way imported in through vee and this is going to be change if using view cli but you can do import.meta.emv dot v stripe key awesome so now as long as this works it should stripe should be set up correctly now i could wrap this in a try catch block or try to catch the errors but since we're just doing a quick demo i'm not going to do that but that's probably what you want to do if you're in a real production app so now i have stripes set up correctly i can now do stripe.redirect redirect to checkout and that's going to take an object and i need a few things inside this object i need a success url and i'm going to make sure i can just put localhost right now that's fine i think i'm localhostport4000 and we do success and then i'll have a cancel url in case they just end up just closing it and i'm put localhost 4000 so just going to redirect back to the same page and then i need two other things and this is going to be called the line items and inside this line items and by the way this is all in the official documentation from stripe but i'm going to have two things now in older tutorials you may not see this line items you might see items and that's when they use skus so if you ever see skus and you're looking up stripe tutorials just remember that that's kind of a deprecated way of doing it they don't use skus anymore and use line items so in this line items i'm going to put price and the price we want in it we'd want to do is from the product we created so if you go back to the product here you need to grab this app api id just copy paste it and that's gonna be what you put in this price right here and then quantity so i'm just gonna put one uh obviously you could do more if you wanted to really and then i'll put mode and i'll do payment oops okay i see that i have a quick bug here so you can use load stripe this way if you're using it from a package file so this would work if i'm using it from a package but since i'm not using it from a package i can load stripe this way so i just need to put instead load stripe i just do stripe here and that'll load it correctly for us right directly from the stripe that we imported in through the cdn and then one other thing is i have this on mounted hook so i just need to make sure that i import this on mounted from view three some otherwise it won't work so if i did that correctly and i refresh cool so now it's up and running here and now since i did this this button here i should be able to uh actually there's a button up here i have this click click it goes to redirect and then that redirect should go ahead and redirect us and using this price that we did so let's see if this works i'm going to save it again refresh i've clicked this pay button cool so now redirecting to my new page if i click back it clicks back it works now if i go on this page here i can put in a test email i can put in a test credit card um and then name my card test and i'll just put some random number in here and now when i pay for it what's really cool is that it'll automatically redirect to that success page i put in which i put in localhost 4000 success so this is just a random page that i created inside our app cool so we got it up and running okay so one thing we'll probably want to figure at this point is how do we in our back end see that this actually succeeded so i went ahead and if you look inside this folder here i have a stripe example which is empty right now but this will be our example express app so let's go ahead and create that right now it shouldn't be too bad so i have two tabs open here here's my second tab and i don't have anything created at yet for my express app so let's create a really quick express app to use with our our stripe app so i'm first i'm gonna do mpm init i'm gonna hit through here and to ask where my entry point is i'm gonna do app.js is this okay cool and now i want to install a few things to get this up and running so under npm i i'm going to install cores so we're going to install cores and we're going to install env we're gonna have our that's where we're gonna put our secrets we're gonna do express we're gonna do mo nodemon and we're gonna do stripe and so this will just take a moment and this all get installed great so we have everything installed and if we go back here and let's uh go we have to go and create some files now since we have this set up let's uh we'll create one called app.js and i think that's the only one we really care about right now oh you know insider package.json i always like to do this to make sure that we have a start and in the start we'll do nodemon we'll do dash dash watch app.js just so we have it watching and so we would have to keep starting restarting the server every five seconds cool so now in this app let's add in express so i'm going to use oh one other thing in this package json i'm going to put this module well we're going to have the type and we're going to type module and this will tell it that we're using es6 imports so it doesn't kind of complain to us and so we're going to import express from express we're going to import cores from cores this is so we don't have to worry about cross-origin requests we're going to do dot env from dot env and we're going to import straight from stripe and let's go and create an app so do an express here we're going to app use course and we'll add some configurations for our dot env but obviously right now we'll just leave it blank let's see here let's do con let's put it on port 3001 and let's see if it works let's do a hello world here i did a whole video in express if you're interested um you can just search my channel for express i'll leave it in the notes and now the last thing we want to do is make sure that we actually can listen so we'll do app.listen and actually i'll do that makes more sense and report here and we'll do another arrow function and all the console log running on i don't know uh port cool so if this all works we should be able to start the server npm start all right so it's running on port 4001 if you go to 4001 [Music] cool we got a hello world so we're making progress but obviously we want to do more than that uh so we want to uh try to connect uh with stripe and first thing i i really really like to do is set up my env file so i'm going to create a new emv file and then inside that emv file i'm going to add in a secret key secret key and then i also need an endpoint secret key and i'll show you that too so i'm obviously not going to do this on the camera but i'll show you where in in stripe to get those keys so first to get the secret key you got to go to developers api keys and you just want to copy and paste this secret key right here this will show that that it's the secret key here is the one that you use on the server side never reveal it on the on the client side because that'd be really bad and then we also need to do this uh this endpoint secret and we'll add that in a second but let's add this let's do this one first and so we'll just one second okay so i have the secret key now inside my env file so i should be able to use stripe new stripe and then i'm going to grab it from the process.env secret key and now i want to create a web hook so i'm going to create a new a web hook and this is going to be used to make sure that when someone purchases something that the backend receives it and then we can do something with it like we can send an email or we can uh we can just kind of have it in our system set it in a database so i'm gonna put i'm gonna put this as stripe slash webhook you can call it whatever you like and we're going to do something called express.raw and this is just a word quirk of this it asks you that in the documentation it says that you need to send it as raw data and then the third one the third parameter here is gonna be my async function which i'm gonna have a request and a response okay and now we need to do a few things we're gonna do this quest quest.headers and we're going to grab the stripe signature this is actually what should be coming from it we're going to have event and then we're going to do this try catch block and in this try i'm going to do this uh construct this event so i'm going to copy and paste this for my other screen just to make this a little bit quicker so what this is saying is that we have an event it's a stripe web hook construct event we're going to pass in the request.body the signature that this header here and then this endpoint secret now you're probably thinking like how do we get this endpoint secret so the way we do that is when you create your web hook it's going to have an endpoint secret uh this signing secret right here that you'll need to get um so we'll we'll um we'll come back and and i'll show you how that works but for right now we'll assume that it's there and i'll add that in a second when we create it now also i want to say if this goes wrong i'm going to just paste in this webhook error message cool so now if everything goes right this is where you can kind of check to see the response that comes back and what you want to do with it and once again i'm going to copy and paste this this is really literally from the official documentation and so i don't feel like you want to hear me type for five minutes so what happens is if this works the the reason we do this construct event is we make sure that the um the actual information that's coming from this hook is real and that it's actually came from stripe and it's not just some hacker that's trying to break into our server and that that trying to get a free product so if the event type type it comes through here it'll succeed and then we can do something with it and the most common ones you have is payment intent is succeeded or attached and then you can have like payment intent successful but right here where this console log is is where you would want to like add it to your database or or send out an email or do something with it and this also this information that comes from this webhook have a bunch of information that you can use but for right now we'll just make sure it says console.log that it was successful and if all goes well then you probably want to end it with just a response that says received true and this is it for this web hook so let me see if we can get this web hook working so the way uh to test this is you would normally do this two ways you can use the stripe cli which i didn't set up for this demo or you can post this somewhere online uh into some serverless function somewhere and run it but i kind of found a in between the cli and just posting it somewhere in a serverless function is i was using this local tunnel program which if you can use this local tunnel and what this does is it creates a tunnel so if you run stuff locally it creates this url that you can then share and you can do testing with obviously you wouldn't want to use this for production but it's pretty handy so if i come back over here i'm going to keep running it on 4001. i'm going to create another window here a third terminal and i already have this one running right now i already installed it i did npm install tacg local tunnel so now i can just run this from the command line so i'm gonna do lt dash dash port and if you see from this one it's running in port 4001 so i'm gonna do port 4001. and now it gives me this url and i can see this is kind of gives me an out outside url to see if things work now the first time you run it it says by the way people have nefariously used this in the past to trick people for their login information but if you just click continue here it'll go directly to your server and it only does that on like web browsers so it should just work when we set up through stripe so if i go through stripe i'm going to go back to developers i'm going to go to webhook i'm going to create a new endpoint uh it's going to be this one but remember we did stripe slash well we'll take a look if we go out of here it was stripe slash web hook slash web hook and then this is a stripe web hook and then you can select the event so i really care about is the intent payment this payment intent and i just want to make sure that it succeeded and you'll see you'll understand that more so every time you create a payment a payment intent is created in stripe and then when it succeeds basically it gets charged to the account so then i can select event here uh yeah payment attempt and i'll do succeeded okay it's already there i'm gonna add the endpoint you can add multiple ones if you want and now to actually get this working i need to add in that that secret key so i'm going to do that off camera i'm just going to click this reveal grab the secret key and paste it into the dnv file so this will just take a second all right so i went ahead and did that now i can test to see if this web hook worked so we can do it two ways uh first i'm gonna have this window open um actually we'll do our server this one right here so it's running on 4001 i don't have any information yet that it actually works so uh let's let's run the web hook so i'm going to send test web hook okay so i just went and stopped and restarted the server so i think that actually should have fixed it that's i didn't make any other changes so i'm just going to try it one more time send test web hook send test web hook cool says it was succeeded and if i look inside here payment 10 was successful awesome so it went ahead and sent it correctly and now we can test it inside our app so if we go back to our video game store there we go and we go back to our video game store we press the button and this will bring us to our page we'll do test at test.com uh i guess it doesn't like this you can do test there we go and we'll just put in some random numbers here and test 89523 and then we'll pay it and it should succeed cool so we got payment intent successful and redirected correctly and also if you look in the stripe dashboard which is right here i can go to payments and i can see the last one i did was 1999 from test.test.com at 902 pm so cool so it definitely worked awesome so the next thing we want to do and i'll close this is see if we can uh have this checkout form here which if we go back to 4000 let's see if we can have this going in now i did create this donkey kong country right here but it could be anything so you don't have to actually create the product inside here uh you should be able to just send any payment intent that you want so i'm gonna go back to the checkout page so we did this we created the product we set up the redirect we created the back end now we're going to create a custom front end to submit any product so i think the first thing we need to do uh inside this one is to take a look at the handle submit and also to use something called elements so if we look at our checkout page right here we have this credit card at the bottom but it's blank there's nothing there so let's see if we can get the credit card to actually do something so on this unmounted hook uh i'm gonna add some things here i'm gonna so this element by the way basically what this is with stripe elements it creates with stripe elements it creates an iframe and so inside the iframe it has like your own credit card processing so the credit cards are never ever on your server they're always on stripe server and that's what stripe elements does for us so let's set that up i'm going to create an element type equals card and we already have this stripe account where we created this stripe where we loaded it and now i can do uh i'm going to create a new thing called let l elements here equals null and i'm going to create something called loading which i'll show you guys in a second which we should be able to to kind of uh make the whole form wait for it to be load so people can't submit it twice so i'm going to do this elements here we're going to do stripe.elements and then i'm going to have element and now this is where we're going to create it here and we're going to do it's going to be element style or type that we just created and now we can actually add a style to it as well and i'll show you how that works all right so uh we have i'm going to copy and paste this from this other screen but basically this is from the official documentation as well you you create this object here it is right here and i'm calling it style and then i can set the base colors the font weight i'm using the press start 2p font because that's what i'm using in this page i can do the font size and so essentially uh with this and i think i have one there we go with this style here i can have it inside this element type so i'm going to set the style of it now to really get it to work we have to mount it somewhere so i'll do element.mount and it could be any kind of css selector so i want to mount it right right here for the credit card so this was this is stripe element mount point that's where it's going to be so i'm going to just paste that in there and since it's an id i'll put the hashtag in here and then also i created that loading i'm gonna put value false here so that way we have this loading um because it starts off as true and if i did this correctly should mount oops i actually have ref right here i'm going to import that as well always forget my imports awesome so now let's see if it works here some scroll down cool so you can see right at the bottom now we have credit card number and uh we're gonna put a number in and it also built has some built-in um if you put some random numbers in here that doesn't make sense it has automatic error correction in here you can also i'm not gonna show it in this one but you can use this mount here and this element that we mounted and you can do events from it so i can have an on event or an invalid event so if this is invalid that i can disable the pay button things like that but it's a little beyond the scope of this but i just want to kind of want to show you also now we have this loading so i kind of want to use this loading to do a few things so i have this field set right here and if i have this loading i'm going to do this class here and in this class we're going to have i'm just going to call it dis but it's going to be loading so essentially if the field set is this loading it's gonna i have this class set in place called dis which is kind of disabling it to make it look disabled and i like to do that also on the button down here so on this button we'll put the same kind of class on and so this will make it just a little nicer that way someone can't double click it after it's trying to starting to load and also uh when we submit it we'll we'll disable it too so we have a dis here loading cool i'm not going to see really any difference here but for a second the whole thing was disabled while this credit card was loading great and then also for this text here instead of just paying 19.99 we can make it dynamic so it says loading while it's doing it so if it look if it's trying to load then we'll say loading uh otherwise it'll say pay 19.99 so like you can do little nice touches like this so it looks a little bit better and a little more professional and allows you someone not to double click the button a bunch of times awesome all right so now we have our credit card number but we want to do is when you submit the form it should automatically uh submit it to the back end so if we look at our next step we need to set the unmounted hook for stripe elements without we did that and now we need to set up loading and now we need to add all the add the handle submit button so easiest way to do that at the top we have this form and we have submit prevent i actually already have it in here i have this handle submit on so this is means that anytime you do a submit action it's going to set it to the handle submit and we'll just make sure that works and since we're using view 3 i'm just going to create another function here called handle submit and it's going to have an event and i'm just going to console.log hi and then the event and then make sure anytime using view three you have to return it so handle submit now if it did that right it should work so if i put some test data in here uh i'll just put some stuff i hit pay and open up my console see if it works uh oh don't worry about that error there pay okay so we definitely sent it over which is good okay so now we're going to create the handle submit now that we're going to do this in steps we're going to first creating the billing details and then create and then we're going to create the back end endpoint for the payment intent so it's going to take a few steps here but let's let's just dive on in so first on this handle submit if the loading dot value remember if since this is a ref you have to reference it with that value inside the javascript we're just going to return so we don't if it's true we don't want it to someone to submit twice and then i'm downloading that value equals true and now i'm going to grab some information out of here so we want the name email address city state zip and we're going to use this this this candyman dandy way of doing this which is through this object.from entries and this is just kind of a quick way i did a whole video on this this is a quick way of grabbing stuff out of the event target without having to to type out event dot target dot name dot value and so on and so forth and now we're going to create a billing details and this is what's going to be used uh when we actually submit the payment so we're going to have a name an email an address and that's gonna have a city and line one is address this can be submitted to stripe state and then a postal code which we're gonna have zip in here so we're gonna use that in a second and now we're gonna have a card element elements uh yeah we're gonna call it card element and that's going to grab the elements.getelement we're gonna grab the card and essentially we had to remember here this element type card we're basically grabbing the element again and then we're gonna have a try uh catch block and use this and now inside this try catch block uh we're going to do a response and i'm going to use some people use axios i'm just use fetch it's a little bit more of a pain but we're going to do localhost we're going to do our back end which is on 4001 and let's create a new web hook we'll call it just stripe and we need a few options in here this is really important i when i tested this i messed this up so make sure you put the right options we're going to do post and we're going to have some headers and we have to do this content type and we'll do application json and then we want to send over a body and we're going to stringify and we're going to send an amount 19.99 and then that should return a secret which will do structure right now and we'll await response.json from it and i guess we can console.log by the way uh shortcut clg and then that will console.log the uh we'll do secret secret and so before we get too far i want to just see if i can get this working so let's go and jump on into the back end to our app.js and see if we can create this uh this end point which will just take a second okay so in this endpoint we uh we're gonna use express again and this one's going to be called uh a post and one thing be careful this is this special we had to use this express.raw so i'm going to create another endpoint but this one i'm going to use express.json and when you set it like this it kind of sets it for the whole app and if you put this at the top you're going to have some weird errors when you run this so always always always when you're doing the stripe web hook don't put use this app excuse this this is basically setting a middleware for express json so you can parse the body of the message that comes in always always always put it after this web hook call or it won't work i ran into that problem so i'm gonna do an app post we're gonna make our new stripe endpoint once again it's async with a request and a response and we're going to grab an amount and i'll talk about this amount one second really this amount here is a pretty bad way to do it like normally you would never put the amount in through the response to a back-end endpoint like this because someone could just change this amount to one penny and then get your product for free so what you want to do is you would want to maybe send over something else that identifies this uh unit or this this product maybe or have an id or something and then you look up in a database and also maybe you show the amount and then you calculate it on the server side and then charge it otherwise some people will abuse this and send over a penny but for this demo i'm going to leave it on a mount here but i'll put a note here should never trust the client side amount and then we're going to do another try catch block here and i'll just use this and this is where we're going to use a payment payment intent so i'm going to do payment intent and this is basically uh in the official documentation this just tells stripe like hey i'm going to start doing a payment here try to record this and you can actually keep track of payment attempts it even says like you can do this as soon as someone gets to the checkout page create the payment attend even before they fill everything out just so you can keep track of this so this actually doesn't charge their card until it's done now you can there in some tutorials you may see people charging the card at the payment intent and you can do that with an optional parameter i think it's better though to an official documentation kind of recommends this to create the payment intent first and then pass the secret key from the payment intent back to the to the client side and then have them complete the purchase that way if something happened with their internet or like they lose connection that it you know they don't automatically get charged it doesn't get charged until the app loads again so that's the way i'm going to do it but i mean you can leave a comment below if you don't think that's right or you like to do it a different way but that's literally what they recommend in the documentation and what i've seen other people do so if you do paymentintent.create and then this is going to take in the amount and then currency which will do us dollars obviously if you're in a different country you do something else and then we're going to have a response dot status we're gonna send to 200 and then we're going to send a json object back which is going to be a secret and this is going to be the payment payment intent dot client i think it's called client underscore secret yeah underscore secret cool and then if obviously there's a problem we don't want to send the intent and we'll use console.log on our air air and then we'll do response dot status 500 or whatever one you want to pick probably 500 would be great because that's server error but then you can do error here and this is it for our server-side code for this whole app so this is our new stripe endpoint and we just grabbed them out we're creating a payment intent and we're sending the secret client secret from this payment intent intent back to the client side and obviously on the client side you won't want to ever want to save this secret but it's just used for it cool and i can check to see okay it reloaded no errors so now i can go back out to my checkout and the next thing i want to do my checkout is i created handle submit create the billing details create the backend endpoint now we need to submit the fetch the backend in sent this handle submit and then create create the payment method it's a mouthful i know okay so i'm going to go back to this really long handle some end this is probably the place where you maybe want to break this into different pieces but since we're doing a demo i don't care and also i'm not catching any errors here or doing anything so we'll just assume that this went through correctly and we have this secret and in fact maybe we could just test it real quickly so i'm gonna inspect i'm gonna go to my console uh make sure it doesn't oops i have an unexpected word reserved word oh um here i have this await here this await fetch so let's go back up here it's a weight fetch but i didn't make this function async async and don't by the way i'll do i think it's async there we are by the way if you're using view 3 don't put the async on the setup at the top otherwise it'll think it's a suspense function and that'll screw everything up so always always always make sure you put the async on the vent itself it should still work without having to put the async on the setup so if i refresh it again okay everything's back and running we'll look at this loading don't worry about this loading error right now so or warning really okay so if i just press pay 1999 cool so it came back it sent back the secret key which is good we don't really need it but we'll we'll take care of it we don't really need it right this second but we will use it inside here all right so sent back to secret so now i'm going to do is i'm going to create a new payment method request request and that's going to wait stripe if i can spell right and this is probably also where having typescript would be nice because it's really easy to mess up the names of these things create payment method and this is going to take a few things here it's going to take a type which is going to be a card card and this is going to be the cart element that we created and then we're going to do billing details and this is going to be the billing details we created earlier that's this billing details here oh by the way i know what's problem here with this loading i didn't pass it back out so let me just do that real quickly loading okay so now if i refresh it okay everything's working fine so now i still haven't build the card even though i've done all this so the last part we really need to do is is build a card so we're going to do error we're going to wait stripe and we basically you do this confirm card payment and then you have to send in the secret that we had earlier secret and then we're going to have a couple of things inside here we're going to send over a payment method and that's going to be this payment method request and that's going to be payment method dot id i think it is there it is yeah that's it and if it has an error it'll display an error and we can catch we can do something if this error do something but if the errors doesn't exist it won't return it and then we just assume that everything works we'll do a loading value false i guess we can if error turn but otherwise loading value equals false will console well we'll also do a router here and to route to a different page and i guess we never okay here's our catch here we could surround this whole thing in another try catch block but i'm not i don't think i'm going to so i i do want to use the use router so i'm going to route to a different place if it succeeds so i'm going to do import use router and this is part of v router 4 i believe and then inside here we'll we'll add something called const router equals use router and now we should be able to use this router to actually redirect to the right place so i'm going to come back down here and if this all worked i'm going to router.push to our success and then we'll check to see if it came went through all right so let's see if this works i'm going to put in a test youtube test uh example we'll call it test youtube at example.com 1234 street uh i don't know new york new york nine zero zero two three and there's no validation in any of these forms but obviously we could and then we'll just put in a random number and you can put in a test number inside here so one of the test keys for stripe is four one one one one it's also four two four two four two there's another one and i'll put one two three eight nine five two three and if this all works we'll submit it you can see how it's loading and okay so we got an error that reference secret is not defined on line 190 so we had an issue here because something is not right so i had this console log secret let's let's do this uh since it's in this try catch block i'm gonna move this all up into the side the try catch block try it again okay so let's try one more time so we'll go test youtube 2 test youtube 2 at example.com 1234 street new york new york nine zero zero two three and we'll put our test number in here and we'll do ten twenty three one two three eight nine five nine zero zero two enter awesome looks like success worked we did it so now we can go into our react payments and we'll refresh it and cool here's our test youtube two here it is we can also get a bunch of information about it succeeded the id number um what credit cards we used related payments uh it says the address even though uh it's burned in nevada giving gives you a map awesome so we have done it we have created our own uh checkout page and it's all working and i believe if we check the uh our payment intent was successful too so it went through here and we could have done something on this side since the client side actually charged it now we have the correct the web hook got triggered and now we have it on the back end side too perfect all right so this is not done if we wanted to continue on one thing we can do is obviously add more error correction in here we could also in our as i said earlier on this page right here uh having some better validation would be great to make sure all these were actually filled out before you can hit the pay button getting validation on the card number so the pay number doesn't uh highlight until you have an actual valid credit card would be another thing adding in something into our app.js file to do something with this web hook so that way we like talk to a database or we send out an email to the client like there's a whole bunch of more things we can do but i think this is a great starting point if any of this was confusing feel free to kind of go back through the video try to understand hey developers today we're gonna look at something really cool it's a brand new library called petite view it's an alternative to view let's see what it's all about and during this video i'm actually gonna create this app this is a itunes search so you can put whatever you want in it let's say let's say taylor swift and it'll bring up the album artwork the name of the album and then i'll link off to the actual page with information more about the actual album and itunes so this is using the itunes api i'm also using a little bit tailwind in here so let's see how we can create this and i'll explain everything about petite and how you can get started alright so petite view you can see right here is on github it was released i don't know probably a month or two ago as of this recording so the idea is that it's an alternative distribution of view optimized for progressive enhancement it provides some to say template syntax and reactivity model but it doesn't have everything in it in other words it has a lot of the features view has but it's really small five kilobytes and doesn't have all the features but this will be perfect if you want to take an existing app and add some reactivity to it and you don't want to bring in a whole framework and use the cli or bring in view itself which is much larger so you can see here some of the examples it's uh it says it's view compatible template syntax it's dom based it's driven by v reactivity some people compared to astro which is something i've never used but i guess that's another really small reactive library and if you look at the syntax right here it looks it does look really close to what you would use in a view app itself and uh so yeah i thought we could just kind of go through it and try this out and see how it goes and see if we can create this at the end well let's let's go ahead and open up our editor and since this framework library is supposed to be used progressively enhance and in other words take an existing app i'm just going to create a brand new html file and start from scratch i'm not going to use any uh npm packages i'm not going to use any other frameworks we're just going to create this all from scratch so to do that i am using vs code i'm going to do a new file and i'm going to save it i'm going to save it as index.html and now we are in our files since we're in a new file i can go ahead and use some emmet here and i don't know create some boilerplate and the first thing we want to do is actually use the cdn version of it and it even tells you here in the documentation that you can use the production cdn urls or you can use uh the esm build urls but we're just going to use the the one it recommends here right inside the script tag so we're going to go like this we're going to copy and paste it in here i'm going to copy here cool here's my script tag and i'm actually going to use a tailwind as well just for some styling so i'm going to copy and paste that from my other screen here i'm going to add some basic styles so i think that's it let's change our title here i know petite view example and also i use this plugin called live serve so if uh if you go into the extensions here and look for live server it's right here and it allows you just to like really quickly actually take your html and creates like a mini server out of it so we're going to use that for this project so i'm just going to open up live server and that will open up on port 5500 so it's actually changing to 5501 because i already have 5500 taken up but see there's nothing there but if i do a hello world hello world let's do an h3 hello world we got a real ugly hello world right there so the first way you can use petite view is actually use it with this cdn tag so if you do it like that then you should be able to just mount it right inside the dom so i'm going to create a div here and i'm going to create a v scope and this is something that tells it that hey these are going to be inside this object is going to be available and be reactive inside this div block right here and i'm going to have count and i'm gonna add a button and here comes the view syntax i can use at click and i'm do count plus plus and i'm gonna call this an increment so if i did this right it should show okay so i have a button here and just so i can see it's a button i don't know i can class background blue 300 rounded shadow so this is a little bit of there it is there's my increment and if i increment it it's great it's moving up as i expected so right here i already have a very simple example of using reactivity here i have a number it's incrementing it's working but obviously this isn't the greatest way to do things you have to kind of create this big object here and put everything in it you have to like inline it inside your html so let's see a better example of maybe doing it with using the script type equal module which i think is a little bit easier so at the bottom of our body here so i'm going to first i'm going to go into here and comment out the script i'm going to create a new script tag here and inside this script tag it's going to be a little different i'm going to do script type equals module and now i'm going to import in and since we're doing modules we can actually do the syntax here we're going to do create app from and this is where we grab in the unpackaged.com petite view and we'll do dollar sign module or question mark module and that will make it a module type syntax in here and now to use this we can actually first way is we can just use create a react create app here and we can put in make an object and just put whatever kind of reactivity things we want in here so the most used to be count i suppose and then we can even put increment in here i guess i called it here yeah i didn't even have a name of the method here but i can create increment um we can even make it a yeah we'll make it a function here and we'll take this dot count plus plus and then you can set to where you want to mount it in the dom so instead of using this v scope syntax i'm going to just comment this out and we're going to create a new div and this time we are going to add an id and i'm going to call it uh example and since it's a id we put the hash mark there hash example and now i should have the same sort of things i had in here let's see and i don't have to put this v scope because it should have the scope in there so i have a button and now i can do a this click handler instead of going to count i should have access to increment and let's see if it works the same way and just to make sure i didn't i didn't mess anything up increment example two will be the name of it and cool so it's working the same way if you look inside the console there's no errors so we know we're it's working as we expected so this is a little bit more cleaner but what happens if you wanted to create like components and reuse those components uh so the the probably the better way to do this is to kind of refactor this one more time so instead of having this create function right here we're going to create i know we're going to create a function so i'm going to call this example func and now inside here i can kind of put whatever i want and i'll just return the object just like i did before but it's a little bit more reasonable so i can put my count here and then once again i have my increment which you know this dot count uh plus plus and then inside my example function where this create app is i can just pass in this example function instead and just to make and actually how about we do it um this example equals this got count plus two so maybe we'll do it by two this time okay and actually we need to add right here example funk needs to be a function so let's see if it works i'll re uh refresh it got no errors cool it's going up by one if i do two here cool it's going up by two so definitely still working uh so you can even do something more difficult than this let's say we want instead of doing this dot count plus two what happens if we wanted to like pass in a prop to it so let's have a prop here and this is gonna be a object and we'll just say prop.count so that'll set the initial amount so what i could do here is in this example funk i can actually pass in the count and then what i want to start with maybe i want to start with 20. if i refresh it now it starts at 20 instead of zero so now i've basically created a prop that i can pass into this component which is really cool um but what happens if we right now you're kind of mounting it to one place as example but what if you you can actually also set the template inside here as well uh so inside this return statement i can set the template and that way i don't have to mount it directly so to do that you use this dollar sign template and then basically the same thing i had before so i'll have example here and then in here i don't actually have to [Music] um put anything in here and if i refresh it it still works the same way and now i don't have to like declare the template in here and in fact uh so i have example here so we can actually change this to a template so if we change it to a template refresh now we actually have to do one other thing since it's now a template we have to uh kind of call it somewhere so we'd have to do a div here and in this div i'll do v scope example funk and then we'll pass in the count 20 to it and if we save it oh and we need one more change we just have to change this example funk we're going to send it pass it as an object back over and so i'm going to take this out so it passes it like this and if i did this right should work cool so now here's my increment it's working now if i put in i don't know 25 it starts at 25 and actually i can duplicate this two if i wanted to let's so let's say i copy this a few times uh yep here's 25 27 and they're all individual numbers now you're probably thinking well how do i share information between these components well you could like maybe figure out a way to like pass in the same props to each one of these but uh one other kind of cool way is since we're using view we can actually use this thing called reactive uh so i'll show you so we kind of put in reactive here and then i can create like a store basically so i'm going to create a store here it's a reactive object and we're just going to put in count in the store so it's available and now i can use this store in my app so i have this example func i'm going to put store here instead and then store has a count it doesn't have an increment so let's let's kind of refactor this let's add an increment here too and this is just going to do this dot count equals this dot count let's do plus three this time and i'm going to delete this out and this so we're actually not going to be passing it into the into the prop here and now we have available to the example funk and the store but what we want to do here so we'll delete these out and this time we'll be using the example func but we want to actually use the store so inside here is v scope i have this count but i'm gonna put store.count and store.increment so it's grabbing another store instead so if we refresh it there we go so now you can see here i'm clicking here it's actually using the store one that's shared between all three because now we're using this store.count and so we could kind of share this information we could also have another variable inside here and then interact between the two so some would be locally to this example function and some would be like globally so you can kind of get an idea of how to do this so i think since we understand all of this uh let's go and just try to create this itunes app okay so for the sake of time i went ahead and just copy and pasted the html and css with the tailwind in there that way you don't have to spend watching me type in the css classes but for example we have a form here we have an input with some shadows on it we have a button that says submit and then we have this right here which will be uh our results and we also have an href so you can link to the actual pages and we have a h3 and image tag here so this is what kind of looks like obviously nothing's working because we don't have it uh configured correctly so that's where we're gonna do this i went ahead and commented all this rest of the stuff out so uh what we need to do then is to like you know create our our app here so uh i'm gonna create there's a couple ways to do this uh i'm gonna create this as a store um you could certainly create this as a function but i'm just kind of thinking out loud here but what else if you wanted to use this on the page in different places maybe you had like a pop out from the right or you had the top right hand corner as a search and you just kind of wanted to share it you can make this as a function too but i just want to create this as reactive so in this we're going to have a couple of things first i'm gonna have a search text which i'm gonna leave blank here i'm gonna have a results text which i'm just leave blank and then i'm gonna have this search i'm gonna use it async and the search is gonna actually kind of get our our search for us so i'm going to call itunes search and we're going to use fetch because we're going to use this all client side we're not using server at all and i'm going to copy and paste this url a lot of people are asking me i've done something similar and people like i can never get the itunes api working uh it always gives me coors errors and that is true it is a little tricky to use but i will show you um i will paste this here this is the itunes url that i'm using and the thing that people miss is you have to put an entity type if you don't if you leave the entity type out you'll get a course error so make sure you do that and i'm going to make this like this so we're basically we're grabbing the search text from here um and i'll leave a description i'll leave a link to the code in the description as well and what you want to do is we're going to wait for the results which can be itunes search dot json it should come back as json i'm going to console.log it because i've done this too many times now and had problems and then if this all looks good i have this results in our object here i'm just going to assign it to the res results which is like a big array of stuff and that's all i want to have here so let's see if we can get this working here uh in our reactivity here so we actually do still need to mount it so let's see here we're gonna do well well i'll just type it out create app we're gonna pass in the store and remount it i'm going to call this itunes search so should mount it now this store will be have access in this itunes search so if i go back up to the top cool here it is so first since we're using view we have access to all the view directives that you know and love so the v on directive um so um the v bind so we can do this on submit we're going to prevent which by the way the the dot prevent works as well and we're going to go into store dot search by the way here's the id so this is where we're kind of pulling in the code and i have to spell search right there it is and then we have this button here and we have this class for the submit so we want to actually add a click handler so when you well it should be caught by the submission of the form but just in case we'll just also put store.search here as well and this is where we're going to put the results but let's see if at least works first oops i actually forgot the pound sign here let's try that again okay i'm not gonna worry about that error right there but i'm gonna do taylor swift cool so i do see some results coming back they are empty so let's see here what happened with this network request oh so it didn't get the term yet so i have this dot search text but i really need it to work with the input so i need to add in v model search text so now it should be two-way data bound okay let's see if we can search here and we'll just do taylor swift cool so we see that we got response back and results here show everything that we want oh by the way if you do have any course errors here one thing i also notice is that the response headers shows that access control allow origin is this 5500 um so you may you may have to play around with what ports might work correctly for you and make sure that you're sending the correct headers over otherwise you know things will not work correctly for you so just keep that in mind if you have some problems with it all right so we definitely we are definitely uh receiving back a whole bunch of stuff which is good so let's see if we can actually get this inside our app so we can uh display it so uh here's the results section and like i said i'm just using a basic uh basic tailwind with grid css grid in here so the first thing we want to do is where this big class is here we're going to add in a v4 so it should be album in store dot results that's where we're going to get back and it's always good idea in view to add a key here so we're gonna do album dot collection id and you kind of have to just kind of look through everything to see what all this is by the way and this href is supposed to be album artist view url but if it's blank we'll just have a pound there and we're also for this image which is probably what everybody really wants well actually right here we'll do collection name first will be album dot collection name and here this source right here will be album dot art work url 100. and keep in mind this colon right here because we're binding it that's the same thing as doing a v bind and same thing here with this href we're v binding this in here and that way you don't have to do anything else so let's see if that works and refresh it let's put in taylor swift cool so here we've gotten everything coming in all the album artwork now looking at the results i couldn't find like higher quality images and can i kind of blew them up so they're a little bit fuzzy but uh you might be able to find i couldn't find anything really good they only have a these are more just thumbnails so they have 60 by 60 and 100 by 100 um as the different thumbnails but you can also put in like the genre and the copyright and things like that and the price if i wanted to but once you click on any of these then they'll actually go to the page if it's there so in this case should be like this let's try that to this and let's look in our console there we go yeah so now it's working right uh it's bringing up the right pages opening up a new tab which is awesome cool so i hope you guys learned something here this wasn't too bad i could also now like this react if i wanted to i can reuse it in other places hey developers today i'm going to show you guys how to use the script setup tag inside vue.js and why you may want to use it on your next view app all right so before we deep dive into this script setup function inside view i thought i'd show you just a quick example of how vue works with the options api and take a little bit about a little bit about the composition api and then take a look at this new script setup so here i have an app open here it's a view three app and usually they typically if you're using the options api which was really popular and came with view two and it also works with view three as well by the way just realize you have a lot of options when using vue.js3 you don't have to use decomposition api or this new script setup is you would have this object here and usually you have export default in this case i'm using typescript but either that's why it says define component here but otherwise it just say export default and it's basically an object of options that you can use so with the options api you might have something here called props you also might have something here called methods uh some one of the most popular ones that everyone uses is to do the kind of the reactive data binding inside view you use this data option and then inside this data option you would return something so you would return always an object of something so i don't know i'll put hi let's do one called name and we'll put eric and then once you do this this data which actually in this case will make it a function here this data will actually be now available inside your template so if you come down here to the bottom i have this template i don't know i can do h5 let's do an h5 and i'll just put in eric well this case will be name and if i save it and come back over here you can see here is my app it's already loaded by the way i started the server you see eric if i change this i don't know to eric one two three you see it's changed to eric one two three sometimes people when they use the options api they actually like to create an object here so a little trick here if you didn't already know it you can actually turn a literal here do an arrow function and then you don't need this return here so i can go back here delete this delete this delete this and this does the same thing this is just another fancier way of of using es6 to return an object in this case it's the same thing and we have eric123 so that's basically the options api there's a whole bunch of things here like i said methods and computed properties that you just put it with inside this this export default default object now with the setup function came with view three we have this other option here and it's called the setup here and then inside the setup this is where you could declare your variables so in this case i could just put in let name equals eric and then i would return whatever variables i wanted to use in this case would be name so if i do like this this is equivalent see it works exactly the same way if i put in eric 456 you see here it still works as we expect it too it's just a little bit of simpler syntax and you put all your information in the setup function now the nice thing about this is you can kind of put all your different computer properties all the different things into one area you can even x put these into different files and then import them in and create something called composables so you have a lot of options here now if you're using this setup function in this composition api you're typically still going to have to put in props here and define them with props like this and you still define components in a components object or array where you have to define each component and you have to define these components so that they're available inside the template so let me show you what it looks like now if we let's say this example we just have something very simple the hello world and now we're trying to convert it over to using this script setup so this is pretty easy so all we need to do is i'm actually just going to delete this whole thing and instead of where it says script language ts here i'm should put in something called setup now this function will be this kind of uh which came in view 3.22 this new setup script tag and this new way of doing it so instead of having to define our components and return them and define them in the components array or create reactive variables and return them we just can just put them in here like this so i'm going to put let name equals bob and if i save that it just works see right here i didn't have to create this object i didn't have to put a data i didn't have to return anything from a setup function it just works which i think this is one of the reasons that this might be the way people in the future use vue i i really think this is so simple that uh let me say for not simple but straightforward there are some things that can be complex about this and i'll talk about that later but this is so straightforward that i think a lot of people could could really understand this and use this method to create view apps so uh you know i mentioned two components i can actually create a component i don't have to actually put it inside any i don't have to declare it anywhere and it'll just work so let me show you how that works so here i have an empty components folder i'm just going to create a new file i'm going to call and we're going to make the the quintessential hello world view file and i'm going to put a script tag here and let's do script setup and actually i don't really have anything so i'm just going to put in something that says hello hello from component and yeah we'll just leave it empty like this for now and i should be able to import it into my app view and to do that inside the opening closing brackets of the script tag i can just import in uh we'll go components slash hello world.view and we have to go import hello world because the default import from and we'll make sure we have this here hello world import there cool now so now it works so you can see here we've been able to import in hello world the component we've been able to create reactive variables here or a variable that shows up inside this template here and we haven't really needed to do anything else all right let's take a look at how you can pass information from one component to another using this new script setup so it's a little bit different than you've seen in the past so first normally what you would do is in the options api you would have to declare a props variable an object and you would declare what you expect from it if it's required and defaults but it's a little bit different when we're using the script setup so let's assume that from our really simple example here that we want to pass in a name a name so what we want to do is i kind of clean this up a little bit i just have this hello world and i have hello from components and i just want to display the name that's passed in so to do that i just need to create i'm going to create a new variable called props and what's really neat about this is these are there's a few things called uh define props which is actually a macro that's built into the script we don't even need to import it in and it will work for us so we just need to do define props and then inside this define props we'll create an object and this object will be whatever prop which we're expecting to be uh passed in so in this case we're gonna call it name and then the type is gonna be type string that was capital s and now we should be able to access it right from here so i'll put h5 right here received name and then props dot name and now if we come back to this hello world here i can just pass in bob one two three let's make it a little more fun let's call it eric and i'm gonna pass it i'm gonna bind it that's what this colon is right here that works the same as in view two and we're going to just pass in name and if we save it and refresh you see here receive name eric sweet so we know right away this is working correctly and just so you can see a little better i'm going to turn off my video all right so now we've have this defined props here but what happens if we wanted to put like a default value in here so the way you do that is you can't just add in a default value inside this this curly brackets but what you could do is you use this thing called with defaults you wrap it in here and we're gonna have to delete this out of here and the next thing we need to do is we pass in an object to the second argument and this argument will be whatever defaults we want so we're gonna call something called name and then we're going to let's say the default we want to stewart now one thing this is not going to work is if using this with defaults we're going to have to use typescript to define it so the way you do that we can do something like this we're going to use these greater than less than which kind of infers the type for this define props and we're going to have a name and it's going to be type string and since it is optional since we want it to be optional because we'll assume that if no someone doesn't send over the name then it'll send stuart we'll just put this question mark here and if we do that for once again looks the same here but if we go back to the app view and we delete out name and we save it you see now it started with stuart so that's really cool uh typically what i would do also i wouldn't necessarily just put the type in here i would create an interface or a type so i like interfaces so i'm going to put make an interface called props i'll put name and type string and then i'll just instead of just having it like this i'll pass in the props so this is typically when you see like in production so now i have this props here props dot name and it's coming over fine and let's say if i take this question mark out and i don't send anything over you'll see here you'll get a warning in the console missing require prop name hello world string hello world name also let's say i put this question mark back but instead of sending a string i send a number like one two three now it will display here well actually let me save it again and i'll pass it in let's do name equals name name you'll get a syntactical error inside vs code i'm actually using a plugin called volar which helps catch these things i would highly recommend you guys to install it i kind of like it better than vtor right now it tells you right away that number is not assignable to string and you can see it shows up here but if you look down here in the bottom right hand corner you'll get invalid prop type name so it gives you some warnings in the console as well but i think with typescript this is probably the the best way of doing this another really popular option is to pass functions into your components now in react this is done a little bit differently but the way view works is you usually pass values down and you met them back up so you're kind of have this this pattern where you emit and you send data from the child component back up to the parent component so let's show an example that so i can create a function here i'm going to call it the pressed function and all it's going to do is show an alert that says hello from pressed function something really simple like that now i can pass that down and we usually do that inside view is you can pass it down with and bind it but usually you want to use this at sign and you this means it's like an event that you passing down an event which is this pressed event and you call it whatever you want and then you pass in the name of the function now right now it's giving me an error because it says that it's not assignable to undefined because i haven't defined it so now going back to our script tag right here and i still put it at the top i can actually use something called define it's called define emits and define omits accepts an array of strings and these array of strings are all the different events that you're being passed down to this component and since we know we just had one called pressed that was passed down we'll just have it like this so now we have access emits has access to press to push this event back up to the parent component and we can kind of test this out so to test out i'm going to create a button that says uh press me and i'm gonna have a click handler here and i'm gonna call it uh get alert which i'm gonna actually do at click equals getalert that make more sense and now i have to define getalert now by the way i kind of like i don't really care which way to do it some people like creating uh functions like this some people create named functions uh just depends on your preference just for right now i'll just create a function called get alert and all it's going to do is i'm going to use this new emits that we created and we're going to pass in uh we have to tell it what to do and we're going to do the pressed action so if this works this click handler should get this hello from pressed function let's see if it works refresh it here's the press me cool so hello for impressed function so it worked as you expected and it's going to work these events work just as what they've done in previous versions of view so let's say you wanted to actually pass something from the child component to back to the parent component let's call it uh event type string well we'll call it info and so i could do something like this i can do plus info and i'll put a space there and now it should accept it so in the second ver argument into emits i can put in whatever test and now if i refresh it and press me you can see here now the alert as this whatever test so now i'm passing stuff from the child component to the parent component another nice feature of this script setup is that we have this top level async await which is pretty nice so this pressed function right here it doesn't really do too much it just shows this alert but what happens if we wanted to have it display some information from a website so let's try to do that so i'm going to delete this function here or i'm deleting the alert and i'm going to actually fetch some data from a pokemon database so i'm going to grab some info here we're going to wait we're going to fetch and i'm just going to grab from this pokey api.co api v2 pokemon i'm just gonna grab something from ditto and to grab the data itself i'm gonna grab by the way i'm just gonna delete this i'm gonna grab some json and i'm gonna wait i'm do info.json and then finally i'm going to set it to a value that will display here so i'm going to create a new uh i'm going to create something called pokemon and i'm going to use this thing called ref this actually creates a reactive variable and i'll create it i'll set it to null for right now and to get that we actually have to import in ref from view and so this by the way i didn't explain this is more of a composition api but if you want to create reactive variables there's something called ref and there's something called reactive but we'll just show ref for now and what we want to do is we'll do pokemon dot value and by the way anytime you use refs you have to use dot value to to assign it and we'll grab the json from there and then we'll also console log out the pokemon.value to see if it's working and you can see right away i have these awaits you're probably thinking well can i just set this function as an async function and the answer is yes so if you have dealt with the composition api and you've dealt with async await functions a lot of times you have to wrap those in a mounted or one of the life cycle hooks or you would have to kind of figure out a different way to do it um but this way you can actually wrap it in this async function here and you don't have to do anything else you don't have to like do anything special here so now this pokemon should have this information in here and if we want to display it we can just do i don't know we can do a div tag here i think it's actually uh we'll just do this we'll do a div tag we'll do vf pokemon and if the pokemon exists i'm gonna add an image which will have which will bind to pokemon dot sprites dot back underscore default so if i got that right we should have the information we need and don't worry about this it's actually saying sprites does not exist resist and type never because we actually never assigned it a type for this pokemon um we have just ref equals null here but we could do as any and right now that gets rid of the typescript error but we'll we'll look at that later so right now we have this i'm just going to fix this real quickly we don't want to pass anything into it and let's see if it works so i'm going to do this press me oops we actually have missing a colon here so i'll save the colon and we'll refresh it press me cool so it actually grabbed the ditto uh value there for the back default cool so now we were able to do an async function works pretty well the last thing i want to show you guys is using adders so this is kind of more of an advanced feature of view but i think everybody should know about it essentially what you can do is when you pass values in from your into your components you don't have to necessarily define them all inside the props if you don't define it in the props it'll naturally just add it to the or outermost tag that surrounds the child component i should say uh in cases like this you're gonna have problems so let me show you an example so i have this hello world here and let's say i was going to pass in i don't know class equals green so just a string called class equals green and if i refresh the page here you're going to get a big error that says extraneous non-props attributes were passed an opponent but could not be automatically inherited because uh component renders fragments or texts roots so to get past that error there's the simple ways you just have to take the root and make sure you have one and only one single root element of your template in this case i'm surrounding it in a div tag so if i do something like that and i and if i try this again i'm not getting any more errors and i guess to show this a little bit better is let's say i was passing green in to this hello world i can create i don't know a style and in style i'm going to put a green class and it's going to be background color green and then i can just see if that works so you can see here it added its background color green to it but if i take away this div then it goes away because it doesn't know where to put it and it gives a big error so obviously that's probably not what you always want to do so one thing you can do in your child component is to tell view that you don't want it to and not automatically inherit adders and to you can basically place it where you want to place it so unfortunately since you're using the script tag you're probably wondering like how do you do this like how do i tell this to not inherit adder so if you're using the options api in the past you would have inside your props or inside your object when you're defining your component you have something called inherit adders but you can actually do the same thing and the way it actually recommends is to create additional script setup so don't ever feel like you have to have only one script set up inside your view single file component you can have multiples especially if you're using this script language because there is some third-party libraries that you can't use with the with this with the script tag with the setup so you're going to have to create another script tag so you can do script tag um laying equal ts this time don't do the setup because it isn't and i can just do the export default and i can put inherit adders and just put it to false and if i do that i'm no longer getting the error but now it's like how do i get the green background style to where i want it to be because it's there's no it doesn't know where to put it so inside your script link ts here this one you will have to import you can import in it's called use adders and i'll it's without the quotes from view and then you can have basically you can have access to it so i can do const adders equals use adders and then i will and by the way it's you have to import it in like this and then if i console.log adders and i refresh the page now you can see here i have class equals green in here so if we now wanted to use this adder somewhere we have two ways of doing it we can uh if we wanted to we can let's say we're gonna just add it to this h3 tag we can do vbind equals and then we can put in adders httrs so there it is worked for us and we don't have any errors or let's say we didn't even want to use this use adders at all and let's i don't know let's just comment it out we there is specifically in the template you have dollar sign adders is also available and if i do that right which is adder's not defined i have to save it like this you can see it works the same way so we can either use use adders and then bind it or we can use dollar sign adders now i'm not going to show you this there's also there's also another one for slots there's also one called use slots um so if you're dealing with slots you can kind of do the same thing and you also have access to dollar sign slots in the template so thank you guys so much for watching that's a lot to go over so we went over everything from using the script setup from using define props define emits we used deep with defaults we even looked at creating multiple setup functions so i hope you guys learned a lot from this so the first website the first project i want to talk to you guys is created by black sonic it's called the view 3 playground you see it was just uh updated on september 20th and it actually has its own demo so you can kind of take a look at it so this one the reason i included this on the list is it has some nice features it has a whole form here you can see here has this kind of cart interface so it's almost like you're having you're building this like a a practice cart sample a shopping cart has like payments has credit card debit card you can have this checkout page now if you look at the source code i know it's going to be kind of hard to see with my head so i'm going to i'm going to make me myself a little smaller here so if you look at the source code right here the source in javascript there is a couple different things there is code for normal javascript you can see how he did it now this is all in view three so it'll have the setup function you'll have watches you can see there's this watch effect and watch we have on mounted so we have life cycle hooks we have on updated we have checkout system there's a whole uh hooks um there's there's hooks that he's using inside here and it also what's really cool is here's the hooks file right here it also has typescript so if you want to see how these examples are done in typescript you can take a look at that and i'm looking here here's the hooks one in typescript you can see he has this product which is an interface i would only maybe slight against this repo is that the type script is pretty simple i didn't see types for everything i think there's multiple ways of doing types and you can really in your typescript you can really do a lot more types but i think this is a great example of how to use typescript and how to use view three so i would check it out link in the description the next one and i wanted to talk to you guys about is the vt tailwind starter if you don't know vt is a really cool tool to create really fast uh apps in in view so this one is using v it has tailwind i actually downloaded it started it up here you can see you can kind of get an idea of how they used veet so here's the home they have a not found these are just views and then inside the app view you can see there's a lot of code in here but at the bottom we have this data object uh so you could i think this is a kind of cool example of using view three and using it this template um i it doesn't have a ton of view three setup functions and changes in it but i think it's kind of a neat little template you can use i wanted to include it and i think things that are neat i'm going to show you guys so yeah we check out this v tailwind starter uh next up this isn't really a project but i just want to give a shout out to stack blitz they actually have a view three section so you can create your view three apps really quickly i know a lot of people use codepen and there's a lot of these different services but i've used uh i've used a ton of um these ones and i really like stat stack blitz so this is the one i recommend if you just click on it if you go to stackblitz.com you can fork it and then you basically have a view three app out of the box you see here is view three and then you can start testing this stuff out using the setup function things like that so yeah quick shout out to stack blitz next up is a movie app so this is uh on a dev article to build a movie search app using the view composition api i really like this because it has just tons of information on how you would set up this app um you can see here it uses this return function here's the setup well here's this setup right here he's taking out the search and emit you can see how he's doing it in here even has some hooks so and he's using this watch function to grab stuff and that stuff out of this api so this is a really cool example of of using the view composition api and you can obviously get the code for this and try it out yourself so i know and this is another one i would check out i don't think it actually has a sample project yeah here's the source code oh wait the final application let's see if it's up and running oh it's on code sandbox even perfect i didn't even notice that when i first read this yes you can see right here here it is composition api this one's been around for a while i may have even mentioned it in another view video but you know you can put in whatever you want in here i know batman and here's all the different batman movies and it's using that composition api so if you are uncomfortable with the composition api this is certainly a good way to go and yeah because he has his own hooks where he's using this watch function use this use movie api so if you're coming from the react world you obviously see this used keyword a lot and you know unlike the tailwind starter we actually have pretty good pretty good examples of your here of using the composition api so i would check that out oh yeah and by the way he is the same person that created the view 3 playground so there you go another one you might want to check out is this vue3 real world app so this is this there's the examples this real world repo where it's just tons of examples of using different frameworks and libraries and so someone created a view three one which is cool so there's actually a demo here and it's looks like it's a just a feed of data i'm not sure where this is coming from but they call it conduit if we look at the source code i'm not going to get into it too much but they do use composables so they're using hooks obviously and using typescript so which this once again a great way of learning typescript is see the way other people are using typescript and this is a pretty good example of it looks like they are i haven't looked at this but yeah they're definitely using records they're definitely trying to use typescript in the right way because you can add typescript to a project and do it the wrong way by not adding any types to anything so it's good they're doing that and i think they're using uh some sort of i think they're probably using a store as well and if you if you want to check that out um you can check it out oh by the way here is the v tailwind this one around with the starter that i was mentioning before so v comes with view three out of the box and this is the uh the starter for it and this is what it looks like so if you want to use tailwind with it you can kind of take it i also want to give credit to uh we mentioned black sonic a few times but he actually has this awesome vue 3 repo if you don't know what awesome view is it's a repo that has basically it's repo of other repos that has tons of great tutorials information and so i got some of these examples from there so you can see here he has a bunch of articles he has a bunch of packages and examples i didn't even mention a few of them like there's a view 3 to do app that someone had created uh shetland j there's also a view 3 reactivity app which you could see right here which is made by greg there's also vue cart with imports so there's tons of view related examples that you can find in this repo which i want to give credit to because that's where i found some of these all right so here is the view 3 render functions here's the powerpoint i created also i'll put a link in the description below if you want to look at these slides they'll actually be up on my twitter so by the way if you haven't already follow me there so that's awesome so let's take a look hey and if you're new to this channel let me tell you a little bit about me my name is eric i am a software developer at amazon i'm also a big fan of vue.js react and angular and i do a lot of videos and tutorials on those things on my channel so make sure you check me out you can also find my twitter account at eric ch go ahead and throw me a follow that'd be awesome and you're already on this youtube channel so make sure you subscribe so render functions are really cool so let me explain a little bit more about them so i was as a engineer at amazon we're always looking to improve our libraries and i work on the amplify team and that helps you connect to a lot of different aws services and i thought why don't we take a look at view our implementation of view in our libraries and see maybe if in some future updates we can use render functions to make some things a little more easier so i kind of took a deep dive into it i was it was definitely a big rabbit hole of what these things can do i think the documentation isn't that great out there there is some official documentation but not a lot past that and there wasn't a whole lot of examples so the purpose of this talk is to talk a little bit about more about some examples some things i found out some things i liked and some things i disliked about this so if you're completely new to view let me tell you a little bit about what render functions are so i put this in the background we need more power captain because that's exactly what render functions will give you basically render functions are a way to write view code without templates basically it's an alternative to templates and if you come from the react world you may kind of think of jsx but it's not really jsx it's it's a little different but it basically is good for certain use cases in the official documentation they show an h1 header and how you can dynamically change it from h1 to h2 to h3 without having a big like if statement or a bunch of if statements if else statements so that's one way you can dynamically create html tags i think it is pretty good for library creators and it's really good when you need the full power of javascript and so you'll see this kind of pattern when you're getting into more complicated apps and you need specific components that do specific things and you're finding out just working with templates and it's just not as powerful as you as you want it to be so javascript will be a lot more helpful and that's what render functions will give you so there's really two types of render functions so here on the left hand side and the right hand side you can see i'm use my laser pointer on the left hand side this render options right here is what you would see if you're using the old options api which by the way it's not really old it's still new but it's it's not as new as the composition api but you use this render function right here and it just has this return statement and the way it works is the first values the tag name the second is any attributes or elements and the third is like what's in between the opening closing brackets of this div or if you're going to nest some information underneath and we'll talk more about what this h function is in a little bit now there is something called the composition api if you've watched this channel i've done quite a few videos on it there's also an excellent talk at vue comp 2021 which once those videos are out you could see that too but here's a return statement remember if you're using the composition api you have to return it as a function that's what right here shows you and you see this is the same example this essentially if you ran this in your view app this would create an empty page with one div tag that said hello and that's all it is it would be the color blue so that's what this outputs from this code here and by the way i put a star here because technically there's another way you can use render functions or return what we call v nodes which helps create the vue.js app template that is and that's using like functional components because functional components can return in i'll show you what that looks like here in a moment so the next page we have here is this h function so this is by the way very before i move on this is view three centric this is what you use in view three this h function so h function is the utility to create v nodes which helps create the your virtual dom for your to view app it could perhaps be more actually be called create v node but it's actually h so when i look at this there's three different ways or there's three different arguments that you want for your h so the first is a is like the string object or function so this is usually like the tag name like for example in div but it could also just be a string or some kind of object or it can be a component name too just realize that this you can pass components in here the second one is optional but this is where you put your attributes your props and events and it's just like an object so you would have the the prop name and then the value for it and we'll take a look at example of that in a moment and the third one here at the bottom you can see my cursor is is the value that goes in between so this could be the nested values like if you have a div tag and another div tag you can kind of nest it that way or perhaps you're just putting the values of whatever tag it is so you could have like a text here here's an example you can bet another you see here this is an array it doesn't have to be an array but you could have just multiple values inside this div tag and look here's a component right so moving on so what are the view directive equivalence with render functions so as i was kind of learning this i was trying to figure out like what are some view directives that i normally use like v4 vf and how would i do this using render function so here's a vf so here's the const show two refs so i'm taking something from the props i'll be structuring it and then i'm just doing a ternary operator here i'm just gonna say if show value is true then show this div otherwise return an empty array and this is one way to do it you could certainly do it another way you can create your own functions that return these h functions back and you can just use an if statement if you wanted to so it's i like the ternary because it's very simple this is something you see in react all the time people use ternaries and i think this will work well another one is using maps anytime you need to iterate over a number of elements like here's an array of fruit then all you need to do is this fruit stop map and then you return from the fruit stop map and li so this would be like an unordered list of fruit that i wanted to display the user and remember this will create the template that your users will see here's another one events and attributes so this gets a little bit more complicated but remember the second argument of your h function here is your events and attributes so you can see here we have type equal text name equals name style background equals c shell and then on input so this is an example of an event that you may want to have inside your view app so in this input every time someone types it would fire this event which then you see this name this is part of the composition api this is using ref it will then set the value of that name on every basically keystroke that you have and so you could have on input and there's on change there's you know on all the on events are you just label it in kind of that camel case and you can add it inside your inside whatever you're creating now slots are a big topic i didn't get too much time to go into them inside the lightning talk and i will touch on them a little bit more here but you can have remember when you have opening and closing tags of a component anything that's inside the opening closing tags would be considered your default slot you can also have something called name slots but for a default slot if you want to use them it's let's say inside a render function or inside your setup function here you could do slot you have to basically first to check to see if there's anything inside the slot and then if you do you could return it or manipulate it or do whatever you want and if using the options the api use this dot slots.default so that's kind of cool just one word of warning make sure you check to see if it exists or you'll get this dreaded slots.default is not a function moving on you can have scoped name slots too so name slots are just anything after the slots here so you have slots.namescopeslot that's the name of it but i could put just slots.yello uh orange or slots dot eric that could be a slot name and all you need to do is what i'm doing here this is a function is checking to see if this exists the slots.name slots if it does then you can then return slots.names name scope slot and it passes in the value so the way you would use this is you could do name scope value it's basically a function we can pass in an object called foo and then in our parent component we can get access to that using this syntax if you remember if you ever use scope slots you use or name slots use this template syntax that was introduced in view.2.6 i think and so you put the hashtag names or you can do v slot too by the way but you do hashtag name scope slot and then equals and then whatever you're destructuring from there in this case would be foo so that would return bars this would return bar and it's a little bit of a confusing example but trust me it works and this is really powerful because you could do a lot of neat things with it so for example you can iterate over slot data so i could take this name scope slot and i could pass it into other slots if i wanted to i could pass it into other components using render functions you can do all sorts of things with it and then you can display it with i created in one project a render component that all it did was it accepted as a slot or excuse me it's yep a slot and then it just displayed it to you using h so i would just pass it in with h so you can also there's a lot of cool things i would also look at the guide for render functions i'll include a link to that in the bottom of this all right so what about multiple render functions per file so this is something i've noticed when i was testing things out you can create a single file component like you hear in the left-hand side and i can put multiple uh components in it basically multiple render functions so i have this export and basically they call these functional components but they can return basically fragments or h's which are v nodes that can be displayed in the template as components so for example i have fruits display that has a div tag and it shows a couple fruit i have fruits review it has like a little emoji smiley face in it and then i have an export default that just has a div and hello fruits and on the right hand side you can see here i'm importing in the named export fruits display and fruits review and the default export fruits info and then i'm displaying it all over here in the left-hand side and this is a valid way of using functional components with this render functions and this h function to create a template so you can have one file here and just have a bunch of functional components that return different uh basically vdom v node doms different information you can compile it all together and have it all in one file which is really cool and display it in one place so here's tip number two is debugging so i if you start creating and you get really into creating render functions you are gonna have run into things like this where you got this really big nested form here's a form tag and then inside that form tag i have a ss which i stand for scope slot which i didn't put in the code right here because this was too big but i basically created this scope slot and i'm passing in the shows that value and then i have an h tag or excuse me i have an input tag which has and it's on every change in the input value it's change it's setting the invent target value i have a button and then i have a shows which is going to what i'm going to actually show to the users and i have this ternary operator where i'm checking to save air.value equals what it equals and then i have this i'm displaying the error value otherwise i go through this map where once again i'm doing kind of a bunch of crazy stuff here i'm just showing doing i'm looking at pasting the the show there and showing the show and then i'm looking show dot name and you can see this is gets kind of complicated in fact this has a bug in it and for those of you who are eagle-eyed you may notice on this line here i'm not returning back to h and if since i'm doing that it silently failed and this was a real example i did on a youtube video a few weeks ago where i was trying to show you how to create a um a tv finder app using render functions by itself and you can see this is kind of hard to troubleshoot in the height kind of confusing when it because because it all blends together because you have all these h tags over each functions over and over again and it's all nested together so if that ever happens to you that's okay so this may not be the best scenario to use render functions i remember during my talk people said well the first the one thing i learned from this talk is not to use this i don't think that's what i that wasn't what i was going for what i was going for is that you can go overboard with this it can be easy to get uh confused because this is so long and what you could do is easily you could break this into smaller parts and and then do it that way or maybe something like this would be better just as templates in a normal template instead of a render kind of this renderless render function with these h functions or maybe use something like jsx so you kind of have some flexibility there you don't have to do it this way i highly recommend probably not doing it this way but i still think that there is a value in some situations i'm using render function all right so that is it for my presentation i hope you guys learned something hey developers how do you use vue x with the composition api with view three let's chat okay so i've been getting a lot of questions about the composition api that new feature inside view three and also how it relates to vue x so i wanted to make it just a really quick video here and explain my thoughts first i want to say if you want to share state management inside your view app you're using view 3 or using view 2 with the composition api plug-in it's really simple so let me show you a quick app that can make this possible so you can do this without having view x installed at all so i went ahead in stack blitz i'll leave a link in the description below if you want to check this out but basically i created a composables folder and inside the composables folder i created this global file and i'm using reactive it's reactive and read only from the view library i'm creating this new reactive object that has count in it and then i have this increment which is increments account and then i'm using an a really simple es6 export default and i'm using the state and increment so we can import this into any file in our app view file here you can see here it's starting in line 16 15. i have this setup function and that's you know if you see setup function that we're using view three and that we're using the composition api and i'm actually pulling in and don't worry about line 17 for a second but i'm pulling in in line 19 right here they stayed in increments so i'm importing it in in line 11 and then i'm just grabbing the stain increment from it and then i'm incrementing it just inside the setup function just every time it loads it increments and then i'm also returning it and i'm using this two refs which basically it's a way to structure reactive objects so that way we have access to the state and basically the state has access to the count right here so it's the the reactive object has count in here so we have access to it and then we also have access to uh increment as well well excuse me just the count in this two refs but i went and returned both of them so right up here i have this count which remember since i used two reps here i have access to it and then i just added this increment to this click button so you can see here i click the button and it works as you expect it to and since we're using this reactive property here you can actually share this with every single component in your app you can share it between routes and it'll be reactive and it will save the state so as long as you don't reload the browser this count will be basically all over the app it'll be reactive and it will be shared between all the state all the routes and everywhere in your app so you can create like a poor man's essentially a poor man's state management system inside of you using this method i actually did a video on this too if you look it's called like poor man's vx you can find it as well however if you are watching this video today you may have realized that vue x4 was just released or at least the stable build of ux4 was just released recently and one thing really cool about the stable version of ux4 and if we look inside the documentation right here if you look at the documentation that's right on right here you could see for view x4 we now have this new use store that you can actually import in from vue x so if you set up your state management system all you need to do is use use store and then you have access to it and you can have actual you can get kitters getters and and computer properties you can access mutations and actions and yeah so there's a lot and even have a whole example here you can pull down this whole github repository and try it out so if you're listening and you want to have the power of ux and the composition api then use vue x4 because it is now stable and out and it'll have that all for you if you don't want to use that there is other like libraries out there that kind of takes your view x store if you're let's say you're on view x3 and you can't upgrade to view x4 right now and you want to have that that uh you have your data in in inside the composition api inside your setup function then there's a couple of workarounds you can do there's a there's a few libraries there's this view hooks library i haven't used this in a while but it has a use state it's called use date and you store and so you hook for view x you can use this use store which if you look at the source code it's pretty simple the way they they do it they also have this view context composition which is another way to basically it's like using the react use context hook from react it's re-implemented in vue.js 3.0 i saw this view x composition helpers which once again you can try to use if you want i think even has typescript support and then there's one other way is if you have inside your setup you can use this get current instance and so if you i mentioned before and i kind of skipped over it this internal instance get current instance if you use this inside your setup function you can actually get access to your route which is this uh internal app instance it has this app contents but it has it has access to this context root which can actually hook into dollar sign store and then you can get your ux store out of that way so those are like three couple different ways you can access your store inside your setup function now you're probably thinking if you're listening and you got this far by the way thank you so much make sure you click that like button and leave a comment below and why do you even need to bother using something like get current instance or use one of these libraries can't you just do this dot store inside your setup function well no you can't you can't use this dot dollar sign store inside your setup function you don't have access to this at all inside setup so you do have two parameters that come into setup the props and the context and the context only has access to adder slots in a minute it used to have i could have sworn at one time but it had access to the route but at this point these are the three that it really has access to so you would need to use something like get current instance so you can grab that root which can then grab the dollar sign hey developers i am going to show you two apps one created in vue.js one created in react we are going to look at the differences between the two and i'm gonna compare and contrast it and tell you as a view developer which one i like better alright so here we are i have vs code open up twice one for my vue.js app and one for my react app and if you don't remember i actually created two apps if you want to i'll put links in the description below to both of these videos where i went through from basically scratch and created an app this is the pokemon picker app where you just type in the name of whatever pokemon you want it grabs it from a third-party ipi you click on it and then it displays some information about it so this one's really simple it just has hard written and tailwind css i'm grabbing the sprites the front and back and just showing you some information on and this is my react app and the view app looks exactly the same and actually i actually put a little bit more information in the vue act app to cart actually displays a little bit more so that's that's what we have in store today so let's take a look at and talk about first of the creating and setting up of the app so i'm just going to riff off of this like i said if you want to jump around there's going to be links in the description essentially when i created the app in view view actually has a whole section where it asks you using the view cli it asks you like what version of the router you want it asks you what router you want it asks you if you want to add vuex asks what typescript and all these are like the prescribed best practices for view so it doesn't give you an option for five different routers it tells you the view router you should install and you have the option of installing it or not when you create your app same thing with view x and typescript it does give you option for css preprocessors so you can choose sas or less or whatever you want there view has a prescribed way of creating their apps and they really do recommend it for you even when you're using view cli which is the way you usually create apps inside view on the other hand when i used react react pretty much had some command line command line arguments that i could send in to add typescript or to tell it if i wanted to use npm or yarn but it's pretty limited right away i saw the difference there of just installing and creating an app the view cli i think definitely beats out the create react app because of ucli gives you some of those nice options hit the spacebar you can add in whatever you want when you create your app right out the door while on the other hand with react you have to kind of do some research figure out what router that you want or what state management system you want and then you have to install it later with npm in the case of tailwind i had to actually go literally to the tailwind site and then follow every single step inside my crate react app to get it up and running it's a little bit more of a pain while on the other hand vue has a whole plug-in system which is pretty good so view plugin system has generators creates files for you and then also have like has hooks back into webpack and so you can run scripts and things like that in my case with tailwind i just did view ad tailwind and it was added into my system and added all the files while on the other hand in the react side i had to literally go npm install the files create all the different files run a bunch of commands add in something called crack oh and do that so that was a little bit more of a pain i feel like once again view definitely beat out in the installation and the tooling aspect of both of those now one thing i didn't play with and if you're a react fan you may know this there is a create react app has some sort of template system or where you can put in a template and it downloads it for you i looked for a tail one one and actually i could not find one that would work out of the box with create react app feels like it's still pretty limited and then you also have to know what those are on the other hand view if you didn't know what plugins to use there's actually if you just type in view ui you can actually run the ui version of view which i didn't show in the videos but it's really sweet because in the ui one you can actually just search for what plugin that you're wanting to use so if you wanted to add in till when you just type entail into the top and it lists the plugins and you click a button and basically installs it into your app so it has some it's very very developer friendly in that aspect i know in react though you did get out of the box testing out of the box um also the directory structure react and just like view you get the folder structure with all different folders where you should put things in the racks one the unit testing out of the box as well in the view one you actually pick if you want end to end or unit testing when you run vue cli so it's a little bit different one thing you could see too just from the folder structure here view has this router folder that it added once we added the router and it has this views folder where we put the views and then that that's pretty much it on the react side you just really have this source folder well you do have a public folder in both but you have the source folder and that's assuming you put everything in there so you're really left up to how you want to organize your structure of your components while on the view side with view cli you get a little bit more idea of where you should put things like they put a views folder for you so you assume maybe that's where you want to put your components and then maybe you put the rest of everything in the source folder it gives you a little bit more direction where you want to put everything while react you just kind of have to decide for yourself you can put everything in the source folder you can create more multiple folders so i definitely saw differences in in that as well so let's talk about the next thing is the routing just like with tailwind css routing took a few more steps in the react world i had in npm install it on the command line and then i had to set everything up on the other hand since i with view cli since i added in router when i created the app it automatically generated the files i need so created this router folder and it added in all the boiler plate for you out of the box so you could see how you added the path the name component like how even um showed you how to do lazy loading of encode splitting of routes out of the box well on the other hand on the react side i had to kind of google around to figure out how to add in react router and then i had to kind of copy and paste this whole thing in here i had to add the switch component and then inside the switch component i had to put each individual route and then put in the path for each one of them so it's a little bit more work it's a little bit more boilerplate to get up and running and i'd really like the view one where it just kind of popped up for me after i installed it and i just could kind of copy and paste and make changes there i will say reacts router is nice that you can put opening closing components right out of the box right here you can see here this about i can even pass props into it with view you can add in you can set up props in your router but they're more like query params so you can have your query params show up as props inside your components which is a little weird you can also have static props that that just show up as your props so it's a little bit different on this in in the case of react you could just like pass anything you want because it's with inside the switch statement so i do like that better on the react side than i do on the view side one other thing too is i kind of mentioned this already but vue actually has this idea that you lazy load routes with this import statement and that's all you really need to do in view so this will be lazy loaded in you just put in this import in with this arrow function while researching react if i wanted to lazy load routes it sounds like you should probably use react.lazy adding lazy loading inside your a router file makes a lot of sense so it's a little bit different now you can do special imports i believe in both view and react there's other ways to kind of lazy load things and both have a version of suspense which is a way that you can have like fallbacks if certain things don't load those are very similar there but i kind of like the way you kind of lazy load the routes here just inside the router file it just makes a lot of sense for me for i would say for routing i would say this is a tie between the two between react and view you know i like view how all the boiler plates for me right away and it's really easy to load routes and add everything but i do think that this way you can pass in props in and just kind of looks a little cleaner i definitely like this way too so i don't know if i can pick a winner between the router and view and react and also i'm sure there's a lot of advanced cases that i'm glossing over which would help you determine if you think which one's better or not so let's talk about grabbing data from a server there is a couple of ways you can grab data from a server i'm using fetch that's the built-in way but let's let's take a look how we did it inside view first with inside view i have this home component and inside the home component i have this fetch statement that's in the setup so if you didn't watch the video i'm using the view the latest view 3 composition api instead of the older what's called the options api but in this case we can run the setup function we can run basically anything we want and this will only run once as soon as the component loads now they do have i don't want to confuse the situation there is ways to do life cycle hooks so if i was trying to do something as soon as the component loaded then i might have to use one of these lifecycle hooks but since i'm just running it before basically before create or created this works the best so as soon as the be before the components even loaded it runs this fetch statement it grabs this information and then it it sets it in this reactive state right here that's how it is i mean there's no real issues with do we have to worry about timing on the other hand with react when i was doing some research on it there is a possibility that this could be rendered over and over again one of the ways recommended ways inside react is to use like use effect which would only render this on the initial load so you can see here this is the use effect in fact this should have empty bracket there so in this use effect here in this app.js this will load soon as the app loads and it won't be re-rendered over and over again for someone coming from view to react just knowing which hooks to use i feel is sometimes a little confusing because beyond use effect there's also use memo there's use callback and when i was doing research on this i had to even like google around and i'll show you that in a second one thing i wanted to do is on the view app i had a computed property here i wanted to see after you download the information from the the server i wanted to filter it based on what the user typed in the input you can see right here when you type something it filters it down so that's a really easy thing to do in view because what you could do is anytime anything changes in this text you could have it run the update pokemon computer property and the nice thing about computer properties is that they're cached and they only run when something inside them changes and they're really used for that kind of thing instead of just putting a you can put it on change event on this instead and then have it run that way but i think this is just a little bit cleaner using this computed property so you can see here this computer property runs the update pokemon which checks to the state is empty if not it returns this pokemon filter which just looks for the name in the text and then displays it right here in this v4 loop which we'll talk about loops in a second so i thought that was really simple and clean to do and that's sort of what you do on the on the view side on the other hand on the react side to do what i wanted to do i had to pull in this use memo which uh which was a little confusing because what should you use use memo or should you use use callback and those are two different popular hooks inside react so when i was researching it i went through kent c dodd's blogs because he seems to know a lot about it and he said first should i use use memory use callback only use it for referential equality or computational expensive calculations so technically since we're just filting a really simple list this is probably not computationally expensive so maybe this example is slightly contrived this could definitely could be one we could have something more complicated in here but this will basically be updated every time the pokemon results or text changes and you don't actually unlike computer properties you don't um this doesn't have a name that you put in here like this computer property has a name called filtered pokemon actually just gets updated and changed and it's sort of similar on the view side to watch so you have watchers in view and sometimes people get watchers confused with with computer properties it's usually most of the time you're good with computer properties but if you wanted something to just change at separate times and it doesn't return anything then you would use a watch and it sort of reminds me of this use memo it's also like maybe use callback would be something you'd want to use when i researched it says use memos similar to use called except it allows you to apply memorization to any value type not just functions it does this exciting function returns the value and then that function is only called when the value needs to be retrieved so it felt like it this needed to be updated and so i felt like used memo is the right one but it seems like in the react world i think this is a common thing it's a little confusing like which hook to use because there could be performance problems if you don't do use a hook correctly maybe it's updating too often you know it seems like react is super duper fast but maybe like if you set this up wrong it's going to update too many times so leave a comment below if that's a common problem and react so overall between you using computer properties and hooks i really like i really like both but i think you know just for my understanding i mean computer properties using watchers seems like really simple to me maybe because i'm exposed to it and then using all these different hooks use effect use memo use callback you state it feels a little bit more of a it's going to take me a little bit more time to understand when to use one in each different scenario maybe i have a little bias but i certainly think that grabbing data was a little bit easier on the view side if i had to choose one so let's talk about uh looping through data both of these apps i did something similar i had to loop through the data that was returned in this one i did it here's a v4 right here this this pokemon and then in in the react app i created its own component and i pass the props in and use a results.map really between these two i personally like having using what are these caller directives like these v4 directive it's you just pop it on to the html element and it does what you think it should do on the other hand i could see the elegance of using jsx and react because now we're using results.map so we're using essentially javascript inside our middle of our html here we're checking first to see if results exist and then we're mapping over it and then we're applying it and we can just return html inside the loop so i see that has like a certain amount of elegance and you can put all sorts of javascript expressions inside this map here and certainly you can do multiple things and then the same thing here with with vue you're kind of a little bit more a lot more limited in that aspect and by the way i am talking about just the way normally view works you can add jsx into view if you really wanted to and there is something called render functions but typically idiomatic view doesn't have all those things in it this is pretty much how you do it you just do it with with normal html and directives both of these have its ups and downs you know personally once again i would like i really like the way view structures with its directives it just makes a lot of sense to me i think beginners would understand that more that's where i would go as you're going more and more complicated i seem if i'm a power user having just throwing in this this javascript right inside this html can be a little bit more powerful at times but i think i'm just more used to the view style with directives both have their pluses and minuses of course the last thing i want to say is passing data now in this app we passed most of our data if you look at this about view we pass most of our data inside the the router and inside inside using the composition api we use this use route and then we were able to grab out of it the params this route.params.slug and were able to use that to do another look up to the pokemon api and then pull the information out that we need so that was really simple to do on the react side we if we look at our about in the react side we're we're grabbing data from the same thing through this slug um from basically the the params use params it's almost named exactly the same this is called use route and this is called use params and we're just grabbing the data out and then displaying it passing data using params was super duper easy on view and inside react so i can't really tell you what's better now one thing that is different and i didn't do it in the view app but i did pass data from my my parent component this a app component into my child component which is this home component right here this pokemon results and i'm destructuring it right here in review you could definitely do the same thing it's almost exactly the same you just pass it in inside the component there's a few key differences though maybe i could do a whole video on this so in view usually you emit values back so in react you pass whole functions down to your child components in view you pass in like that you're passing in a special value into it and then you emit those values back so that's quite a bit different i won't get into the differences i won't get into too much detail there it's kind of hard to explain without pictures in front of you so that's a lot different you can also um there's this idea in react where you have this children and you can grab data that's passed in between the open and closing brackets of your component and inside view you use something called slots which is a completely different idea and there's some kind of pluses and minuses using slots versus like react children this i can't inconclusively say which one's better what's better passing information in certainly the react params are exactly the same but we'd have to kind of deep dive in if if emitting events is a better idea than passing functions down or if slots are better than children and things like that i think it's i think i'm gonna have to have a tie on that one too so overall i mean between these two apps uh the react app definitely took me a lot longer but i think that's mostly because i'm not a react expert i just felt a lot way more comfortable in view just just the quickness of getting it up and running oh one other thing in view you can use class name just as if you're using a react and doesn't give you any errors so you can use class or class name but in react you have to use class name instead of class or otherwise you'll get errors in the console i thought that was funny it was like viewers like i will allow you to use class name if you don't want to use class so like either one of them will work so that's why i've kind of did both in this one uh yeah so i think like vue was way easier to like set up with my tailwind css with my rack route or with the router right out of the box i think definitely react was harder to get set up at least initially when i dived into the code since i wasn't as familiar with like use memo and and and and some of those hooks it took a little bit more time to get that up and running but i really like the composition api and being able to just throw anything inside there so i think overall i still prefer vue but i think i have a newfound i have a newfound appreciation to react and what you can do with it i even had someone tell me in the comments that what i was doing could have been easier done with react query that's like even a cooler new library that allows you to just have it like it caches results so it's even faster so there's there's really cool things in the react side too that i didn't even mention um i could have done would have maybe made this app even better on the pokemon side so yeah let me know what you guys think between react and view i definitely going to continue doing view hey developers so today we're looking at veet 2.0 i'm going to show you guys what it's all about talk a little bit about the ecosystem the future of veet versus vue cli and we're also going to jump into a quick app so stay all the way to the end alright so if you are new to this vit 2.0 as avenue has said is veet is the word for fast and it's a new kind of build tool for front-end web development think a pre-configured dev server plus bundler combo but leaner and faster and it leverages the browser's native es module so it's like a really fast development server that you can use to create not just view apps but react apps pre-act apps and so much more so it's really cool platform that i've been using and i want to talk to you guys about with version 2.0 evan has been adding more and more features to it in the community now like i said it's framework agnostic so you don't have to necessarily use vue.js with it you can use view react pre-act lit element for example they even have this new plugin format so you can start adding plug-ins to it so like think of this just as a really neat build tool that you can use to quickly get up and running with these different frameworks but that also means that it has support for resolvers url rebasing and code support and server side rendering and if you want to have more information if you can go to the yveep page on the official documentation it goes into even more detail of why you may want to use this build tool so with that said i actually have a quick word from our sponsor so go ahead and take it away i want to talk about tab 9 just for a quick moment if you haven't heard tab 9 is the way to basically supercharge your auto completions inside your ide and what's awesome about it is it supports all modern programming languages the way it works is you install it in your code editor and anytime you type anything out it gives you these really great suggestions that you should use and the way it works is that it's ai powered it's completely safe it's running on your local machine so you don't have to worry about your code going in the cloud or anything it's been trained on a model using over 2 million pages on github so it has really great auto completion and it supports everything including the apple apple silicon m1 chip i've been using it for a while in my own project so you can see here the auto completion is absolutely excellent and what's really nice you can try it for free it has a free forever plan and then if you want it to be work even better they have a pro plan that is gpu powered yeah so check out tab nine i'm gonna put a link in the description they have been awesome it's an awesome tool go ahead and get it it's absolutely for free and if you want to get that pro plan it's even better so check it out the link will be in the description below all right i'm back tab nine is really awesome we're gonna be using a little bit later in this video so let's let's keep going by the way so here's a few more features of veet it's instant server start lightning fast hmr rich features optimized build and so on and so forth uh i'm just looking at the ecosystem of v and seeing all the cool things that are coming out for it i saw like for example nuxt already has a veet plug-in so you're probably thinking of how does that work so essentially what you do is you create your next app like you normally do through npx after the app is scaffolded and created you can swap out like the build engine so it uses next veet after you do this it's just super duper fast when you have to do reloads and starting it off i got it mostly working with everything it looks like they don't have working with a composition api if you guys are really interested in this leave a comment below i'll do a video on it and we can try next out with veet that's cool that this has already migrated over to other meta frameworks of vue another really neat thing is this veep plug-in ssr definitely have ssr support server-side rendering support with v and i just saw this the other day i think evan you tweeted it out it's a view framework building server rendered or static sites but it's built on veet too which is built on top of veet which helps generate this so i thought this was kind of neat it's not production ready yet but it's another really cool tool i also saw this one tweeted out called choice troy i don't so for the french people uh listening you guys can pronounce this much better than i it's basically a it's it combines 3js and then it works with vue.js or v so it's not necessarily vt specific you can work you can get it working with vue.js any vue.js three even if you're using something like vue cli but i thought this is cool and you can actually see one of the demos here's some examples i mean using veet and 3js and vue which is really cool so yeah check that out i'll make sure i put a link in the description to all these different things that are happening in the in the view ecosystem uh one thing that i heard i was just watching if you haven't already checked it out a vue.js amsterdam had a really cool conference but they have some of the videos up for free and one of them was the state of view or the union i couldn't find the slides but i did find this one screenshot or i i brought this i went to this place in the video so a lot of people are thinking well avenue has been talking a lot about veet as this new build tool for view but what does it fit in when you have ucli already for the short term evan was saying that they will coexist together which is awesome but in the long term you definitely see some of the features of v being added to vue cli or vue cli being added to vt so they might combine at one point but you can definitely use both of them either one or over if you're creating view three apps i wanted to talk to you guys about trying to get veet up and running so let's just jump in to an app here cool so i have an app and by the way i have tab nine autocomplete uh there will be a link in the description you guys can check that out i do have two other plugins that i'd highly recommend if you're using v especially today i was going to try to to set up veet with a view 3 app with typescript and the two that you really want to install is something called vtor which is the view tooling for vs code so make sure you install that and then also v view dx which is the advanced typescript javascript support uh by the way there's two of them in here one of them is like a beta version or very very new and it's not as tested so i wouldn't use that one this one right here i would use the the one that has 11 000 downloads out of this as of this recording there's also another plugin and this was mentioned in the view amsterdam and when you install v you can use something called volar it's kind of it doesn't really work well if you're using vtor and volar at the same time time so i would choose one or the other and i have the latest version of node if you look at the official documentation for wyveet i can go to the get starting guide and it just says npm init at vue.js at vjs app so i'm just going to copy and paste that in here okay so first thing it asks is a project name and so we'll just type in youtube proj and then this is cool so this is all the different templates that are available of veat since this build tool supports more than just vue.js so you can do view uts react react yes proact or lit so i'm going to use view and type script and then it just tells you to go ahead and change directories into it and then do an npm install and then you can run dev so let's go and do that real quickly cool so it's up and running and now i should be able to npm run dev and it should open up yep really quickly and port 3000 so if i go to port 3000 here it is so i have an eviet app or view 3 app up and running basically it's a view 3 app and even tells you i mentioned those id setups so you can do either vtor or volar and vs code and then i would use uh also the view dx as well and even has a little sample of how to work how it works so i thought it'd be fun if we could try to get this working with the latest version of ux view x4 with typescript so let's let's do that first i need to change folders all right so let's go ahead and install vue x4 and if you look at the official documentation it's pretty easy all you need to do is npm install vuex at next and this will take a moment okay so it's installed all right so let's go ahead and see if we can add typescript in to our app our veed app here for vux so it if you look at the official documentation it tells you you should probably add in this type definition file that way when you do this dot store it'll actually show up correctly so i'm going to copy this and in the for source folder i'm going to create a new file called vux.d.typescript and just for now i'm going to copy and paste it inside and now i need to go in and set up our store so we're going to create a really basic store i'm going to call it store.typescript and inside the store.typescript i'm going to create a few things so i'm going to create an export for an interface and so i'm going gonna type this all out and i'll be back with you in one second okay so i went ahead and typed everything out and so this is a really basic example in fact i copied some of it from the official documentation but essentially this store has a state it just has a count in it and then i added in a mutation to mutate it and an action to increment it and you use in view x four you use this crate store which is a way to create the store inside of it and then we can also assign it which type it is type state and you might see something weird this key right here this key is a part of view x4 and in official documentations they say that it's basically a an injection key and this injection key has to be added in any time you import this in for the types to work correctly so i'll show you how that works now we have the store in so let's make sure that we actually include it when the app loads so inside the main typescript file we're gonna have to do a little bit of change here we're going to do we're gonna do a const app here and then instead of mounting it at this point we will mount it at some point but i want to use this app.use and this app.uses where we can add in third-party libraries and things like that so we're going to add a store and a key to it and then we're going to mount it and nice thing about typescript i can do control dot and it'll find where it's at control dot or command dot if you're mac and it should found it so found both what's in the key and store and now we should have this load up correctly and we should be able to access it so if i go back into my components here and by the way see here here's a bunch of stuff we don't need in this hello world we do have a message i'll make sure i delete it all oh don't worry about this eslint message and we have this define component you can see this ling equals ts because we're using typescript but we should be able to import it in inside the setup function since we're using view three so to do that we use this const we'll call it store equals use store and then we pass in the key that we created before and once again i can do control period here control dot i can import it in from use store control dot import key from module store so that works perfect for us and now we can grab stuff out of it so let's say i wanted to create a button that doesn't increment here and by the way let me go to my app view and get rid of this logo so i want to actually have a button that increments so i'm going to create a button up here press me and then i'll have a counter here which i'm going to have to add so i'm going to const and i'm going to use we're going to use increment which is going to be a method and that's going to do store.dispatch and we're going to do increment and you can see here we're getting um we're getting auto completions here which is awesome we're also getting a little bit of our tab 9 to help us too while we're typing this out which is awesome and then if i want to actually grab the counter i'm going to call it yeah counter i'm going to use a computed property and this computed property is store dot uh state and then i'm going to have you can see here right here we have auto completion here with says count that's from typescript and then computed i can just hit ctrl dot and we can add computed from declaration to view so we just went ahead and added it and now we can pass both these out so we're going to pass counter and increment and if i did this right i should add in an event here so every click it does the increment should work so let's see if it works i'm npm run dev and look it loaded already it's super duper quick here's the app here it is and pressing it sweet so you can see here now i am using my view x store and i have types set up and just to show you a little bit more uh we have types on our store so store dot you can see here we have store.state we are getting our getters and state everything else that we expect or dispatch and commit our commit um we can see here here's tab9 telling us how we can commit it in there which is awesome we can also if we're using like the mounted hook so let's say we are in we're not using let's say we're not using view three and we're just using regular view and we're using the data and the methods if you do this dot store you can see here we have our getters our state and here's our count even tab9 even sees it so our typescript's working uh we're able to grab our types from it things seem to be working great so yeah this is just a quick example of how you may want to use veed one thing definitely with veet is that it doesn't have the plug-in system that vue cli has so if you're looking to just quickly add in a bunch of things you might have to just install them through the npm system and then configure it yourself also out of the box you're not getting those really cool prompts like you have in view cli where it asks you if you want to install the router if you want to install some other plugins you're going to have to do that all yourself and you may run into some problems if you don't know how to configure it and vit is slightly different but so far i'm pretty impressed with veed i'm it's super fast i definitely think in my next projects i'll be using it let me know in the description below if you think this was useful or helpful through it pretty quickly but make sure you just pause it and try to understand and also yeah check out our sponsor tab 9. it's absolutely free if you do buy the more if you do buy the premium version it does cost a little bit of money but it actually has even better autocomplete results i believe it has like a server that it encrypts data and it comes back and it tells you some suggestions for you yeah so check that out i appreciate it thanks [Music] bye

Channel: Program With Erik

Views: 43,588

Keywords: Vue.js 3 Tutorial, Vue.js Projects, Vue.js 3 course, Vue.js 3.0 tutorial, Vue.js 3.0, Vue 3 complete tutorial, Vue.js, Program With Erik, Program With Eric, Erik Hanchett

Id: DPBXxrhJIv4

Length: 188min 57sec (11337 seconds)

Published: Mon Oct 04 2021