Vue 3 & A First Look at the Composition API

it's still some time to go until vue version 3 will be out it's currently in beta but we can already have a look at what vue 3 will bring which new features it will add and we'll have a look at one very important feature in this video in great depth which is why this video is a bit longer and that's the new composition api so let's first of all have a look at what exactly viewfree brings what it adds to the view landscape and why we need a new version and then i will show you in great detail what this new api means if it replaces the old one why we use it and how we use it so what will viewfree bring and important viewfree is not out yet at the point of time i'm recording this video but what will it bring once it is out now first of all it's important to understand that view free the framework itself the code base behind the framework will be completely rewritten and that's important though i'm talking about a under the hood change under the hood it's rewritten the code base is rewritten it works differently under the hood it brings us many advantages to which i'll come back but the syntax you use the way you work with vue does not change it stays the same that is really important it's not a complete rewrite as angular 2 was for angular 1 it's a under the hood rewrite that keeps the syntax and the usage patterns you're used to now why does this rewrite happen and why do we have a new version well for one this framework is rewritten to take advantage of some new javascript features and some new ideas the team gathered over the years to offer us better performance so due to internal changes and next-gen javascript features being used for example the proxy api vue free works a bit differently under the hood and tends to have way better performance potentially we can get huge performance gains and this is basically a free win because as i mentioned you don't need to change your code for this to happen if you use viewfree you can basically write view applications as you did in the past and you will get this better performance out of the box now better performance is not the only advantage of view free though we also get better typescript support and important typescript stays optional now you could already use typescript with vue 2 apps but their support was limited some things were not really working you didn't get type support everywhere ide support was not that great and since vue free internally uses typescript in its code base now it has way better typescript support so it's still optional you can build view apps with vanilla javascript both with view 2 and view free but with view 3 it will be much easier to use typescript if you want to and then there is one huge new feature which actually does mean that the syntax changes but this feature is optional there is a new way of building components you could say or of configuring components you can use the so-called composition api now it's totally optional it's an alternative to the traditional way of building components and in this video i will show you both the traditional way and how it would look like when using the composition api and this api therefore can replace the old syntax but doesn't have to if you don't want to use it you don't have to use it so it's not removing the old syntax it's not changing the old syntax it's purely additive which means it's just an addition so you can use this new syntax for building your components and this syntax will offer some advantages which i'll also show you in this video so with that you have the overview let's now dive in and let's focus on this new composition api because that is the biggest change which potentially can affect everyone now keep in mind it's optional though now the cool thing is we can already play around with this new api at least with the majority of its features in vue 2 applications so below the video you'll find a link to this starting project and this starting project actually uses view version two not view version three because as i mentioned at the point of time i'm recording this and for quite some time still view free is not stable yet it's in beta uh release can be expected in early to mid 2020 i would say for now u2 is the latest version and still we can use this new api but to use it let's first of all understand the old api and understand its limitations so you got a very simple application here and if you run npm install and then npm run serve so effectively executing this serv script here you get a running development server which you should keep up and running and this will host this simple application here which you can open in a new tab under localhost 8080 where for one you have this button to toggle this dummy content here and where you also have these two inputs where you can enter some data to add new items here to a list down there like this and then you can click on these items to also delete them now it's of course not a super fancy app but it will be a great example for the limitations and also for how to use the new composition api if we have a quick look at the project we see that i have three view components here i have the app component the app component renders this div with that button and the toggleable paragraph here and then i render a product form and a products component which are of course these two other components i have here which i import here which i register as local components in the app component and then in the app component i got some data i got an array of products and i got the show user info boolean i got the create product method here in the end which adds a new product to this products array i got the delete product method which deletes a product and i get the toggle user info method now toggle user info simply changes this show user info data property here and toggle user info gets fired when we click this button create product gets fired from inside the product form i pass a pointer to the create product method here to the create to the create product prop in product form and here in products i also have remove as a prop to which i pass a pointer a delete product and this is one way of ensuring that these methods which are defined here in the app component can be called from inside these two child components now let's have a look at these components the products component is relatively straightforward it receives props it receives the items prop which is an array and required and the remove prop which is a function remember i'm passing in a pointer at delete product to remove so which is a function which is also required and then here i have remove product as a method in the products component as well but all i do in there is called this remove prop function we're getting here and this remove product method here at the end gets triggered when we click on well i rendered list item a rendered product and in the template i just output my list of products here with v4 i go through all my uh items items is one prop i got here and this in turn holds the products array we manage the app component and then we also got the title and the price being output here we got some styling at the bottom and that's it and in product form i have a form in my template with two inputs one for the title one for the price got the submit button which is disabled if the inputs are not valid and then here we also have the create product function which is received as a prop we got some data for the title input for the price input and for whether the form has been submitted or not then here got some computed properties one for the price which simply converts the price input which is text to a number and is valid which checks the title and the price input and determines whether they're not empty and hold valid inputs in which case is valid is set true is valid is used here to control the disabled button then i got a watcher here where i basically watch the submitted uh data field here and whenever that changes we run the watcher there i check if it is true in which case i set it to false and i reset the inputs so that basically the form is reset whenever we submit it because submitted will be set to false inside of the save product method which is bound to the form submission here with add submit and there in the end all i do is i prevent the default and i call create product which if you remember is received through props here so i call that function which i receive through props and to that function i pass the entered inputs and thereafter we submit the form which triggers this form resetting logic now if the inputs are empty here you will see i can't press the save button but actually is it is disabled i just don't have a special style for that if we inspect it though we see it's disabled so indeed this is disabled here and only if we have valid inputs here you see it gets enabled and we can add this so this is how this all works and that's a fairly trivial default view app which you also could build in different ways but which also should work relatively fine now which limitations does this have because this is the view syntax we all know and love and it's fairly straightforward so what's wrong with it now there isn't necessarily something wrong with it there just can be problems in bigger view applications if you have a view application with dozens or hundreds of components that components especially bigger components can be hard to reason about and hard to manage here we have small components right these are all very small components with some data with some computed methods with some methods which are triggered upon events and that's it but the bigger and the more complex your application gets the more complex your components can get and the longer they can get and then this traditional way of building components and of configuring them also often called the component options api which i'm using here can reach its limits or can lead to components that are harder to manage also when it comes to code reusage now for example take the app view file there i have in the end two different kinds of data i'm managing the products and show user info now don't get me wrong this is a super small component and this is definitely not a component that's hard to understand but if it were bigger then having different data pieces which are managed independently in a component can be harder to understand why because with the options api we organize our different component features not by feature but by option so we first of all specify which data this component is concerned about products and show user info and then we might have computed and watched and methods like in this case and here again i have methods related to my products and then also a method related to the user info so in the end we have two features going on in this app component you could say products and this user info in this case user info the only data related to that is whether we show it or not but this could be more complex as well it could be more complex user info it could be the logic to fetch it from a server so this easily could be more complex i'm just keeping it simple here so we have a chance of going through this code in a simple tutorial and video so it would be nice or it could be nice in bigger apps if we could split this if the data sits next to the logic next to the functions and methods that work with it and we therefore organize our component configuration by feature and not by option so that we don't say here's the data here are the methods but then we say okay here's everything related to products and then below that here's everything related to show user info that's one thing where you will see in a second that the new composition api can help us it's not the only thing think about reusability now in this app we don't have much which we could want to reuse we have a fairly trivial application here but in the product form here maybe we have some logic which we would love to reuse in other parts of our application as well maybe form related logic which we then write in a more generic way but which we then can use in any form and not just in this form maybe also something as trivial as this toggling logic here in the app component here we're toggling user info but in other parts of the app we might be toggling details about a blog post or details about a product we're listing so code reusage also is something which can be difficult now before we dive into the composition api to see how it solves these problems let me show you how we could make our code more reusable in traditional view so in view 2 syntax only we could work with a mix in let's say we want to make sure that we manage this toggling logic so this data piece here show user info in this method here to change it in a separate mix-in for that we could simply create a new folder maybe named mix-ins and there we have the toggle dot js file and in there we export a constant toggle mix in which holds an object which holds a data function where i return data where i have just a show prop let's say and which also has a methods object where we have the toggle method let's say and in there i simply set this show equal to what this show is currently not so that's in the end just a more generic form of the toggling logic we have in the app component this could allow us to get rid of toggle user info and show user info and we could instead import our mixin object so we import from the mixins folder the toggle mix in and there i named it toggle mix in so let's import toggle mix in here and now in the app component we can add this new mix-ins option here which is an array of mix-ins we want to mix into this component and there i refer to the toggle mix-in this is how mix-ins work in view now what happens is that the data of this component will be merged with the data defined here in the mix in and the methods of this component also will be merged with the methods of this mix in and hence with that if we go back here to the app view component and we now adjust our template to refer just to a toggle method here because i named it toggle in the mix in and then just to show here and also here and we save all of that this rebuilds just fine and our toggle logic still works so we can reuse this toggling logic now problem solved right now not entirely for this simple app it certainly does the trick but one downside with mixins is that inside of the app component we can't easily see what the mixin adds sure we can dive into the code of the mix-in but then we have to remember what's in there when we come back to the component for example that the method is now called toggle and the data property is called show we have to remember that it's defined in the mix in and of course this is not too much to remember but if you work with tons of mix-ins this gets harder also if you have multiple mix-ins you use in one and the same component mix-ins might start to overwrite each other so one mix-in might interfere with functionality added by another mix-in because you're using the same names in different mix-ins this can be a potential issue of course one you can avoid by ensuring that you don't reuse names across mix-ins but it is something which you can forget or overlook and then you introduce a nasty bug so mix-ins are helpful but not the perfect solution so here now we have another example of what's not ideal and now that we know all these things which are not ideal let's finally come to the composition api and see how that works and how it helps us solve these problems so time for the composition api first of all we have to install a package in order to be able to use it in a view to application so quit the development server and run npm install dash dash save add view slash composition dash api this installs this extra package for view 2 important for review 2 which allows you to use this syntax which will be included in view 3 by default in view 2 apps already thereafter you can restart that development server so now we can use this new api in older projects and this is mostly meant to experiment with it you could of course use it in production apps too but there are things which still might change there might still be bugs in there so primarily it's really meant to experiment with it so now with it installed let's convert the app component here actually to a app component which does not use this options api but instead uses this new composition api and for that i'll first of all get rid of mix ins here and bring back my old way of managing show user info just inside of here simply so that we can first translate this all to the new api before i then again show you how to implement code reusage so here i renamed this to toggle user info again and here it's show user info and now let's translate this entire component configuration here to use the new api and we can also get rid of this import here by the way now the new composition api adds a new item we can add to our component object we leave components here that does not change but now we can add a setup method here it has to be named setup and it is available because of that new api we're using because of the composition api so we can add setup to our component objects now now setup is a method and in here we now manage our state so to say our data of this component and we also manage all the functions which should manipulate this now for example here i got two pieces of data i got product and show user info we could add a new constant here products and initialize this to an empty array so i basically converted this property in the data object to a regular constant in javascript and the same for show user info which i'll set to false here next we can add a function a function which allows us to for example create a new product so i'll add a const here and of course we could also use the function keyword to create a function but i'll use cons create product and create an arrow function here but a normal function would work as well an arrow function which receives the title and the price and which then basically does what i did in the create product function down there i create a new product object and now i don't add it to this product but just to products important that this keyword is not available in this setup function because it will run before the component object is fully initialized in the end so this is not available in here or it is available but it will not refer to the view component but we don't need it here either because we just want to interact with this regular constant here with this regular javascript constant now besides create product i'll add a new function here in this setup method and that of course is my delete product function so i'll just copy this here add it here add an exclamation mark here and an arrow here and it's not this product but it's just products and products and now since i plan on changing products i will actually change this from a const to a let because i assign a new value to products here when i overwrite it with a filtered version of this array and last but not least toggle user info this can also be added as a function here so here i have toggle user info add an exclamation mark and an arrow and now it's not this show user info but just show user info and since i changed my value of show user info here i will also change this from a const to a let now we have that here and now we can remove data and methods because they basically have all which i had in there in the setup method now now what's the gain of this and how does this work well it doesn't work yet we're getting started we're making our first steps in the right direction but we're not done yet to make this work we now have to return something here in the setup function an object an object which vue will take into account when it renders this component template when it parses this component template for the first time in this object which we return here we now return everything we want to expose to our template so for example here my products my show user info boolean create product delete product and toggle user info now in case you're wondering about this shortcut this is just a short end for writing basically this all the time if the name of the property is equal to the variable you assign as a value you can omit the colon and the value assignment javascript will expand it automatically so i'm exposing all this data now to the template this is what this return statement does under the hood view will pick it up and now render the template with all this data available so in the template we can now use toggle user info because i'm exposing it here we can use show user info because i'm exposing a key of that name here and the value will be the value stored in the show user info variable and now if we save this you will see we get a bunch of errors here now the reason for this is that view is not yet aware of the fact that we want to use the view composition api in order to make view aware we should go to the main.js file and in there add a new import import view composition api or any name of your choice from add view composition composition api so the package we installed a few seconds ago and then simply run view use and pass in the view composition api like this to add this as a plug-in into your into your view app basically with this this now rebuilds and works but you will see that if you click this button for example nothing updates here the forum will work because there we mostly use the components with the old style but this toggle button does definitely not do the trick the reason for that is that we're technically using this composition api with this setup method and we provide everything to view it needs to render this component or to render the template with the data we return from the setup method but once the setup method is done running view basically has no inclination to render the template a second time after the initial render now in traditional view so without that composition api it for example keeps track of the data you have and whenever that data changes it re-renders dui and the same for computed properties and so on now here the problem we have is that vue does not keep track of products and show user info so when this changes because for example toggle user info is executed which it is well then it will not re-render because vue does not keep track of show user info it does not see that this has a new value and that it should be rendered the template to tell view to do this you have two ways now with the new api we need to import something from that new api so from ad view composition api the first way of defining data on which view should keep an eye is by importing reactive from there with reactive you can basically tell view about an object which properties should be watched you use it by calling reactive as a function and to that you pass an object where you for example have a show property which initially is false and now with this setup here we would set show userinfo dot show equal to what show userinfo.show is currently not and now since we used reactive up here view will keep an eye on that object and on its properties and if one of those properties changes it will re-render so now we just have to adjust our code here and refer to show user info dot show show user info.show and if we now save this after these adjustments this works again and toggling works so reactive is one way of telling you about an object it should watch out for but what if you don't want to use an object here we only need a boolean after all well for that you can use a ref you can import ref from the view composition api and instead of using this approach we can now add a constant show user info and initialize it with ref which takes a default value of false now this in the end creates a tiny wrapper around this value and stores this in show user info and now we can use show userinfo.value the value properties added by view so whatever you initialize with a ref is basically always an object which has a value property and that value property holds the value you use here as an initial value and then i set this to a new value down there in your template you don't have to access that value view will do this automatically for you if it detects that you're working with a ref so here we can then just use show user info like this and you will automatically have a look at the value property and now with ref this is also a property or a value view will keep an eye on and whenever you assign a new value view will update the template and now i just have to get rid of the reactive import to satisfy my linter here and get rid of the error so now with this toggling again works and this is now a very lean way of managing this show user info data as a reactive state now this is now a cons instead of a let because i never assign a new value to show user info i only assign a new value to the value property which as i mentioned view ads automatically and with that we can do the same for products of course we can change products via const and use ref to initialize it to an empty array and then in create product i access products.value and push a new product and down here i set products.value equal to products.value.filter and now with that if we save this you see this works and if i add a book here for 12.99 this also works adding and deleting so this is now the composition api in a nutshell but where's the advantage it's a different way but how does it help us with the problems i mentioned earlier well let's first of all consider that we want to have a big component but we want to keep the data we use in a component in one feature of the component close to the logic that changes that data that was one problem we had before well it's easier now we can take the show user info const remove it here and maybe add it here close to the toggle user info function with that i got my products data and all the functions that change products sit directly next to each other and i got my show user info data so directly next to the function that changes it so now we have features sit close to each other reusability is also easier we can create so-called composition functions i'll store them in a folder named comp functions here for example a toggle js file where i simply export a function which by convention should start with use if you worked with react and react hooks this might look familiar to you and the entire api might actually look a bit familiar to you so here i then use use as a starting prefix on my name here and then maybe use toggle and this is now simply a function a function in which we can use features from the composition api we can import ref from add view composition api here for example and manage our toggle state here with ref false and have our function here excuse me our show state and have our function here toggle which will change this state where i basically set show value equal to what show value is not and then here in this use toggle function i return an object which exposes show and toggle so the show constant and the toggle function here and now we can import this since it's a normal javascript function into our app component here we can now import use toggle from comp functions toggle and simply add this here into our setup function so here instead of managing our toggling logic like this we can simply execute use toggle which i'm importing from that toggle.js file in the comp functions folder and use toggle returns an object right it returns an object with the show constant and the value in there which is a ref which is reactive and watched by view and the toggle function so we can use object destructuring here to pull out these values and have our show data piece which we can even rename to show user info with this destructuring syntax and have our toggle function here which we can rename to toggle user info and now with that i'm destructuring what i get back from use toggle and use toggling has my reactive logic i have less logic an app component and i could use use toggle in any other component but unlike in mixins i see what's in there i will get intellisense support i get support in general by my ide here and vue and the compiler can actually also look into this function and warn me at an earlier point of time when i try to use something which is not part of that function and also because it's a regular javascript function i can add multiple such functions from different files into one in the same component and since the logic resides inside of our function and gets not merged with the existing component we also avoid name clashes and so on so all the problems we had with mix-ins they're now gone and therefore since i also renamed this here with this destructuring syntax i have my working component with the logic outsourced into this custom composition function which uses features from the composition api so that solves our mix in problem and it's now a way more elegant way of sharing and reusing logic so this hopefully shows you why this new composition api is interesting it can solve problems you encounter in bigger applications and bigger components that's the main part of the video as a little bonus let's now also translate the product form component to use the new composition api because that might also be interesting since we dare also have computed values and watched values so let's practice working with the composition api here in the product form component it's of course a component built with the traditional options api and therefore let's now see how this would translate to the new api first of all here in the script tags let's import something from the new api from add view composition api because we'll definitely need something from it here in this component we'll definitely need a ref the ref function because we have some data which we want to manage here maybe we also want to have the reactive function to also manage grouped data in an object so let's get started we still define props like this this does not change so we still define what we get in this component like this the composition api doesn't replace everything you had in your old api it mainly replaces data methods computed and watch so we can now get rid of data here and instead add the setup method again now in the setup method here i have my three data pieces here i have my let's say input state which i'll initialize with reactive to which i pass an object which has the title which initially is an empty string and the price which initially is an empty string and then i have this standalone submitted value which will initialize with a ref like this so basically now the data we used is translated to the new syntax in the composition api now with that let's all work on the methods before we have a look at computed and watch there i have to save product method so i'll copy this and comment out the methods object here and add this here now in setup so here i now have save product which is an arrow function which gets an event which i prevent here and now here this won't work i mentioned this before we can't use this here because from inside the setup method you can't access methods in the old api and so on this does not work instead here i now of course want to work with create product which is a prop now since i can't use this to reach out to the component instance i need a different way of working with that prop and thankfully setup receives an argument a parameter if you want it receives the props parameter which gives us access to all the props this component receives so when view executes setup for us it will give us access to all the props this component receives so that inside of setup and of all the functions we define in setup we can work with those props so then here we can simply call props dot create product create product is a prop here and with that i'm calling it well title input that's in the end now input state dot title right and here i got input state state.price at least almost this will not be the final data we forward but good enough for now now for submitted i will now set submitted.value equal to true here so now the method was carried over but what about computed and watched values let's start with watch here i'm watching submitted and when it changes i in the end clear my input well let's comment this out and rewrite it in the composition api there we can import a watch function so we can execute this here now maybe here it's up to you where exactly you do this you can execute watch and watch now takes a function by the way all these functions i'm showing you watch and reactive and so on can be used and configured in different ways and the official api documentation which you of course also find linked below the video is a great place to learn all about the different variations here i show the basic forms so in the basic form watch takes a function and view will automatically kind of look into the function and see with which data you work in there and it will automatically watch the data with which you work so that it knows when to rerun this function you pass to watch so here i'll check submitted dot value and check if this is true and if it is i will set input state dot title to an empty string and input state dot price to an empty string to reset it and then here submitted dot value back to false now by the way in the product form template i'm using two-way binding on title input and price input this will still work with these reactive values of course i have to adjust the names later though but we'll come back to this so for now i'm watching my values here what about computed there i basically want to convert the entered price to a price which is always a number or float specifically and i have this is valid computed value well we also can import a computed function from the composition api from the view package maybe we execute this here and compute it works a bit differently than watch computed will return a value for example the price or the price as number maybe to make it clear what it will be and then compute it also takes a function the difference to watch just is that computed returns a value now what goes into this function well our computed value logic so basically here for price this returned value like this and now this return value will in the end be stored here and just as with watch view will automatically have a look at what you're using in there and watch this value and rerun this function here whenever this value changes now the only important thing here of course is this price input is wrong this of course should be input state dot price now we have another computed value and that is is valid so let's copy all of this and thereafter we can also comment out compute it down there and get rid of it and then here i will add is valid and use computed and pass a function to compute it and in here i have my logic now again it's not this title input dot trim it's it's instead input state dot title dot trim and here i check if price as number which is the value with which i want to work here if that is not a number or if that is smaller or equal than zero and then i'm good and now there's one important step you must never forget this whatever you're doing here in your setup function you in your setup method is nice but in order to be able to use it in the template you need to return it so at the end of setup you need to return what should be available in the template in my case here that's the input state it's also the save product function and the is valid computed property or computed value i should say now the submitted value is not required and price's number is also not required in the template hence we don't need to return it now some adjustments are required on the template there save product has the same name but for title input it's now input state dot title to which i want to bind and here it's input state dot price to which i want to bind the rest is the same and if we now save this it therefore should work now if we go back and we try to use this huh we see this doesn't work the reason for this is that in our code and computed for is valid i'm referring to price's number and price's number is the result of computed it turns out what you get back in such a case is basically a ref so similar to what we got when we used the ref function here in the app component and remember that what we get back here is an object which always has a value property so in the end the computed value is hidden under a value property in an object which is returned by computed so here we should check for pricesnumber.value and pricesnumber.value like this if we do this and we save this now we can add a book for 12.99 and at least this works but now we get a different error the price to fixed is not a function well that simply stems from the fact that in my save product function here in the product form i'm forwarding input state dot price to my component which gave me that create product prop so to the app component and that now is a string however because input state.price is a string that never changed i of course want to forward my price as number so down there it's price as number dot value which i want to forward next to input state dot title and with this now after reloading this one more time if we now create a book here you see this works and if i add a carpet for 129.99 this all the works and i can delete this as well and now everything has been translated to the composition api now i know that this is a lot of new stuff and on first side it looks like a lot of overhead to learn a lot of new things to learn without a great reason to do so right now if you never had view apps where you found that the existing api caused problems there is no need to switch but if you worked on bigger projects and bigger components this new api might working on those projects easier because it's easier as i showed to organize data and logic next to each other and to share and reuse logic therefore this new api is a great addition but of course not a must use thing if you prefer the old api which will be fully supported in view free nonetheless i would recommend that you also dive into this new api and i showed some of the most important building blocks here of course there are some things to memorize reactive and ref for managing reactive data that compute it returns an object with a value property things like this but i showed them all in this video and in addition below the video i mentioned before i attached some links which you can dive into to have a look at the official documentation so to say for this new api learn about the reasons the view team mentions there and also see the full syntax and all the configuration options you have available with that i hope that this video was helpful and at least got you started with the new api and could show a bit why it might be interesting for some applications the core takeaway of course as i mentioned at the beginning already is that viewfree adds this new optional api brings us better performance no matter which api we use and in general will probably be a great new version of you which doesn't force you to change anything if you don't want to but which allows you to write your apps in this new maybe for some apps more efficient mode

Channel: Academind

Views: 92,807

Keywords: vue, vue 3, vuejs 3, vue3, vue composition api, composition api, vue 3 composition api, vue 3 composition, tutorial, vue course, vue 3 tutorial

Id: V-xK3sbc7xI

Length: 45min 17sec (2717 seconds)

Published: Wed Dec 11 2019

Reddit Comments

[u/Tarandon]

Max is a great teacher. I really enjoyed his vueJS course on Udemy

[u/liuwenhao]

So, it's React Hooks, but in Vue?

[u/hashimss]

Max was my first online teacher who taught me what is a web application. I wish I could meet him personally and thank him.

[u/thinsoldier]

For the simple things i want to use Vue for, it's perfect and down right easy... I just can't get past all the npm, node version, and webpack config problems :'(

[u/bulldog_in_the_dream]

This looks better than the current object syntax, but I think there is room for improvement. Why the need to wrap reactive variables in functions when initializing them and then the need to access properties on them when changing their value?

This is a leaky abstraction. It should be enough to just declare them and then assign to them like regular variables, the same way as in e.g. Svelte. Explicitly returning them from the setup() function is fine.