Vue 3 Script Setup Tutorial - This Changes Everything!

in this video i'm going to show you everything you need to know to get started with the amazing new script setup pattern for vue.js3 and the composition api using the script setup pattern will massively reduce the complexity of your view components and the number of lines in your script section in this super simple app that we're going to create today we're going to reduce our lines in our script section from 29 lines down to just 14. so just imagine the kinds of reductions you'll be able to get in a real world complicated app with hundreds of components throughout this tutorial i'll show you how we did things the old way using the setup function and how we do things the new way with the script setup pattern if you're new here my name is danny i'm an indie app developer and creator of fudgit a popular cross-platform app with over two million downloads which you can download right now for ios android mac windows just search for budget i also create courses on web development quasar framework and beautify i'm currently working on a view three composition api course with pinya and veet which will teach you everything you need to know to get started with the composition api and i've just finished planning this and i'm about to start recording and we have over 20 modules here i'm going to cover all of the differences between the options api and the composition api and i'm going to show you all the basics and how you do things differently with the composition api including reactive data methods computed and watches life cycle hooks directives how we handle view router differently lists teleport template refs and next tick how we handle child components including props and emits model value dynamic components and provide and inject i'm going to learn all about composables including how to create custom composables and how to use composables from third-party libraries like view use and we're also going to learn the basics of state management with pinea and once you've learned all the basics we're going to create a real world app from scratch a note-taking app called noteballs which will make use of everything that we've learned in the basics and you can grab this course or sign up to be notified when it's released if it's not out yet at danny's dot link slash composition api please hit subscribe and click the bell if you don't want to miss any videos like this uh let's get started with script setup [Music] let's create a view 3 project so i'm going to jump to the view 3 doc site i'm going to search for view 3 and jump to the website and at the time i'm recording this the view docs are about to be massively revamped and i'm going to be using the new documentation because it shows us the latest way to create a view project with vt which is much faster than webpack and so if you're seeing this older page like this then you can just change v3 in the address bar to staging and you'll jump to the new docs however if you're already seeing this then just stay where you are and then i'm going to jump to install and scroll down and we need to have node.js installed and there's a link here to install that you probably want to install the one on the left once that's installed we can then create a new view project with veet using this command in our terminal and i'm just going to be using the terminal that's built into vs code which is the editor i'm going to be using and you just want to make sure you're in the folder way you store your projects and then run this command and it's going to ask us for some options and for the project name which will also be the folder name i'm going to type in view dash script dash setup and for the rest of the options i'm just going to choose no and it's already scaffolded the project so we just need to cd into the folder run npm install to install dependencies and then run npm run dev to launch the project so i can see it's created the folder here view script setup i'm going to drag that into vs code and open up the terminal with control and backtick and run npm install to install the dependencies and that's finished so we just want to run npm run dev to launch our app i'm just going to command and click on this link and we should see the basic view app running in the browser [Music] let's set up a simple app using the older setup function and then change it to use the newer script setup pattern so that we can quickly see how things work differently with the two approaches so i'm going to jump to this view component which is in source and app.view and i'm just going to remove the script section and remove all of the style and just get rid of everything inside the template tags and save that and i'm also going to delete everything in the components folder so i'll select all of these and right click and delete uh we see an error but if i just refresh that's gone away okay so i'm going to add a h1 tag to this template i'm just going to put the text my name is bob comma i'm 24 years old and save that and we can see that one of the great things about v is that the hot reloading is almost instantaneous now anyway let's add a script section with the older setup function pattern so i'll add a script tag and we need to add our export default and inside that we need to add our setup function and i'm going to set up some refs some data variables for this name that's in this heading and this age as well so i'll add a constant called name set that equal to a ref with a value of bob and then i'll set up another constant called age set that to a ref with the value set to a number of 24 because we're using this ref method from view we need to import that so we'll do import ref from view uh to make these refs available in our template we need to return them so we need to add a return object at the bottom here and just return name and age and we should now be able to use these refs in our template so i'm going to replace the word bob with double curly braces and name and i'll replace 24 with double curly braces and age and save that and we can see that we're successfully displaying these refs in our template now the fact that we need to return all of our variables and methods and directives in this return statement when we use the setup function pattern can become a real pain in the butt maybe not in a really simple component like this but when you have a really complicated app with hundreds of components which all contain many different variables and methods and directives and other things that we need to make available in the template it can become really difficult to manage this return statement because every time we add a new variable or method or directive or rename one of those then we have to make sure we update the return statement as well so this gives us a constant source of minor stress when we're working on our view apps and in fact i spent a whole day on my app budget too converting all of my 90 or so components from this older setup function pattern to the new script setup pattern and that was a real pain in the butt but it was well worth it because now the app is much easier to work on [Music] well thankfully the new script setup pattern allows us to get rid of this return statement and never have to worry about it again so let's comment out this script section and redo this using the script setup pattern so i'm just going to add an opening comment here and then one at the bottom and to use the script setup pattern we just need to add a script tag and then we don't add the export default and we don't add the setup function we just add the attribute up to our script tag like this and we put all of our code directly in this script tag so we declare our refs in the same way so i'm just going to copy these two refs and paste them here and we still need to import the ref method from view so i'm going to copy that line and paste it to the top and we don't need to add the return statement any variables or methods that we declare in here will be available in our template straight away so if i save this it should still work and yeah we can still see the variables being output and if i just change one we can see it updating the template so you can see we've already reduced our number of lines in our script section down from 13 lines to just four lines and we no longer need to worry about this pesky return statement [Music] let's add a simple method which is fired when we click on this heading which just changes the values of our two refs thus updating the template and we'll do this the old way first so i'm gonna take these comments and put them around the script setup tags and we'll do this the old way so i'll add a click handler to the h1 and we'll fire a method called handle heading click and we need to create this method inside our setup function and we can either do this using the function keyword function handle heading click or we can create a constant called handle heading click and set that equal to a function like this which is what i usually do and we're just going to change the values of these two refs so we'll do name.value to access the value of this ref and we'll change that to steve and then i'll do age dot value set that equal to 27 and again in order for this method to be available in our template we need to return it in this pesky return statement so i'll add that here as well and save that and let's see if that's working so i'll click on the heading and yet we see the name and the age change and now let's do the same thing with the script setup pattern so again i'm going to move these comments down here comment out the setup function pattern and again we don't need to add this method to a return statement when we're using this new pattern all we need to do is set up the function and it will be available in our template so i've just copied the handle heading click function from the setup function and pasted it here and if i save that we should be good to go so i'll refresh click on the heading and yeah it's still working we've now reduced our lines down from 19 lines to just nine lines [Music] how do we use child components when we're using the script setup pattern first of all let's just create a new component in our components folder and i'll create a component called my button dot view and add the template tag and i'll just stick a button in here with the text this is a button and save that and we'll jump back to app.view so first of all how would we use this child component in this parent component using the old setup function paradigm so again i'll just move these comments comment out the script setup tags and we'll do this the old way so first of all we need to import the component so import my button from slash components slash my button dot view one thing to note when we're using veet for our project using the new build tool that we've used to create this project we do need to add dot view to the end of our components otherwise we'll get an error so that's just something to note once we've imported it we then need to add a components object after our setup function and we need to declare our component here my button and save that and we should now be able to use this button component in our template so i'll stick that up here my button save that and we can now see the button on the page so when we're using the older setup function pattern this components object is another thing that we have to keep worrying about and keep updating every time we add a new child component or rename a child component etc but with the new script setup pattern we don't need to worry about this components object all we need to do is import the component and it's available in our template so again i'm going to comment out the setup function code we'll do this the new way so i'll just copy this import and paste it at the top here and that's all we need to do so if i just save that we can see our button on the page and we don't need to worry about this pesky components object so using the script setup pattern so far has allowed us to reduce our lines from 23 lines down to just 10 lines more than a 50 reduction and if you've enjoyed this video so far please let me know what you think about the script setup pattern down in the comments [Music] when we're using script setup there's a few things that we need to do differently including how we use props so let's set up a prop in the old way first for this button so we could use a prop to determine the text of the button so i'll pass a prop to this button called text and we'll set that to my button text and save that and now if we jump to my button.view let's receive this prop the old way first using the setup function so we'll add our script tags add our export default and our setup function and actually we don't need the setup function right now but we do need to add the props object and define our prop in here so we called our prop text so we need to set up a prop called text set the type which is going to be string and we could set a default value as well such as no text specified and save that and we should now be able to use this prop in our template so i'm going to select this text inside the button add double curly braces and just output our text prop save that and we can now see that the prop is getting through and if we change that we can see it's updated and if we remove the prop entirely and save that then we should see the default value which we've specified here so that's all working and i'll just put that prop back in save that so how do we do this the new way using script setup and i'll just comment out this script section and we'll add our script tags with the setup attribute and to receive props when we're using the script setup pattern we need to use the new define props method so basically we set up a constant called props and we set that equal to a method called define props and unlike most of the view methods such as ref and reactive we don't need to actually import this method which is pretty handy because we end up using it quite a lot and we can just pass in an object or an array into this method and define our props in the same way so i'll copy this text prop from the old code paste it in here this prop should now be working we can see the button text and if we change it on up dot view we see it updated and if we remove the prop we see the default value so that's all working now and i'll just jump back to my button.view and when we're using script setup and we're using props in our template we can either just use the prop name like text or we can use props dot text both of these will work however if we want to access our props in our script section then we do need to use props dot text so if i just log that out and open up the console we can see my button text being logged out if we try to just use text then we get an error so we do need to use props.txt but only in the script section in the template we can use either props.txt or just text and i'll just remove this console log before we move on [Music] so how do we emit a custom event from a child component to a parent component well let's just remind us how we do it the old way first so let's jump to my button dot view and we'll add a click handler to this button and we'll use the dollar emit method to emit a custom event let's call it button clicked and let's just move these comments again so using the old way we need to add a emits property to our default export and set that to an array with all of the custom event names so i'll put button clicked in here and save that and then i'll jump to app.view and again i'll switch these comments around and we'll listen out for this event on this my button component i'm going to split the attributes on that using the split html attributes extension which you can get from the vs code extension store and we'll listen up this custom event button clicked and then we'll just fire a method called show alert and we need to create this method within our setup function so const show alert set that equal to a method and we'll just to alert child button was clicked and again we need to return this method in our return statement here so show alert and save that and let's see if that's working click on the button and we see the alert okay so let's do this the new way so i'll jump to my button.view first move these comments around and to declare emits using the script setup pattern we need to use the define emits method a bit like the define props method so we create a constant called emit and we set that to the define emits method and we place an array in here and just pass in all of our event names so button clicked and save that and again we don't need to import this define emits method so now i'll jump to app.view and again move these comments around to reveal our script setup code and again all we need to do is create this show alert method we don't need to return it or anything so i'm just going to copy this method from the old code and paste it here and save that this should be working now so let's click on the button and we see the alert and i'll jump back to my button.view so this is how we can emit an event from our template basically the same way we did before but if we want to emit an event from our script section then we need to do this a bit differently so instead of emitting this button clicked event directly in the template let's fire a method instead so handle button clicked and we'll create this method down here so const handle button clicked set that equal to a method and to omit this method from here all we need to do is emit and then pass in the name of the event that we're going to emit so button clipped and save that and hopefully this should still be working and yep it's still working [Music] and if we want to send some data with our emit then that's really straightforward let's say we want to send a number with this emit and we want to receive that and change the value of this age ref to that number then we can just pass that in as a second parameter to this emit function so let's say we want to set the age to 29 just pass that in like that jump to app.view and if we jump to our show alert method this variable should be available to us here so we could just change this to new age and then to change this age ref we can just do age dot value equals new age and save that so hopefully if we click this button we'll see the age change to 29 and that's working [Music] so by using the new script setup pattern instead of the old setup function pattern we've massively simplified our components and reduced the number of lines in our script section down from 28 lines to just 14 lines and these are the most important differences with the script setup pattern which i've shown you here but if you want to learn some of the other important differences then jump to the view doc site and then api and then jump to script setup and basic syntax and here you can learn some of the other things such as how to use dynamic components how to access slots and ato's data and how to use top level async weight when using script setup and if you want to learn more about vue i have tons of videos on this channel or you can find my courses at danny's dot link slash courses and i'm currently working on this vue.js3 composition api course as i mentioned before and if you want to grab that or get on the mailing list if it's not out yet then just click on this link here or just go to danny's dot link slash composition api and you'll be emailed when the course is released with the opening discount and if you've gotten some value out of this video please do me a favor by clicking on my face over there and clicking subscribe thanks for watching and i'll see you in the next one [Music] you

Channel: Make Apps with Danny

Views: 46,355

Keywords: vue, vuejs, vue 3, vue js, vue js 3, vue3, composition api, script function, script, script setup, vite, methods, components, props, emits, custom events, danny connell, fudget, javascript, development, coding, programming

Id: 9whgkjxoCME

Length: 23min 39sec (1419 seconds)

Published: Wed Feb 23 2022