Vue JS 3 Tutorial for Beginners #10 - The Composition API (part 1)

so far in this course then we've been creating view applications with something called the options api now i've not explicitly said this at any point but that's the way we've been building applications the option api is just a way that we use view to create components using it looks something like this where we have a data function a methods property computed property and any life cycle hooks as well all of these are just added directly to the component object itself which we export so by making view applications this way we are just using what's known as the options api and this has been the way that we make view applications for the past few years and we still do make view applications this way today as well but with the release of view three view now allows us another way to create view apps using what's known as the composition api now when we use the composition api we basically get access to a setup hawk or a setup function inside our component object now inside the setup is where we will put all of our component data methods computed properties and life cycle hooks now the reason that the composition api was introduced in view three is because it addresses some of the limitations and drawbacks of the options api now one of the main drawbacks of the options api is that it's much harder to group feature logic together for example for a component getting data and then formatting the data we would have three moving parts we'd have the data itself we'd have a computed property and a life cycle hook now all of these pieces of logic are spread out in the component away from one another even though they all work together on the same feature and you might also have logic for another feature in the same component around this which is all spread out into its different separate pieces as well now as your projects get more complex this can become hard to read and therefore also hard to update as well now with the composition api you can organize your code in such a way that groups feature logic together inside one setup function now another benefit of using the composition api is that we can easily create reusable logic and code with what we call composition functions or composables for example imagine you had a couple of components which listed blog posts in your website in both components you might use the same logic with a combination of computed properties data and methods in order to retrieve the data and filter those lists now you don't want to repeat all of that logic in each component because it's exactly the same and that's just repeating your code so using the composition api you can extract all of that feature logic into what we currently call composition functions or composables then we just inject those reusable functions into the setup function so we don't have any code duplication now if you've ever used react hooks this is a very similar concept so they are the main two benefits of using the composition api instead of the options api but remember this is completely optional you don't have to use it you can still make view apps using just the options api as we have been doing so far and for small simple projects i still do that however for larger projects which require a bit more organization more code reuse and more complex logic i think using the composition api is better suited not all of the time but a lot of the time and definitely as we start to work with authentication and databases in future projects the composition api will help us out a lot and by the way you can actually use a combination of both if you want to so you can use the composition api for some logic and still use the options api for all the simple logic as well now going forward we'll be using the composition api about 80 of the time but we might still dip into the options api to set up certain things in our components as well so in this chapter we'll be learning all about the composition api and once we've learned the basics over the next few chapters we'll be building a mini blog style application like this so we can list all of our blogs we can see the details of the blog and we can see we've got different tags here as well which we can click on on the right to filter the blogs so we only show blogs with those tags we can also create new posts as well using this form so this is what we're going to be building over the next two or three chapters but first of all i just want to talk about the basics of the composition api so then the first thing we're going to do is create a new project so view create and we're going to call this dojo hyphen block since we're going to make a blog eventually and we're going to manually select features we're going to use the router eventually and we'll take off the lint and formatter press enter and then view three yes we want to use history mode and we want to choose a dedicated config file no we don't want to save this preset and this is going to create the project okay so once that's done let's cd into the dojo blog directory and then i want to type code space full stop press enter to open this in vs code cool now i just want to neaten some of the things in this starter project up like delete the hello world component we don't want that and inside the views we don't want an about page and inside the home component i'm just going to strip out a lot of this let's get rid of these two things here and also this import so we can get rid of this component thing right here as well like so and if we go to the router file we can get rid of the about routes like so and that is pretty much it so we're going to learn the basics now inside this component but first of all let's just run this project so we can preview this in a browser npm run serve press enter and i'm going to control click that and bring it way over here and now we can see this is the project now i'm just going to get rid of the navigation at the top as well let me just minimize this a little so let's go to the app component and get rid of this div with an id of nav we don't need that anymore and also these nav css rules down here press save and now it looks very blank so let's go to the home route again and just say something like home so we know this is working press save and there we go so the first step when we're using the composition api is to create a setup function inside our component like so so this is just like we've done with a data function or a mounted function or any other life cycle hook we just create a function like this inside the component object now this function will run before any of the life cycle hooks so before mounted or before created and i'm going to demonstrate that down here i'm going to create a created hook and fire this and then also a mounted hook and fire that now inside setup i'm going to console.log and say setup and then down here i'll do something similar but for created console.log created and then down here we'll say console dot log mounted like so and let's see the order of these inside the console over here so we can see set up rant first so this runs before anything else okay so now let's delete those we don't need them and what can we do inside this setup function well inside here we can write any kind of normal javascript we could go out and grab data from somewhere or create a computed property as well to begin with what i'm going to do is just create a couple of variables so i'll say let name equal to mario for example and then also we'll do an age variable so let age equal to 30. now what if i wanted to use these variables inside our template well i can do that all we need to do inside the setup function is return whatever values we want to use inside the template so i could come down here and say return and then we want to return an object and inside this object we want different properties so we want the name and we set that equal to the name variable right here and we want the age and we set that equal to the age variable so this right here is what it will be called inside the template and this is the value inside setup right so now i could output those up here i'm going to do a paragraph tag and say my name is and then output the name and i'm also going to output the age so i'll say and my age is and output the age so if i save this and preview we can see my name is mario and my age is 30. now if we go over here because the name of the key and the name of the variable we're assigning that is the same we can shorten this and just use age and name like so okay so this does exactly the same thing now what we're doing is basically allowing this and this to be accessed inside the template and we use the same name as those variables so if i save this and come over here you can see it still works okay then now this is not quite the same as using the data property as we did when we were using the options api before so it's not the same as saying down here data and then returning an object and making a property like age and setting equal to something this does something different because this value right here is reactive if that value changes then the change will be reflected over here now that's not the case with these two variables if the value changes of one of these two variables then it won't be reflected over here and that's because these are not reactive values and this is a reactive value but we will see how to make these reactive later on so don't worry too much about that for now just know that we can return values inside the setup function if we want to make them accessible in the template now we can also create functions inside this setup hook so i could say const and we'll call this handle click and set it equal to an arrow function and inside that function i'm just going to console.log you clicked me so say i want to fire this function when i click on maybe a button in the template first of all create the button and we'll say click me inside the button and then i'm going to attach a click event much like we normally would by saying at click and setting it equal to handle click like so now the only thing is we have to return this down here in order for it to be accessible inside the template like this we have to return it at the bottom so it's the same for functions or values so handle click and now we can access this function inside the template like this and so this will work now so if i save and come over here i'm going to say click me and you can see it's logged this to the console so this is the very basics of how to use the composition api we make a setup function or a setup hook if you prefer to call it that way that always runs first before created before mounted etc and inside this function we can run any javascript create values and create functions then at the end down here we just return whatever values or functions we want to make available to the component template now next up we're going to take a look at template refs now we've already actually seen earlier on in the course i think back in chapter 3 that we can use template refs to store references to dom elements in our template like this paragraph tag now the way we use refs inside the composition api using the setup method is slightly different so whereas before we could say something like this we'd say this to reference the components dot dollar sign refs and then dot whatever the ref was we can't do this inside the setup method and that's because this keyword is not available inside the setup now when we used it inside a life cycle hawk like mounted or in a method before when we use the options api it referred to the component itself this keyword but it's just undefined in the setup function so let me demo this i'm going to console.log and then log out this save it and preview and we can see that this is undefined so the way that we work with refs in the composition api using the setup function is a bit different so the first thing we'll do is come to the setup function and we're going to create a new ref now you can call this ref what you want i'm just going to call it p and we store it in a constant and the reason i'm calling it p is because we're going to grab a reference to this paragraph tag but again it doesn't matter what it's called you can call it power or something else now i'm going to set that equal to ref now if i click on this right here it should auto import ref from view and this is generally the way that we work with the composition api we import the parts from view that we need to use like refs and we're going to see more of this pattern as we go on so we're saying right here that this is a ref and to begin with we can assign it a value of null so we have a ref right here but it's not linked up to this so what we need to do is return this ref right here so i'll just return p like so and then like we did before we can give this a ref attribute and set it equal to whatever ref inside the setup function that we created so in our case p so now what will happen is this will be a reference to this paragraph tag and now what i'll do is log this to the console when we click on this button so instead of logging this now i'm going to log out p so let's see if this worked i'm going to save this and come over here and i'm going to click this button and now we can see this big object and this is a ref object now we can see right here the value property right here that is the actual dom elements this is just a wrap object which is a reference object so what i'm going to do is also output the value property p dot value like that and that should be the actual value so if we press click me in fact i'll get rid of this click me and now we can see this is the value that is the template element so what i can do is take that value now and i can do things like add a class to it i can use normal javascript properties or javascript methods on it so what i'm going to do is say p dot value to get that dom element then i'm going to say dot class list which is a normal javascript property to get the list of classes and then i'm going to use the add method to add a class to that paragraph and i'll just say test so if i now click this then it's going to add a class to this paragraph tag so let me get rid of this down here and we can see it has that class of test now we can also do things like change the text content of a ref so i'm going to say pdot value down here and then use the text content property and set it equal to hello ninjas so now what will happen is it will replace all of this with hello ninjas so if we save him and preview over here i'm going to go to click me and we see it replaces all of that content now there is one thing you need to be careful about and that is that you cannot use the value of this before we actually return it well you can use the value of it but it's not going to be this dom element because before we return it right here we've not been able to associate it with this dom element so the value property is just going to be null and by the way that's how we get this value right here we can say console.log and if it was just p it would still be a reference object it wouldn't be null but if we console.log p and p value this is the reference object this would be still null it wouldn't be this thing right here because like i said we've not yet returned this p-value down here and because we've not returned it we've not associated it with this dom element so this will be null so we can't use it to do things like this down here we can right here inside handle click because once we've clicked this thing we've already returned it at that point right because the setup function's run it's returned it to the dom we've output the button then we've clicked it so at that point we do have p value i hope that makes sense but let's just see what this does right here i'm going to save it and go over to the console and we can see this is the p object right here and that's the reference and this right here is no that's the value so that's this thing right here which is null if i was to put in here something like hello then p.value would be hello and i'll show you that and we can see right here hello okay so that is template refs when we're using the composition api a bit different to using them in the options api now to be honest i rarely use template refs at all because i feel like everything i need to do in terms of manipulating dom content can be done in other ways using view however refs like this have another very very important part to play when using the composition api they can be used to make values like this reactive and we'll see that next so we saw before that we could create variables like this inside the setup function and then we could return them at the bottom so we can output them in the template over here now what happens if we try to change these variables for example when we click on this button well let's give this a whirl i'm going to say the name is now equal to luigi now if i save this when we click on this button it's going to update the name variable but will it update in the template well let's take a look click me and no it doesn't it's still mario and the reason is because these by default are not reactive variables meaning when they change it will not automatically update those values in the template now in contrast to this before when we used the data function in the options api we returned an object like this and then we could use properties for example score and if that value changed at whatever point and we output it to the template it would also change in the template so this is a different behavior so far and this is because these values inside the data function they are reactive by default and that means that when they change view will react to that by updating them in the template these are not reactive by default so we need a way to make reactive values inside the setup function to do something similar now there are two ways to do that but the one i prefer most of the time is to use refs and we've seen briefly in the last tutorial how we use a ref however back then we used it to get a template reference we can also use refs to create reactive values and that is what i use them for 99 of the time so let's see how this works what i'm going to do is surround these values right here with ref like this and remember in order to use ref we have to import it from view and i'm going to do the same thing with the age down here and then i'm going to change these let's to constants and just because these are constants it doesn't mean that these values can't change it just means that the reference object is a constant but the value inside it can change and remember we get the value of a ref by saying the name of the ref then dot value okay so in this case that would be mario if we said age.value it would be 30. so these now are reactive values when we use ref to surround a value it becomes reactive so what i'm doing now is still returning name and age down here and when i return a ref like this i can output it as data like this and that will output mario and 30 for the age we don't have to say name dot value here or age dot value much like we would inside this setup function to get the value of those when we return a ref which is a reactive value we can just output them and it automatically outputs the value of that riff okay so let's just see if this works first of all i'm going to get rid of that as well i'm just going to make sure that these are output correctly so i'm going to save it and we should see mario and 30 still and we do let's just refresh in case yep mario and 30. so this is still working everything seems the same so far all we've done is surrounded those values in refs and they still work up here now the difference now is that we can change these values and when we change them it will update in the template because now these are reactive refs our reactive values so how do we do this i don't just say name is equal to luigi like we did before because name is actually a ref so what i do is i grab the name value which is mario and now i can just update that i could set it equal to luigi and i could do the same thing for the age i could say age dot value and set it equal to something else like 35 so now we're updating the values of these refs and because refs are reactive when they update like this they're going to update in the template as well so let me save this and try it out click me and now we see luigi and 35 so this is now a bit more like when we used the data function down in the options api because whenever the values of these things change it's updated anywhere they are used in the template so when we're using data that's outputting the template we generally use refs when using the composition api in the setup function and that way they are reactive values and view will essentially watch them for changes and update the template when needed now don't worry if this all seems a bit confusing for now we will be using refs this way a lot so it will all drop into place as we use them more so let's just build on this example a little bit what i'm going to do is come down to the bottom and i'm going to create an input field because we can also use v model to bind to ref values like this much like we could to properties inside the data function so i'm going to create a v model and set it equal to the name so again we don't say name.value here we just say name we only use the value property inside the setup function itself because the variable is the ref not the value but outside in the template we don't need dot value it automatically proxies the value up when we use the name of the variable so now i'm using a v model on this input and setting it equal to name so when i type into this it's going to update the value of this and therefore in turn it's going to update over here so let me save this and try it out i'm going to now type in here something else and you can see as i delete it updates and as i type it updates awesome let's also add on another button and i'll do that just below this first button and i'm going to add a click event to this so i'll say at click and set it equal to something now i'm not going to reference a function i'm just going to do the javascript directly in here and all i'm going to do is take the age variable that we have and i can say plus plus to add one to it again we don't need to say age dot value plus plus because in the template we don't use the value property inside the button i'll just say add one to age i'm going to save this and see if it works and if i click this we can see age going up so that's the basics of how we can use refs as reactive values and again we will be using them an awful lot as we go forward so we've seen how we can use refs to create reactive values but there's another way to create them in view and that is by using reactive which we also import from the view library now i'm going to show you how to do this in a second but first of all let me show you what i've already created here i've created a ref called ninja1 and that ref has a value of an object right here the object has two properties age and name and by the way we can use objects as the value of refs and we can use arrays it doesn't matter what the data type is we can use it for a ref so we have this ref now and we return it so we can output ninja1.name and ninja1.age in the template and also we have this function updateninja1 that takes the ninja one ref and the value of that ref which is the object itself we get the age property and we update it to 40 instead of 30. now we return this at the bottom right here so we can use it inside the template we attach a click event to the button which is calling that function so when we click it it's going to update the age and it will update over here let's just check this out in a browser to make sure it works update ninja one and it goes to 40. awesome so that is a ref and the reason i did all this is so we can compare it to how we use reactive so now let me do a similar thing but this time with reactive so i'm going to create another constant called ninja 2 and spell this correctly for a start and set it equal to this time reactive now inside here we do the same thing we pass in a value and i'm going to pass in an object with a name property which will be luigi and an age property which will be 35. so this is also a reactive value looks very similar right the only difference is the name at the minute ref and reactive okay so now let's return ninja 2 down here and let's try outputting these properties inside the template so i'm gonna do an h2 right here to say reactive so the top one right here this is using refs and below this we'll use reactive so let's do a paragraph tag and output ninja to dot name so we do it exactly the same way okay so we return it right here and we can just output the data from reactive inside the template the same way let's also do the age so ninja to dot age like so and i'm going to save it and preview and we can see now exactly the same so we get mario 30 and luigi 35 so this works the same way now let's also create a function to update ninja two so i'm going to copy this dude and paste it down here and change this to two and then i'm going to delete this and say ninja two and this time when we use reactive we don't need to say dot value we do not need to do that this time we can just access the properties directly on it so i could just say dot age is equal to a new value like 45 and that's one of the major differences between ref and reactive using refs we have to use the value property to access the value of the ref using reactive we don't need to do that so now we need to return update ninja 2 and i'm going to create a button up here and inside there we'll say update ninja two we also need a click event on this so click is equal to update ninja two all right so let's see if this works update ninja two that works and this one still works cool so that's how we do the same kind of thing but using reactive instead of ref so which one of these two approaches then using ref or reactive is better which one should you take well you might think at first glance that this one is better because we don't have to use the value property like we do on refs we can just access the properties directly but there are drawbacks to using reactive the first one is that we cannot use primitive values inside reactive so if i was to do something like this i'm going to say const name 1 is equal to ref and this is mario so that would be a reactive value for this string if i did const name two and set it equal to reactive and passed in luigi this wouldn't actually be a reactive value because it's a primitive type now i can demo this i'm going to output right here name two and i'm gonna output name two here as well so name two like so now if we save this we should see that name which is fine luigi right here but if i try to update this now it's not gonna then update over here because this is not reactive it's a primitive value and they don't work with reactive so let me just update this value inside here i'm going to say name to and then what do we do because we don't say dot value do we well if i said name two is now equal to mario is that going to work save it and if i update this well no it doesn't change there is no way to update name two because it's a primitive value now i could say reactive like so and set it equal to mario and save this and then if i did it this time well no it still doesn't update so this doesn't work we can't use primitive values with reactive so that's one benefit of using refs secondly refs will also work better when we're creating external composition functions later on because they retain their reactivity when exposed by these external functions so typically i'm going to be just using refs but i did want to let you know about reactive just in case you stumble across it in somebody else's code because a lot of other developers do use reactive instead but again i'll generally be sticking with refs from now on so much like we could use computed properties when working with the options api before we can also use them with the composition api inside the setup function now the way we do this is by first of all creating a variable or a constant i'm going to say const and then name is equal to and then we say computed and i'm going to click on this and it should import it there from view for me so again we see that pattern of just importing the features that we need now next we pass a function into this computed right here and this function should return a value and that value that we return is what this is going to be equal to so for example i could return and then just say sean if i can spell it and then down here i can return name and we could output that in the template paragraph and then output name like so so this is just a computed property we use the computed function and inside that we fire a function which returns a value and that value is assigned to this essentially when we output it so let me save it and preview and we can see sean now the idea of a computed property is not just to return a simple value like this but to compute a new value based on other values we've used them in the past to return filtered versions of data so let's try something similar now so the first thing i'm going to do is delete this and delete this and i'm going to create a ref and this will be called names so we'll set it equal to ref which we've already imported at the top and inside here i'm just going to output an array of names so that is the value of this ref now we need to return it down here and what i'd like to do now is output all of those names in the template so i need to do a v4 to do this i'll do it inside of div and we'll say v hyphen 4 is equal to name in names so we're returning names down here and we're just cycling through those much like we would before and referring to each individual one as name now we need a key so we'll bind to the key and set that equal to the name itself because that is actually just a string which is unique there's no strings that are the same here okay so inside this div i just want to output the name so i'll say double curly braces and name like so which is this thing we called it right here so if i save it and preview we can see all of those names output to the screen now i want to allow the user to search for a name and then filter these results or this value based on that search term so what i'm going to do is create an input field which is of type text and apply a v model to this and we'll call that search so we need to make a search property and i'll do that down here const search is equal to a ref and to begin with it's an empty string we need to return it here in order to use in the template as we have done so now as we type into this input field it's going to update the value of this ref so what i'm going to do now is create a computed property which is going to return an updated array based on the search term so to do this i'll come down here and say const matching names and set that equal to computed now actually before i do this let me just comment this out what i'm going to do is output the search term down here so we can see it as we type so search term and then i'll just output search which we can do remember because we return that value here so as we type into this it's going to update that and then since we return it it will update right here as well save it and let's come over here and if i start to type we can see the search term down below so what i'd like to do in this instance is obviously filter out the rest of these because mario matches this if i type just m then it will look for anything with an m in the whole list which again is just mario but if i did oh for example then it would be mario because of this yoshi toad bowser cooper alright so that's what we're going to do so let's get back to our computed property over here now inside computed remember we fire a function which returns that computed value so let's say return and i want to return the names dot value remember because we want the value of the ref we can't just use the filter method directly on names because names is a ref object we want the value so names.value first of all dot filter and we want to cycle through the names and fire a function for each one and we want to take in the name each time we do that so first this then this then this etc and i want to return true if that name includes the current search term value because if that's the case and it returns true we'll keep that in the list so i'm going to say right here name dot includes and then we'll take our search dot value so this includes method is something we can use on a string to see if the string includes a certain term or a certain string so the search value could be oh for example it's going to fire this callback function for each item if it includes o then this will be true and it will keep that item in the array if it doesn't include o this will be false and it will remove that from the array it filters it out so now we have a filtered array based on that search term so now what we could do is instead of cycling through names we could cycle through matching names which is that computed property just a filtered array so if i save this now and preview if we refresh then actually we can see that no names match at the minute because this doesn't have a value so let's see what's happening in the console we might have a warning or an error okay something's going wrong it says here matching names was accessed but not during render ah i know we have to return matching names down here all right don't forget to do that i sometimes do and you'll probably see me do it many times through the rest of this course now we can see all of them there to begin with if i start to type in like t for example only toad appears o and we get all of those o o and we just get cooper all right so we're using this computer property right here to return an updated value based on all the values and that's how we use computed properties inside the setup function when we use the composition api we also get access to a couple of special hooks or functions called watch and watch effect now these two functions are a way for us to run some code when a particular value changes for example we have this search term stored in a ref we could set up a watch or a watch effect hook to run some code whenever the value of that search ref changed so let's try this out i'm going to go below the names and use the watch hook first of all so i'll say watch and then if you hit this it's gonna auto import it again we're importing the feature that we need and inside here we say first of all is the first argument what we want to watch i want to watch the search ref and then as a second argument a function which will fire every time that search ref value changes so every time we type something different into this input field every letter this search ref changes and then because it changes and we're watching it we can fire some code to do something for now all i'm going to do is console.log and i'll say inside watch function run so i'm going to save this and come over here and every time we enter in a new letter we can see watch function run and it does that for every key that we press so that's watch what about watch effect well let's try using it this time i'm going to say watch effect and hit this and it auto imports it for me and this time we just pass in a function we don't pass in anything to watch as the first argument like we did with watch so i'm going to sing here console.log and then inside that i'll say watch effect function run now if i was to save this and preview we can see watch effect function ran once initially so that's the first thing this runs initially when the component first loads or when the setup function first runs now watch doesn't do that but this does so it always runs initially now the next thing is if we're typing something in here this doesn't run again because it doesn't know what we're watching at the minute now then if i was to pass in right here search dot value and save this then let's take a look and we can see watch effect function run and then the value which is d so this is running every time search changes because if i do it again it's going to run again etc so it's doing pretty much the same thing as watch now now how is it doing that how does it know to run when search value changes well it's because we're using search value inside the watch effect function so it watches any dependencies of the function any value that we use inside it like search.value it will watch that and when that changes it will automatically run this function so it's a bit like watch but we don't have to explicitly say what we're watching it will just automatically watch any value inside it and then run it when that changes so then if you don't want to use that value inside the function you could use watch or if you don't want it to run for the first time around automatically you could use watch otherwise if you do want it to run once to begin with you could use watch effect and also if you're using the value inside the function you could use watch effect as well now personally i find myself more often than not using watch effect much more than watch this is partly because i don't need to list my watch list but also because sometimes i want the function to run right away perhaps to get some data for the components so a lot of the time that's why we use watch effect to get data from a database and perhaps that request relies on a resource id so whenever the id changes we want to rerun the function to get that new resource from the database we'll see examples of exactly how to use it to do that kind of thing in future lessons but one more thing before we finish up with these two how to stop them watching well all we need to do is store the return value in some kind of variable so i'll say const and then stop watch is equal to watch and then down here const and we'll say stop effect is equal to watch effect so these things right here they return a function and now we're storing that function in this and this and to stop them watching all we have to do is invoke those functions so let me create a button up here and inside that button will say stop watching and we'll attach a click event to this so at click and set it equal to handle click now we need to create that function down here so const handle click is equal to a function and then we'll return it at the bottom so we can use it in the template handle click so if i want to stop these watching all i need to do is say stop watch and then invoke that because this is a function because this returns a function and this does as well and then the same thing for stop effect and that will stop them watching so if i save this i'm going to come over here and refresh and type a lot of stuff you can see it all logging this stuff to the console but if i type stop watching then it no longer does that it's no longer outputting anything to the console okay so that is watch and watch effect next up i'm going to show you how to work with props in the composition api

Channel: The Net Ninja

Views: 44,752

Rating: 4.9745221 out of 5

Keywords: Vue, vue 3, vue tutorial, vue 3 tutorial, vue js, vue.js, vue js tutorial, vue.js tutorial, vue js tutorial for beginners, beginners, tutorial, vue.js 3, vue 3 new features, vue js 3 tutorial, vue.js 3 tutorial, vue 2 vs vue 3, composition, composition api, vue composition, vue composition api, composition api tutorial, vue 3 composition api, vue.js composition api, vue js composition api, vue composition tutorial, vue composition api tutorial

Id: V-kxBWcPJfo

Length: 44min 40sec (2680 seconds)

Published: Mon Dec 14 2020