Vue 3 Script Setup, The Future Of Vue? Tutorial And Setup

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 hey if you're new to this channel my name is eric i'm a full stack software developer and i teach a lot of stuff on vue.js react angular if you guys are interested in things like that make sure you click that subscribe button and i can teach you more 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 vue 2 and it also works with view 3 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 uh 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'd 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 h yeah 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 uh 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 by putting 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 gonna 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 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 gonna create a new file i'm gonna 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 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 we're expecting to be uh passed in so for 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 do 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 gonna let's say the default we wanna stewart now one thing this is not gonna work is if using this with defaults we're gonna 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 gonna 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 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 gonna put make an interface called props i'm gonna 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.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 the values down and you met them back up so you 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 uh the pressed function and all it's going to do is show an alert that says hello from pressed function so something really simple like that now i can pass that down and the way we usually do that inside view is you can pass it down uh 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 next i'll 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 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 get alert that make more sense and now i have to define get alert 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 name functions uh just depends on your preference just for right now i'll just create a function called get alert and all it's gonna do is i'm gonna use this new emits that we created and we're gonna 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 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 has 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 dot ceilo slash 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 going to delete this i'm going to grab some json and i'm going to 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 of weight 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 so 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 uh 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 gonna 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 gonna 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 into component but could not be automatically inherited because a component renders fragments or text 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 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 this 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 um and to you can basically place it where you wanna place it so fortunately 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 for 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 gonna have to create another script tag so you can do script drag 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 uh 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 want to just add it to this h3 tag we can do vbind equals and then we can put in adders attrs so there it is worked for us and we don't have any errors or uh 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 adders 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 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 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 let me know in the comments below if this is something you want to use in the future and if you do uh do you think this is the right direction for vue to actually use this instead of using this options api or using the setup function i'm pretty convinced that this is probably the way that most people are gonna be writing view three applications in the future it just makes a whole lot of sense it's very straightforward so i love to hear what your guys opinions leave a comment below and also i have some courses on vue.js i'm gonna leave a link in the description below if you're interested and i also do some mentoring so if you check out mentor crews i'll put a link for that too in the description i do mentoring for people who need more a little bit more help and view and uh in career and for your career in tech so let me know thanks

Channel: Program With Erik

Views: 15,577

Keywords: Vue.js, Vue.js 3.0, Vue 3, Vue.js 3, Vue tutorial, Vue Script Tag, Vue Script SEtup, Vue Script Setup 3, Vue Scrip tag SEtup, Program With Eirk, Program With Erik, Erik Hanchett, Vue defineProps, Vue Emits, program with erik, vue 3, vue

Id: 9uSNKIXH_AI

Length: 25min 8sec (1508 seconds)

Published: Mon Sep 06 2021