Managing state in Vue3 application

So, let me start with a couple of words about myself. I'm Michael. I'm currently working as an engineering manager for Zalando in Berlin. I've been a frontend developer for over a decade now, and I've been using vue GS since I think 2017, when it was only version 1. Before that, I was, as some of you maybe know, using things like jQuery and AngularJS. Those were nice tools and they still exist, but when I saw the API of Vue, I was really surprised that it was a nice tool and since then I did a lot of projects on it. And currently, of course, I'm using version 3 and happy to share some of the practices that are used daily by me and folks from my team with you.

Just would be also nice to have a bit of introduction. If you could put in the chat what is your current stack? Maybe if you're using Vue then for how long? If you're not and you're just genuinely interested to look at how certain tasks are done in the Vue.js, then just write it down. So would be really interesting to see the audience and what you guys are up to. Please put some comments in the chat about what's your current stack. I'll give you a minute. It doesn't have to be the full CV, just a couple of lines will be fine.

Perfect. I see, Peter. Great. Vue – which version are you guys using? Did you already switch to third or still using the second? I see. Michael, yes. I was shifting focus to front-end. Okay. Cool. Yeah, I have, let's say, more the opposite situation that for some of my work-related projects we use React, and that's not the choice, let's say, you always can make yourself. Some... Like what company is using mostly, but for side projects and hobbies and everything, I'm using Vue a lot. So... Okay, I see comments from also Lalex. I'm not sure if I'm pronouncing it correctly. Sorry for that. So Vue, React, Angular. Okay. Okay. Cool. Yeah, I see there is at least some knowledge about version 3 and it's not like everybody is using it daily, so that's good. That's what we're gonna explore, right? I'll start writing some logic in Vue 2 format and then convert it to Vue 3. Okay? But I can imagine, Peter, what you're saying about upgrading would be a pain. For large scale projects, it indeed maybe painful. Also, depending if you're using some framework like a library of components like, I don't know, Vue Bootstrap or Vue Defy, then, of course, they have Vue 3 versions, but they are either in beta or they are not ready. And so it's sometimes just not something you can do on your own. I can imagine. Cool. Thanks for the overview, guys. Let's just move on.

So, of course, the agenda is huge. We'll probably try to keep it short and do more practical parts rather than theoretical and we'll... let me enable the laser pointer. So we'll start with the quick recap what's cool about Vue 3. I will talk about the tooling, how to bootstrap a project, then we'll start writing code and creating components. Along the way, we will add typical libraries to handle routing and state management, and in the end, we'll see how we can add some testing and deploy the version to somewhere, for example, Netlify. So, to make it really practical, we're going to be building a small e-commerce front end. Since I'm working for Zalando, it's a big retail store, so doing a project around e-commerce has nothing to do with my current employer, just a topic.

So, we have the starting slides, sorry. Not the starting slides, but the starting content in this repository. You may... If you want to follow along, you can just clone that one and have a look. Basically, it has just a content folder, which has three pages that are just a home page of e-commerce website, product page, and the cart page, right? It's a very simplified version, of course.

And then, what we're going to be doing, we'll take those static pages and start adding view to them, so that they can load data dynamically displayed and so on and so on. For the API, we're going to be using also a mock service which is called fakestoreapi.com. Actually, has a nice list of API endpoints that you can play around. If you have, for example, if you're building some hobby project and want to just use some API, you don't have your own backend, then it's good to want to have options. I personally use a lot, another one, it's called JSON Placeholder. It has several nice resources that you can also consume, but those don't really... So download like a list of posts, a list of users. It's all static, fake generated data just to fill in your templates. You can consume like as a list or as a single item, for example. But those types of content, they don't really fit the e-commerce content, so I choose another another API to use. So it will be this fake-store-api.com. We are going to use Exos to consume the data from it and we're going to use those HTML pages to display the loaded data, okay? Mostly we will just use like get all products, get a single product. And that's mostly. I don't think we will dive into creating categories, but we'll see how it develops, okay?

Let me quickly show what's in the contents. So you can, if you want, you can follow along. I'll just start the project. While I'm switching screens and activating the local setup. Is the setup clear? Any questions about the process or something I can clarify? Please let me know in the chat.

So here you can see I'm in the folder of that project I sent the link to. And here we have, as I said, the content folder, which just contains the static files. So if I would just start a static server, it will look something like this. So it's a home page, which is pretty standard, just several items. It's a product page which is also like something you would expect on an e-commerce website and the cart page. In the cart you can, of course, do some adjustments. But it's all completely static, just HTML. You can have a look here, just blocks of HTML and some styles and images in the respective folder. So that's something we can later copy into a Vue project and make it work. Okay. So that's that. Now we'll switch back to the slides and we'll get back to a practical part in a bit. So I see more people joining. That's great. Welcome. Welcome.

So I won't take too much time on explaining why Vue is cool, but just to set some ground, what are we building upon. Basically, Vue was started around 2015. And it was heavily inspired by the syntax of AngularJS, also because even the author, he used to work for Google and actually for one of the teams that was in charge for AngularJS. So he took some of the concepts and approaches and then implemented in his own view how it can be done better, right?

So Vue heavily relies on so-called MVVM concept, where we have a model, what's now a JavaScript part, the Vue, our template part. And the VueM stands for Vue model, like some magical layer which kind of connects those two and makes two-way data binding to work and kind of hides for us the complexity of the synchronizing a model in the view, right? And so that's called the MVVM pattern.

The star count, I think it's already outdated. Currently, Vue is, I think, a little bit above the React in that sense. So I like a resource called npm trends to compare. So if we put here like Vue versus React, there's already like a search like this. And once again, so we'll add React. Nothing happening, actually. We'll just fill it out. Okay, it was just loading. And then let's add, for example, AngularCore. So you can see it's quite comparable to consumption in terms of npm downloads. It's not GitHub stars, but amount of downloads per year. And it is something around 20% from what React has. So I think it's pretty solid amount, if you compare it to some, let's say, less popular libraries, you'll probably won't see them in the graph. So let's try to put, for example, Svelte. Who ever heard about Svelte or tried to play with it? Oh, you can see here. Like, the green line down below, which is really, really tiny amount compared to those monsters. So that's why it's called like a big three most popular frameworks. But my claim, in my personal opinion, is that out of those three, Vue has the most developer experience and friendliness, both for starters. Like, if you're coming from, let's say, I don't know, DBA or backend or some other technical background, that's still easy to grasp. And also if you've been using some other front-end technology, then you can quickly pick it up. So, yeah. Hope you like it.

And about the stars, that's why I was here. So here we can see, I'm actually surprised. It used to be more, why 30,000? I think it was definitely more, really surprised. Ah, because probably they separated it like, I'm pretty sure it was about like, 160,000 or something, but now since it's a separate package, it, like, the count starts again, but okay, this is not the main thing, of course. What is really cool is that Vue has the full developer ecosystem. And it can integrate really well with a lot of platforms, starting from things like web components that can be used as an integration layer to create your own small, yeah, not only small, but any size custom elements, right? Vue has a really good integration with that. You can have your server side rendering stuff for that. There is a whole framework called Noxt that does the same thing as, for example, Next.js in React world, where you can improve your CO and improve the first loading times when you basically render your components on the server that send them to the browser. So Vue has that, Vue has integrations with Electron, the packaged browser, for example, that is running behind popular apps like Slack, and I think also Spotify, but I'm not sure. So, like, desktop looking apps that are actually powered by HTML and JavaScript. So you can also write them in Vue. And other things, for example, if you're using GraphQL, there is a Apollo version for Vue, same as for React. TypeScript, we will not be using TypeScript in this workshop just because of it's still a bit of a, let's say, overhead in terms of live coding, but I would definitely recommend to use TypeScript for your Vue 3 projects because now it's a breeze. Compared to version two, when you had to do certain tricks to make it work in some cases, in version three, it works just out of the box and it's really great. You get all those benefits of static typing. Although it's not completely like static typing and it's stripped during compile time and all that, but still it's improves the developer experience even more. If you're coming, let's say, from a React background, or you're mostly using React, I have this specific slide for you just for a quick recap. In many ways, Vue is similar to React because it also relies on virtual DOM as a concept to improve rendering time and optimize the UI responsiveness. It also uses the components approach, the same as in Angular, for example, when you have a file or that is, let's say, a building block like a Lego block for your application and it contains both template markup and the logic and those components are stacked together and then communicated through events. So in that regard, it's pretty similar. In terms of the JavaScript part, the JavaScript part, the logic part, the two-way data binding goes out of the box, again, not like in React because in React, you can do it, let's say, in two ways, right, with controlled component and an unload control component and then you still manually connect the state with the template, with what your render function returns while in Vue that is done behind the scenes for you so you don't need to think about it. Also, the templating language that Vue uses, it relies on directives.

Also, the templating language that Vue uses, it relies on directives. So, directives is basically something like custom attributes on your tags that add behavior. So, if we look at some example here, this is a directive, like it's a normal div but if you add certain attribute, which starts with a V, then it adds certain logic to behavior of the seller. You can actually use JSX in Vue, which you just need to configure it and then you are able to do that, but it's not, let's say, mainstream and we're not gonna look at it.

In terms of other, yeah, other similarities, the same ideas about the properties that go down and events that go up, that is quite similar. In terms of Ecosystem, I would say developer tools, not the developer tools, but the core library are similar in a way. So for Redux, there is a Vue-X State Manager. For React Router, there is a Vue Router. There is also a nice dev tools targeting specifically Vue, which makes debugging the applications really easy and productive, I would say. But if we talk about the size of the ecosystem, meaning like other plugins and tools, of course, it's probably comparable compared to what we see on the chart comparing the NPM downloads. Because, yeah, probably it's a bit less than in React case, but still, I mean, you can find all the needed stuff to build your Vue applications. Like, if you haven't used this repository called AwesomeVue, then I definitely recommend to check this out. It's basically if I need something that I don't have a ready solution yet, then it's my starting point. It's something like analog of React.rocks, where you have different, let's say, use cases and the different links to libraries that you can find to perform a certain task. So, here you can find, besides a lot of learning materials, videos, articles, podcasts, and so on. Also, all the functionality is basically broken into blocks. So, if you need a calendar, you can find a calendar. If you need a PDF reader or writer, you can find it also here. QR code, you name it, everything is there. So, then you just jump to a specific block, and then, for example, for implementing a map, you see how many plugins are there. I would say, like, more than a dozen, right, so what? But, of course, rule of thumb, check if the project is still alive and it's still maintained, and if it's compatible with the third version, right? So, since the items are either, let's say, first come first served, so the oldest ones are on top. And, as you can see here, those are with version 2 mentioned, right, and then closer to the bottom, you start seeing some of the version 3 mentioned. So, depending on the scope of your project, just be careful with the version that certain plug-in supports. You see here for something for audio-video, you see, like, version 2 is mentioned explicitly here, and the rest mention version 2, and maybe they already upgraded, they didn't just update the description here, but I would advise you to double check. I think even, like, this plug-in, I developed it myself five years ago, and it's certainly not supporting version 3, so that's just one of the examples. So, yeah, that's about the ecosystem. It's huge. It, I think, has everything you need, but just make sure to check which version that you need to support.

Okay? Good. Let's move on. So, I will not probably be diving into the syntax because I think most of you had some practice with Vue before, and we will maybe jump into specific elements later if that's the case. So now, what I would suggest doing, we will move towards the actually setting up a new project, and for that, we will be using what I would suggest is to make sure you have installed the plugin for your IDE, depending on what you use. Here is a list of plugins. So I personally use Vtuur or for VS Code. I know there is another one, but I didn't have a chance to really compare them side by side, and switched, and really try another one. But from what I hear, it's quite performant. Also, if you're using IntelliJ products, there is a separate plugin for you. Make sure you install it, because then, yeah, syntax highlighting, certain markup checks, and everything will be working out of the box, and that will make your development more efficient. Second item is Vue DevTool. Yeah, Voolar, exact. Yes. That's the one I mentioned, and, yeah. You see it's even recommended, but you may recommend it by a visual studio code shows it in the suggestions. Right, Mikhail? Okay. I just, because since I have Vetoo installed, I was afraid that they will be conflicting, and it will be unclearity, which of the plugins does certain operation, and then it will be a mess. So it's just a matter of timing and refining your, the tools that you use daily, right? So for the browser debugging, if you haven't installed the, please install Vue DevTools. It's also available for, I think, Mozilla and Firefox, Mozilla Firefox Safari. So if you don't have it, I think it's really recommended to have it on your machine. But if you used to be using the older version, please make sure to upgrade, because I think until a certain point, there was a previous version also active, which was only working with Vue version 2, and the current one supports both. But just if you had the old one, you may need to remove it first or deactivate, okay? So that's that.

And of course, if you see why, we will look into it just in a bit, how to bootstrap a project with Vue CLI, and what options does it have. So here I'm in my terminal. And if you have Vue CLI installed, then it will be working for you like this. You have the Vue command available and it will present you a list of options that are possible to use with it. We will not be exploring most of them. I will mostly focus on the ones that are needed to bootstrap a project. I would say, this is really worth checking out is Vue Create, the one that will create a project just based on the, say, standard set of questions. And we'll add initial setup for your Vuex router and so on, if you need. But if you're using Vue CLI, if you want to use, let's say, a third party template or a template that is available outside. That is, let's say, maybe something that you're using internally to bootstrap all the projects. Then you may use not an option create, but an option init, this one. I think we have it. I'm not sure if I'm not using it. And if you want to add new elements to an existing project, for example, you have a project without a router and then you need a router at some point, then you can use command add that will install a certain additional functionality for you.

All right. So, if I would be— just a moment, sorry. So, I'm currently in my specifically folder that I created for this workshop. So, it's empty. And, we're going to create a project right here, which I will do using a view, create. And, then I put a dot, meaning that I should— that I wanted to happen in this specific folder. Normally, you can put a name here, and this will be a name of your folder that will be created, and the project name, your package JSON, and app configuration. But, since I'm already in the right folder, then I can just do view, create, and dot. That's why it's asking me if I want to create it in this directory or not. So, I'm pretty sure yes. And, I will be using version three as a default. So, while it's resolving packages, let me switch back to the slides, because usually, you know, may take a while. So, what is cool, let's say, an update that we will be using byte as a bundler. Byte is basically relying on the ES modules that ES module supports in the browser, and instead of doing the full bundling with the efforts of Node.js process as it does with Webpack, and then serving the whole bundle to the browser, the byte takes an alternative approach that it provides every module, every basically file or component as a separate loadable file to the browser, and then the browser can do the heavy lifting and assembling it all together. That dramatically increases the speed of a bundling. So, and for development purposes, it's visible speed improvement in terms of how much time it takes to reload. And also, the cool part about it is that if you do a change in a certain module or a file, then Webpack has to re-bundle certain, yeah, certain parts of this of the full bundle. While with the right, since it's done, with right, you, yeah, don't have to wait that long because it will only send you, send to the browser the updated file or two. Okay. So I hope the installation is finished. Let me check. Yeah, okay. It's done. Let's see what we have here. We have a starting point, just a source directory, a public directory, packages, and so on. Now we'll open it in Visual Studio Code and really try to start implementing the UI that I was showing earlier. So here we have an empty project. Basically, the one that was just generated by the Vue CLI, it has a standard app component and Hello World component and just empty open installation code. The only thing I'm thinking is that we probably will need a router at some point. So let's use Vue CLI to actually add the router. The unit. I think it's called. I was thinking I can edit like this, but seems not the case. And also, what I see that it was generated using, it still uses Webpack instead of byte, so I will need to use another starter here. Just give me a moment. Yes.

Okay. So we'll just start generating from scratch. So this we can do npm create, and then use byte. But this will be a template. phone. We'll be using this generator to create. Here I can select which framework I want to be using. In this case, it'll be view, view with JavaScript. Now it's all in the subfolder. Let's move it out from there. We'll quickly install the dependencies and we kept the needed scripts in the packages file, and we have the same main.js and everything. However, we're still missing the router, but so let's edit manually later. Is anybody following along? Please put a plus in the chat. Then I can also set up the repository and commit this code, so you can check or if you have any troubles until that moment that performing the bootstrap of a project, please let me know in the chat. We'll create a new repository. So I've just created this repo, and I will now add it to the project and I will push everything. Okay, now we have the starting point and what I'm going to do next I'll just start the project the way it is and we'll copy the template for the starting page and the end product page, so it starts on a port 3000. Let me share the full screen. So here's the repository it's called view3workshop june kaf2 and on 300, 3000 we should be having an empty project, that's exactly what it is and now if I do a quick change, let's say, in my component file let's say I remove that blog and we'll also update the template immediately because it supports hot module replacement so if I put 42 here I will get a 42. Okay I think that's a good starting point we don't need maybe directly the router we will get to that a little later. Okay so first step, as I said, I will copy the static content for two pages so that later I can start enhancing it. First, let's follow the proper naming so the proper naming will be to use two components, names should contain two words and I will create a folder called views where the the respective pages will will be. For now we'll get rid of the hello world component and put a home component as main one. Final step of this project will be to edit and restore the whole page. We need to have a focus on the participation. This is not a Webpack setup, this is by default. An invite has to be added. The invite will have a United States And on that page is the second part of the website. I want to go back to the top page. If I am too short I'll just copy those 2 parts. Resolve will make the alias work. For now we don't need much, but later we can extend this part. If we need to work on bundling and improve how the vendor chunks are split. For now we'll keep it like this. Ok, so we'll save this and restart. Oh, yeah, of course, Resolve comes from a package called Pav. Alright, it's running now. Let's make sure we have the homepage working. Quickly look here. Ok, that page is there. Let's just add some text to make sure it's actually this. Yeah. Alright, so it's a good starting point. Ok. Now I'll copy the markup, as I said. I'll take this one. Here's nav bar, here's a section with products and here's pagination. I'll take the nav bar and also create a separate component out of it. And, I'm going to take this blog as the main one into my home view. And, what I also, of course, need to do is to copy the all the static assets, all that part.

For that, I will probably just take those two folders and copy them to public. Those are here and, I will reference the templates in my in my index.html. What I'm gonna also do here is to copy this one to the top of our app file. Since I'm using in the app two view components I will put them here. It's actually... I'm more used to have the template on top. Something like that. Let's see if it works.

Oh. It's... Works in the browser but I am missing the nav bar. Because without the nav bar you can't do much really. Nav bar is in the components folder. component. Nav bar. Okay. So now we have main content and still no nav bar. Where is it? Let's see what we're missing here. App section. Oh, okay. Now, of course I'm missing it in the template. So that's, that's why pair programming is efficient. Somebody else can look at what you're doing and quickly correct you. Yeah. I see. Thanks, I just only now noticed that your comment. But please, folks, if you see some stupid errors due to life holding, please shout, please put some messages. I'll be happy to quickly check it, okay? Close all the rest.

All right. So we have one page. And we'll do the same for the product page. Just take this one. Mostly now I will only move them. This is also a footer. It's a good idea to copy. Okay. And the product page goes here. So now the bar, we don't need it anymore, but the main part is here. I guess it's this one. Okay, since we don't have a router yet, I will just check it by replacing the element, so it will be... Let's make sure, okay. Now this page is also working, nice. Now we can start with actually adding some interactions to make sure we get the items not just hardcoded, but with the help of the API we're going to be using. For that, I'll close the rest and we'll keep it to the minimum. We have a home view here, and what it does is just an iteration over elements. We don't need all those static elements. We're going to just take one and move it to a separate file. I'll move this guy here. And I will create a new file called product list. I will just output some of the elements to make sure everything is in place.

And I will use the product list in my home view. Let's make sure it's working.

Okay. So now we have the same T-shirt, but now it's a real item. Not the markup. The next step will be to really connect the log.

So I see a question from Peter. He said, do you not need a root element to wrap the list of product items in the product list view. Product list view. Here. Yeah, that's, I think I have a separate slide with differences between view three and view two, and I will get to this now. It's a very good question, and that's one of the, one of the differences, actually. Yeah. It's also a good moment to switch from the coding a bit and look at the theoretical part again. So multi-root component templates or fragments, that's exactly that. Like, in view two, you would have to do like this, right? Div or section or whatever, and here you put something, right? While in view three, you can just put everything on the top level, let's say. So this will also work, right? You don't need a wrapper.

Since we're on this slide, let's quickly go through this. As I mentioned, the fragments is really visible feature. It's, let's say, not much changes, but it's really comfortable to use it like this and also, it's handy when, for example, you get the styling from other colleagues and those stylings have explicit paths of selectors and then, you would find yourself either adjusting the styling or doing something so that the hierarchy in the file is matching, but here we don't need this anymore. The next cool thing is the composition API. Of course, it's a big thing. We will see it a lot in action today. I'm not going to explain it now. The portals. Portals is a nice tool. Basically when you have, let's say you have a view application like I mentioned this blue circle is a view application. This blue box is a view application. The whole page is a bit bigger. This is also on the page, and this is also on the page. But view is only that part. And then you may want, so let's say this is the view, and this is not you. You may find yourself needing to do something with those blocks from outside your view logic. This is exactly what portals can allow you to do. It used to be a separate plugin. The same also plugin exists for React, and I think in React it's also built in. So, now it goes out of the box. So, imagine if you have, let's say, a new part of your UI which is built with view and some legacy part that is built with, I don't know, JQuery or something else, and you need to tweak those parts. You can do it with portals. Portals are pretty cool. Although, it's not like thing you're using daily, but it's very handy. Okay? API bootstrap and configuration API has changed. That's something you may have noticed in our main.js section here. How we did it previously, you probably remember. It's something like const app equals new view, right? And then you pass some stuff here, and then you continue with it. Right? But that's that has changed. Now we're using this syntax. And what is cool also about this new syntax, that you can, all the core libraries, like, router, route, view X, and others, they are using the same concept. Like, in router, you will see, we will call like create router.

Like, in router, you will see, we will call like create router. In view X, you will have like a create store. And so on. So this becomes like a common pattern, how this initialized. Secondly, it has another benefit, because the old way you were kind of creating an instance of a view in version two. And that was a bit problematic in case if you had multiple instances on a page or during a testing phase. And this new API ensures that you're not patching the same, not extending the same prototype, the same initial view version. If you wonder more about it, there is the whole article that I wrote about a year ago for Vue School about it here. So, you can check this out. It was more than a year ago actually. It's a year and a half ago. But here we go exactly through all those new way to bootstrap an app. Okay. So, that's that.

Script setup. That's you already saw in the initial template generated by the white. So, what's that? It's let's say you can skip some of the component definition parts by adding a setup attribute here. But we will see it more in action later when we have more composition API logic in the component, then we can kind of see the benefit of it. But honestly, let's say I'm not using it everywhere, just because I don't like, yeah, it's the same as with the extension for Visual Studio Code. Just I know stuff that works pretty well for me, and I still need to change my routine, but that's a really nice cool thing. If you're just switching to Vue 3, definitely try to put it as your regular approach. Yeah, improve modularity of the TypeScript support. That's what I mentioned earlier that Vue 3 was completely rewritten, which helped the core team to improve the modularity. Certain parts of the compiler and the virtual dome and component scanning logic are now separate packages. That's why also you see in Vue repository, it is now separate packages like core, right? And the others are, let's say, bundled only in case if you need them. Like if you look here, you see there is separate parts, and they not all needed to be bundled together, and that even further decreases the footprint. So Vue was always quite in a good shape in terms of the size of the actual framework, but now it's even better. Okay? The rest are either specific or they need like a demo example to show where they shine. So I'll not go through them now, but later we can. If we have time, we can try to look at it. Okay? So I see a question. Let me see. How would you go about backing up your Atom small components by TypeScript? I know you... It's just a case of computing. I mean, how big is the change if I would be using TypeScript and I would... So how big will be the change if I want to at least use TypeScript for small components? Is that the question? Sorry, not for the main logic but just for the presentational or like Atom components. Is that the question, Peter? Or if it's a bit different just please declare. Okay. Peter, I'm not sure how TypeScript support works in Vue. Okay, I think I saw it in Angular. I think it was like this. But here it should work a bit more straightforward. No, you don't need a separate file. No, maybe what you are referring to is the type definition file. But that's... Yeah, okay. Yeah. Okay. Yeah, for the... No, you don't need to have the type definition file for your component.

What you can do, like I will just, just to give you a bit of overview for these, I will just copy a file from another project which I don't wanna share, so you can see how it's usually set up. So indeed, you may need like a shim file which will define certain types and inheritances for TypeScript for your Vue project, but that's more like a bootstrap. You don't need to add much there. And then in your components, you just use TypeScript by saying here, like, language is TypeScript, and then you have access to all the possibilities to define types and so on. Right? More like a logic part and defining interfaces and all that. We just have it like this in one of the projects. We just have a separate file called Interfaces or Globals, and there you define your, I'd say, pieces of data, the building blocks of your data flow, like JavaScript objects that will be going between layers of your application. So this will be needed if you want to use, let's say, the full power of TypeScript, but it's not necessary. Again, you may just start with any everywhere and then go for it. But I would not, let's say, try to teach you how to implement TypeScript better because that's not my, let's say, I'm not that good at it. I'm using it, but if you ask me, we need to build something quickly, then I will do it with JavaScript. That's why I'm using it down here, right? For the more long-term solution, yes, for sure. But for MVP, it's just not feasible, I think.

Okay, so create app, we have mark-up we have. So now, let's hook in some data loading library so that we can actually load some data, right? So what we're going to do, I'm going to be using Axios for this because, yeah, we could use fetch. But, what I like about Axios is that it is extendable, it gives you opportunity to configure the instance of Axios and then use it later. So, I will do yarn.addAxios. OK, installed. I will get rid of the rest.

So, how could I do that? Of course I could go for something like mounted. Let's use the simplest approach, like mounted. And I will just do axios. I think I can just copy it from the folder here. So here, oh perfect, this is already ready-made code that I can just take. This. I will use this because it will limit the results. I hope it will be faster. So I will just put it here. So we'll get the results, as you can see. It's an array of several elements. Very nice.

So what we're going to do next, let's just make sure we can put this data into a products list. So in the version two what I would do, I would create here, right? That will return element like a product list. Okay. So we have the list here. What we're going to do next, we're going to just pass it to our display component. Not forget to add properties here. So you can define properties in many ways, right, in Vue? You can start with a simple one, like data, but that's really like a shortcut, and I think it's better to do it good from the start. First of all, give it a proper name. I would say data is not really descriptive, so it could be items list, for example. And here you can describe it as a full object, saying like type is array, and you can also define like if it's required, for example, like this. So, we get our object here. What I'm gonna do, I'm gonna take the items list into these. And I think we should still see everything working. And yeah. So, I have five elements because if I now load a limit with say to, then I will have two elements. So, that part works. And next step will be to propagate it further to the actual element. So, I can display for example, oh, sorry, the name and an image, right? So, we're not having the static picture anymore. But something more fancy and like different I think. What I'm gonna do here, I'm gonna again, define a property on the product list item. Let's call it product. And it will be, let's rename this to item. Here we'll put unique, unique key, which will be not just an index but item.id. Hopefully, it's unique. And here, it will be item. Right? And then, in the product list item, I will again define props. Now, we'll do it the quick way. Sorry. And I will replace some of the elements here. Let's take the price, of course. Let's call product.product.price, of course. Then, it will be image here.

So productname.image. What did I forget? If you are following, how do I enable source attribute to be dynamic? Just a quick check, if at least somebody is not sleeping and following. Yes. Thanks, Mike. Great. Do it here. And we also add a title. Yes. Okay. Let's see what we have. Yes. Something is missing. It's not image. It is a product. Okay. So we have a real element. Good. I will get rid of this JSON because we don't need it anymore. And I will put more elements. Let's see. Five.

Okay. So this is the starting setup. Of course, it's not ideal. It's in many ways can be improved. And also we would like to move to version three. So let's do it now. Let's start from this small component. There's not much needs to be done here. Let's keep it as is. For the parent component, the same. It's basically in version three you would have the same code. Nothing to change, really. We could use actually this setup attribute here. So let's do it. We will add this setup here. We'll use a method called define props. Here I basically do the same. And for components, I think I don't have to do anything actually. Let's see. No, it doesn't have to be important. So this is how it looks with a setup. Basically, we've got rid of all this conflict part that was there. And it would, will be even more nicely looking when we will have logic in our, in our lifecycle hooks, in our data loading.

Okay. Let's see. So, what we want to do here first, we would like to use reactive objects that are provided by Vue 3. And we will change the way the mount callback is executed. And how are we going to do that? Basically, it is so in version three, we have the main change with the config API. What is happening there is we have a set up method, which contains all the logic, all the logic about the data handling and the functions and all that will now move directly to, into the set up method.

So here we will define our reactive object. In this case, it's a product list. For that, I'm using the utility called reactive, which actually creates a reactive objects in view three. Oops. And inside of it, I will put two properties, like a data for actual list and these loading flag for showing the loader bar. Okay? What's important about the set up function, you will need to return everything you want to use a template. So if you don't return, you cannot use the template, so don't forget about this. And so then this block can be gone. I think, since we already started changing, this will not work already, because, no, I think it works. Yeah. So it's, because we now have it data. Oops. Yeah. It will not work because now the property is defined in the, let's see, in Vue 3 fashion, and we are accessing it from Vue 2 fashions. Now, this block has to be changed also, so in this case, Vue has this unmounted hook that is a successor of the mounted top-level method. So now, this logic will go there, and I will remove this guy. And fetch will stay, and what I'm going to be doing here with the product data equals JSON and product is loading equals false, right? And here, I will put loading as true. Okay. And now, I can also show a loader here, for example. Let's see, now, is there no page? Umm. Country, Property, Support. Ok. So, products list, here are the finite. Here are returning. Oh, of course, this has to be gone. Because this is, let's say, the thing from the past. From version 2. Ok. Let's update it. And we will have... Country, Purpose, Fundamental, Products, list. Oh. One more place. So, I suppose that we have an object. Yes, because here it should be the data. Now we have loading. And then let's put some more elements here. Let's say 50. Then the loading will be shown for a longer time. Let's see. So, you see loading, and then the elements. Right? Ok. That's the first step. Now we will continue with actually extracting this logic further outside the component.

Ok. Then let's move on. So, as I said, we will be using Axios, because it gives us an opportunity to configure your data handling logic and reuse certain configuration patterns. So, I will create a folder here. I will call services. I will create an index file here, and catalog.js file.

What I will do then is that I will use the index file to create an instance of axios, for example I can configure such things as base URL or typical interceptors or callbacks in case for other elements. That's why I think it's better than using a fetch and copying the certain configs from there. I'm creating an instance where I'm passing the the URL of the of our API. How we're gonna be using it? I will create the.env file that will contain the the URL of our API here. I'll create the.env and this.env will contain the URL. So in our case the URL will be fake API fake store API dot com here. Right and then basically not I can extract the the URL path from from our code and it will be directly dictated by the.env file. Okay? That's first and now since I have the instance of axios like in another file I can just import it. And I will create a separate function that will be loading products. I'll take this product limit since I have URL path ending with a slash here and here is the load of load products function that I can now import here in my component and just call this one directly. Also keep in mind that we don't need the second promise handling because XSURCE is using XHR not the streaming so we don't need to collect the to the JSON.

Okay, let's see what we have now. Okay, probably has a problem with export so, this is called load products and I'm doing load products. I forgot to export the instance. All right, and loadPostM is not a function because I'm probably not returning. No, I'm actually returning this. Forgot to run it. Okay, so there's an error. That's all right. Yeah, of course, because I have not added the option to read the env file content. So for that, let me check. So the file, the file is here. I'm just not sure it's actually reading this one. What we can do, we can check here, because I'm defining it as a process.m and then in the instance I'm saying like process.m Okay, it should be there. So here's the processm and it contains a lot of stuff, but I don't see the view party, so it seems that one is not injected. What we can do, I think I was using a separate package for this. It's called dotenv-config and this one should be added to your byte-config setup here, then those elements will be directly, this package what it does it will make sure that the elements from your dotenv file will be propagated or merged into the enve object. Okay, so we'll run again... Goodbye!...installed. Okay, let's... What I am going to do first is... Commit a current change because I think there was a lock. Okay. That's that. Now, let's clear what's the problem here. So, I'm doing npm install and then this package. I think it used to work for me, before. Just a second. I'm just, the package should be just.NET. Okay, that's good. Then, if I run it. Okay, the project is running now, and, I can assure you that the data is loading also. Here we see that the data is loading. What's missing although is that, the data for products, there's something wrong with it here. Let's clear this up. First of all, I'll... I'll remove this one. And secondly, so we have items list property, except expected array dot object items list. Here will be items list. And it says,... data, but I guess, there can be one more, layer of, of properties, in the, in this, in the data that we're receiving. Let's see. Yeah. It's exactly, the data. So what I will do, I will just put it here, data dot data, don't, it's really nice, but. So now we'll have all the elements loading as they should. Right? Okay. Good. What we're going to next is to extract the data loading logic further. Mmhm. For that, I'll switch to the editor again.

So for now all the logic that is loading the list of elements, the list of products is done here. And that's, that's, sorry, that's fine for now. But if we later need to extend it and reuse it somewhere else, we cannot really do it. So what we can do, we can firstly add store, add Vuex to load the data there. And then we can reuse it across the app, right? So let's proceed with that.

First let's add Vuex. Since my initial setup of Vuex was not installed, I will install it now, I will do yarn add Vuex. Meanwhile I will get the needed parts to make sure my store will be working as soon as I'm setting up that application. So I'll have a launch app. We'll create a store folder that will contain our basic store. So it will start to install. So Vuex installation is done. I'm creating now a simple store. basic data structure, just a state for products and cards. And of course I will need to add products somehow. For that I will use mutations, so I'll just copy, paste these mutations. SetProducts that will exactly put the value into the property called Products. So let's start the app and make sure everything is working smoothly. So not really using the store yet, but we're going to do it now. So what goes next?

I'll create a... I will now use the mutation in my component, and I will remove this data from the component itself, but put it into the store. All right. So for that, first of all, we need to trigger the... to put the data when it's there. So I will use this mutation that I described in the mutation section of my store, we call set products, and set products will be actually this. Now, what I will also do, I will now not use the internal state of this component, but I will use the global state in Vuex. So for that, I will need to use a store and for that, I will use a hook that is provided by Vuex that is called exactly like this, use store. And now I can, from that store, I can retrieve the needed part using the computed method. Computed method is also one of the elements that Vue 3 brings together with the new reactivity system. So here, I will have it called, what we call, product list data in this case. This is data. Like this. So I'm calling the service to load products and then when the data is there, I'm just putting it into the store. And from the store, I'm reading it directly here. Okay, let's see what's happening in the UI. Of course, there are some errors. I forgot to define computed. Shame, really. What else? Compute,. Doing data for somewhere. I guess it's here because it's not, yeah, it was just this, on which level the property is stored. Okay, so now we can see that the data is loading the same way it was. But actually now it's using the UX Store. If I look in the Vue Dev Tools then I go to, from the inspector, which shows which components are present in the app. So here is the components tree that I can see. We have the app, navbar, home view, and then product items. And if I click here and select VueX, I will see my current store. And you can see here, we have products contains all the loaded data of the request. Actually, that's not good, because I only need the data part, not the headers and the config. Let's get rid of this.

What I should do should be data.data. So I'll do it like this. Now, I think it should contain what we need. Here. Now, products is clean, only the needed stuff, but what's missing is, I guess, here. It should be like this. Yeah, so now we have it loaded properly. That's one level to extract it. We will do another level, which will be using the hooks. So for hooks, you can... Hooks is a similar concept that was initially landed in React, sorry. And this was later adopted by Vue in its third version. So I will create a hooks folder. And I will create a hook called products. And we'll recreate some of the logic there that will manage the loading of the products. And then I will just import it in the component. So all that part with the loading and handling the reading from the store will be now in the hook and the component will be only consuming this hook. So what I'm doing here, I'm importing the store, I'm importing the load products method here. And I will create now the use products hook will be a function that inside will contain the same stuff as we had in the component. OK. So I will have those two parts the same way it was in the year. And we move it now. And I even can take this thing with me into the custom hook. And then in the same way as it was in the component, I just need to return the resulting thing, if I want. And that basically, will be it. So I just extracted the data loading and calling on-mount and updating the reactive value here into the hook. And now this hook I can just consume. Look, all that stuff can be gone now. Pretty cool, right? And I will just have this. Right, let's have a look if it works the same way. I think I forgot something. Let's see, local host services products. Something with the files... Services, ah it's called catalog, sorry. Yeah, now you can see, it's still loading and now we have all the logic in the separate hook and our component is now much cleaner. What we're going next, for example, if you want to configure the data logic, then we can do it. For example, if I don't want to load it every time on mount, but only in some cases, I can, for example, pass a parameter, that will be configuring this hook. If it's true, then I do immediate data loading, and if not true, then data loading will not happen immediately, right? So if I, for example, need to call this logic later, I can create a function here, and then I'm returning this one, as well. So if I don't want it to happen, like, this is version A, how I can use it, this is version B, how I can use it, right? So I give more flexibility in this hook. And now, in my home view, I can, first of all, configure it with immediate data loading. I will put, for example, a false. So it means the products will not be loading initially. So no request is done. No error. It's just no request. And then, since I'm also exporting the load data function, I can take it from here. I will create my own function here to start loading when I want it. Let's see. I'll put just the simple button here. And we'll call it just load data and this.

And we'll also call this function name clash, and we'll use it to load data. Call it up here. And here call it load data. And what will happen, my button on the template, in the template on this component will trigger the function that is internal to this template. And this function in turn will call the logic in the hook that our hook returns and then will work out, load the data, and then put it into the store. And in the store we subscribe to it using the computed property. And when this property gets updated, the products will also receive this update, and we will have the products. So let's see. Now we have the load data button. There was no initial request fired. And now if we click it, we should get the request and we should have the products. Okay?

We have, let's see, further extraction. And like in other components, for example, if I don't need possibility to load data when I want, I can just import the products, and I will get only the products. And I put here, for example, true, and then it means... Then I can use it like this. So this gives the flexibility how you use your hooks. Of course, you can also add more parameters to the hook, you can return more stuff from that hook, and so on and so on. That's a new way to build extendable code in Vue 3. Okay?

Folks, wanted to see if there are any questions, till the moment. Any questions? Okay. That was very good. What we are going to do, we're going to add some more logic to load data from the selected product to show the product page. Okay? For that, I will need to add a view router and create a separate page. We know we can just keep it, let's say, simple and create just, let's say, a pop-up with a product element and then take it from there. Okay? So we'll take the view that I have here, product view, and we'll need, I guess, that block to display the product. And then, when we, for example, click the element in the product list, so, I'm trying to say, we can create a separate view page using view-router and connect them like this, or we can just display a product details in the same route, in the same page, but just by displaying a certain block. So let's go for the shorter version, and I will just in my, in my store. I will create, for example, selected, selected product. The property and I will enable mutation that will just set this property. And, then, you know, where product item, I can sorry, my product list, what we can do We can add a logic to set this data. Here I will copy the new store part. And then I will say store.commit. I will copy this, and then see it will be select product, and passing it out to there. Like this. Let's see if it works for the, oh, I first need to load the data, of course. We can check it in the view of Dev tools. Select product is empty. Then I click it. The selected product is backpack. And if I click this one, it will be a different one. So, this seems to be working. What I'm going to do next is I will take the same approach as with the hook, with product's hook, to load a specific part of the store. In my home view, for example. I can just do it, for example, here in the app. So, I replace a home view with something else. Right. So, app is the same component as any other. So, it does have an ability to put a setup method. Let's just take this, uh, selected product here. Now, we'll return it.

What I'm missing, I'm missing, of course, the, the logic for connecting with the store, like a use store hook. I will edit now. And, I'm missing the compute function here. I will edit now. Let's see. So, now if I have the empty page, loading data, we see this small bracket. It's a selected product. It's empty now. When I click it, I get the details, right. And, and if I click another element, it will be another element here.

So, what I can do now, for example, show like one or the other page. Just do a simple version of view router. For example, like. I will use a template to wrap those elements. So, it's easier to read a little bit. And here it will be the, let's say the, if product ID is there. Sorry. It's not there. And then we share. So, home view. And if it's there, we just say the else.

So, let's see. So, we're loading the data, displaying the new elements. And I'm clicking it. And now it should be displaying the product view. And the product view is actually, still needs to connect to the same data. The same, sorry, the same store data. That's what I want to do now quickly. Okay, so product view I'm not sure it is displayed right now. The product view is there, but I don't see any content of it. Okay, product view. Ah, of course, because I did not put it into the components section, so it will not be fine. Yeah, good. Of course, since we now are switching to... Let's disable this initial data loading in the home view. Is it true? So we can just get items always. Now I'm displaying this, but if I want, let's say, a go back button, I can also do it. So just a little bit. We can basically meet an event here. And this event we can handle in the parent component, for example, here. And we'll call it and go back. And create a method for this one. Okay. And then the. In the store we can just replace this value with an empty one. Here we have a list of products. Here is one product. And not sure where the button is. Let me check. Product list.

It's not it. Product view. Yes. Product view. There is this button. But. I guess. Let me check. I think it's something wrong with my. Emit. Dollar. Ah, the click handler. Of course. It was pretty simple. Here. Here. Okay. So, it is called. It's good. But now, now was too, let's say too strict here. Let's put it like this. Okay. So now, we can open the specific element. And then go back to the, to the main list. That's a bit shortened version. But you get the idea. What I will do now, I will commit the current version. This will be. I will go to the mail. Any questions at this moment?

Since we have the code let's try to build it. And see how we can deploy to Netlify. So it failed to resolve specific piece. Let's quickly do it to investigate why it's missing. Maybe, we can just get rid of it. Bootstrap.main Okay. Let's forget about it. Now, we will build the project. Still missing. Maybe, maybe, maybe, it does build, but I still would love to finish them actually, because we will need it for the markup, right? Okay, now it's built properly, and if I go to the Discs folder, just run the Static Server there, then we should be having the same thing. All right, it's working, very good.

Now let's use Netlify to deploy this to a working website. Netlify. Did anybody use Netlify or using it for your hobby projects or for your daily commercial projects? Please write in the chat. So Netlify, you can deploy in many ways. One of the is basically doing it via git-commits, but the really simple one is that you can do it just by dragging and dropping the zip file. So I will select add a new site, then it will give this nice drag and drop item, then I will just do a zipping, so I'm now in the dist folder. I'll just compress and it's like a dream of a web developer 10 years ago. Just do it like this magic happens and then it's like we'll upload and unpack it for you and everything here we should, here we go here's the link and it actually works. So all the stuff was just built with white. I packaged it into the archive zip archive and then drag and drop into netlify and it works for me. So that's a pretty nice setup. Of course we still have a long way to go to create a cart and product but due to the sizing of this workshop we'll not be doing it now.

I'll be happy to answer your questions on the content. And yeah that's all I wanted to show today. I'm sending you now the link to the current repository that we've built and here's the white website that was just deployed. So if you have questions please let me know in the comments. And if not, thank you for attending. I hope you enjoyed the event. I hope you like to learn new stuff about Vue.js. Thank you. Have a good afternoon.