Let's learn VUE JS | Composition API - Script Setup, Vue Router & Pinia in 2023 (Web Developer Path)

Hello friends and welcome back to another web developer path video today we are going to learn all about VJs using composition API and script setup so we will build a full application and install View using npm so we can use view router we can use pinia for State Management and single file components and some other features so if you follow my channel in the previous video we covered options API and the essentials of UJS using CDN and we couldn't use router or pinia because we were using a CDN but with a build tool and using npm we can install and use those features quite easily so if you want to know all about options API please uh watch the other video which is linked in the description all right let's get started by installing VJs so we can open a terminal here and just let's just uh first check if we have note installed by typing note- V that will give us the version now if you don't have it you can install it from nodejs.org and the installation is quite a straightforward so in the terminal in whatever folder we want to create our application we can say npm create View at latest so if we press enter if this is the first time running this command it will prompt you to select the version to confirm the version of BJs you can just say yes to that and then for the project name we're just going to call it blog view or view blog or whichever we want we don't need typers script or jsx we do need the view router and Pia because we're going to use them we don't need unit testing or the end to endend testing we want es lint and prettier and now we are going to learn those commands so we're going to city into our blog view we're going to install all the dependencies by npmi or install there we go and uh we don't need to run this one because it will format the files which we don't need we are going to delete them anyway but what I want to do install uh run the last command npm run de this will start up the local development server so I can open it in a new browser and see what's going on here so this is a boilerplate of a View application when we install it with npm so and because we are using vew router we have two routes by default I would recommend installing this extension on your browser UJS Dev tools and I believe it is available for Chrome and Firefox I don't know about other browsers when you install it and inspect a vue.js application website you can have this view tab in your console or developer tools or whatever we call this one and this will give us a nice overview of the things of the components as you can see here as the of the comp components of a View application we have an app component which is the root of our application and every View application must have a root component and within that we have Hello World router links router view these are part of view router which I will explain later and then you can see we have a home view on the right and within that we have nested components and it goes deeper and deeper so all of these are different components and we will learn how to create our own components but watch what happened as I click on the about this home view will change and like that so you can see I just changed the component using this router view or router link rather and this is basically a component based model that view offers which allows us to build a single page application so we don't have to render the whole page every time something is changing we can just go back and forth just like that without any call to the server so basically that is a single page application where the web application doesn't call the server every single time it just gets the information needed from the server on the initial load and then the client handle all the changes which is in this case Google Chrome so let's go back to the terminal here and I'm going to break this Local Host by pressing contrl C and I'm going to open vs code by pressing by typing code space dot there we go all right so I put these side by side and I'm going to close this welcome and for now uh we we are not running the local development server anymore so this will break if we refresh there we go that's okay for now we're going to leave it like that let's talk about these folders and files just for a second we don't need to know what's going on here but some of them are quite important like this index.html file which is again the root of any website whether they are web applications what whatever they are so every website has this index.html and that is the root where the client browser is going to read it and notice we have a div with the ID of app and this is the wrapper of the view so all the view components go within this wrapper so this we can consider this one as our root and then of course the script tag where we are saying read from main.js in Source we will go through this in a second we have our package.json which lists the information about our project the version the dependencies the scripts and y y so we have this we config we don't need to touch this one but this is some configuration for our project so we can use LS for example like this one when we want to address the source folder again we don't need to touch this at all and the rest is just some configuration within the folders We have note modules again containing all the modules related to our project we don't need to touch that at all we have our public folder that everything that is public is going to go in this so like this icon on top of the title page and anything that could be public goes in here so nothing too fancy and in fact we will delete this one we will make our project as clean as possible now the source folder is the brain of our application so whatever we do it's in here and you can see that main.js also is in the source folder So within the source folder we have assets folder where all the assets like CSS icons Media or whatever we have goes in here and we can grab them from assets folder so we have a clean organized code and we have our components as the name suggest all the components go within the components folder like remember when we inspected this site let me run in PM run diff so we can have it here and let's close this one and open it again because that didn't work work go to view there we go so you can see here we have this hello world component for example and it comes from here from this component we have at div with the class of greeting and it says you've successfully created a project there it is and again this is a bit at first because we're just getting things started it could be confusing so we will delete all of this we will start from Ground Zero but to just show you these components on the screen they're all coming from this folder and they are injected into this app component which is again you can see here this app is the root so everything goes within here anyway so that's the component router is of course the view router and we're not going to touch this one at first because we will cover the basics and then we get to the router but we will clean it up uh the stores is Pia and it is for our state management we will get to this one as well later and the views of course are these main views if you will so a view think of a view as a page and a component of the children within the page so we have an about page and a home page or in this case we call it view so those are the folders and of course we have our main.js which is the root Javascript file and then our app. view which is the root component of our application now you notice we we are using the view extension and this is because we are using a build tool and this is a single file component so one of the features of ugs that gives us the ability of a single file component and that basically means we can have all the logic related to one file or one component within one document so we have a script tag we have HTML and CSS just like any website imagine every component or every view extension file is its own HTML file with all the dependencies in it for example you can see in the app view which is the root of our application we are importing this hello world from the components that we saw before which was this part right here so you can see we are importing it from that folder and we are showing it just like an HTML tag on the screen all right before we get any further let's do a cleanup okay so let's clean the house and I'm going to start with public folder and I'm going to delete that icon within the source folder I'm going to go into the assets and delete everything I will add my own CSS and within the components I'm going to delete everything too rou I'm going to keep it but inside the index.js within the router folder I'm just going to delete this about object right here I only need a homepage for now so I'm going to save this one and we will I will explain this when we get to it we are getting error that's fine because we are deleting things so stores I'm going to delete this counter JS we don't need it within the views we can delete the about view because we deleted the route within the home view we can delete this welcome because we deleted the component right so I'm going to save this one too and I'm just going to type home here so we know we are on the homepage uh within the app I'm going to delete it everything except the nav so keep that header on this div this div down here and the rest is there this import up here and all the Styles don't need it and I'm going to format the code so it looks better also this router link because it doesn't exist anymore and save so again I will explain these router links and router view because these are part of view router so we're not there yet in the main.js we can delete this main. CSS because doesn't exist anymore and I think we're good save there we go so just one link and one text on the page and nothing else oh one more thing index.html we are still using that icon up here this link let's delete that one too now we're good I'm going to close everything except that main.js so in VJs documentation if we go to creating an application here you can see that says every View application it starts by creating a new application instance with the create app function this function from View and you can see here we are importing create app from view this is the root of everything this is the root of a View application we start from here so we are importing create app and then passing this app which we are importing from this app. view so this is our root component like I said and we are importing it and adding it or passing it into this create app function because this expects a component and this is our main component you can see there's nothing special here except this router link oh so if for a second ignore these router links and router view you can see there's nothing but HTML here so that is our root and then when we pass that root into the create app we need to mount it into the Dom and the mount function on the app it will ask for a wrapper for a CSS selector so where do you want to mount it we already said we want to mount it within this div so if we put anything outside of this this is just going to be simple HTML nothing regarding view we also have create Pia and and V rou because uh we're not there yet but it's quite clear what it does create Pia it's bringing the method that Pia needs to run its logic and then we are telling our app to use these functions or these plugins and again when we get to it we will talk about these things for now we're just going to focus on The View application itself not these plugins all right I'm going to go to home View and use this home view as our playground and I'm going to close this main.js so so again I'm going to cover the essentials as much as can and then we will go a bit deeper to single file components and actually building our website in my previous video which is the options API I go in more details into the essentials and talking about all of this in more detail which is kind of simpler because we're not using a build tool so we are starting from scratch so it looks much simpler and cleaner anyway let's get started by the template syntax so the first thing we want to do actually to just show some data on the screen dynamically right now we are showing this homepage here just as a text right we want to show this as a dynamic data so I can create a variable here let's call it count and let's set it to zero all right so it says right here we are not using this count anywhere so if down here I just say count this will not change anything because again I'm hardcoding that text but if I wrap it with two curly brackets and save it you can see now I'm getting the value of that count variable and if we come down here inspect our home view this view def tools by the way I just want to say it's not as it's not the best I would say because most of the time it breaks and you have to refresh you can see it's not showing my data it should show the data down here so let's close it let's inspect it again go to view and there we go now we have our setup function that has the count to zero okay so sometimes you have to do this with view Dev tools anyway so that's basically showing Dynamic data on the screen using this mustage syntax now let's say I want to to dynamically increase this number zero by clicking on a button so let's change this main to a button so like just like that and then pass that zero or I'm sorry that count into this button and let's just say number is so this is a text and this is the dynamic data and we get the button up there so now I want to click on this one like basically saying unclick kind of thing but in view we have directives to do these things so all the directives start with V Dash and we have for example V on which lessens for a listener for an event listener and we have a callon and we can say I want to listen for a click and what's going to happen when I click on this one I want to increment that count now you notice here this count is already a dynamic data even though it's within this double codes because when we use V directives V already knows this is going to be a dynamic data it's not just to text anymore so this would not work actually so if I save it and press this button nothing is changing on the Dom but if we refresh this countdown here you can see it's actually working in the back end but it's not shown on the screen this is because this item is not reactive basically a reactive data here we can read all about it a reactive data is is an alive data if you will it will change or update on the fly as we click on it so with the script setup in order to have reactive data we need to import it from view so we can say import ref for example from view just like that and now we need to wrap this zero in a ref so we can use that ref which is a function and it accepts the initial value of this count so we want to set this count to zero so we pass that zero as an argument to this ref method now if I save this one and go to the home view now you can see see this one says ref in front of it or reactive there is another way to make reactive data which I will show you in a second so if I click on this one now you can see the number is increasing on the screen this is because of that reactivity again and if we read this page again uh in the options API in fact you can see that VJs it says VI uses JavaScript proxies to make data reactive and again we can read all about JavaScript proxies in here so let's go back here and let's change this ref to another way of making react data so ref is one common way to make reactive data and then the other one is reactive so that's just another way I'm going to copy paste this one and comment this out and change this to reactive so if I save this one and go to the home view again you can see we have count but it doesn't say anything in front of it right and if I click on this one nothing changes this is because reactive doesn't take a value just like ref this actually takes an object all the time so we need to set the value of this count to zero now right now I'm calling this one count and this one count as well this wouldn't work because this is kind of a wrapper so if I call this state for example and now I have a count within the state so in here I can just say state. count just like that and if I save this one now go to the home view now we have a reactive state which has the count in it so if I click on this one now it's working again that is the first difference between ref and reactive that ref can take the value of that variable as an argument but with reactive we actually have to pass an object where the key is the value we want to use and the value is the initial value this is the best way when you have for example a user and a user has many properties like name last name and so on so we will use reactive and ref both of them in this project now another difference between ref and and reactive is how we call them within the script so if I want to console.log this count I can just say state. count just like calling an object right state. count so if I save this one and come to the console here and refresh this one so you can see I have zero here and I can't increment it here because this is not react but we are getting what we want so if I change this to five of course I'm getting five however with ref I can't do that so let me comment this out and bring this one back so I want to get that count zero right so let's change it to five so I want to get the value of five for this count I can't just say console.log count you can see it's giving me okay sorry this is actually the error from here so I'm going to delete this one all right so refresh right now you can see it's not giving me number five it's giving me an object with all these values and all these properties uh the number thing still works because in here we don't have a problem this is the problem here so this ref doesn't give us the value of the count we need to actually reach for the value by adding the value property and you can see it's down here so if I save this one now I'm getting number five so this is again another difference between ref and reactive if you want to reach the value of a ref within the script you need to actually use the value property within the markup we don't need to do it because VJs actually unwraps these refs within the markup so we don't have to say count. value all right so that's the difference between ref and reactive and again we will use both of them in this course uh for now I'm going to keep the ref up there and let's talk about some of the view directives so VI directives are very useful to add Dynamic data to our htmls just like here we saw V on and I'm going to go back to the view documentation and go down all the way here and and look at this image basically this is a syntax that goes on an HTML element I'm going to close this terminal too don't need it so you can see we have a directive name that starts with v Dash and sometimes it can be omitted if there is a short hand and we will see the short hands in a second and then we have a call in and then the argument whatever we want to pass into sometimes it's a event listener if it's V on sometimes it's an HTML attribute if it's V bind for example and then we have modifiers so we can say for example dot something that is the modifier and prevent is the is the same thing to say for example prevent the default once for example we have that once that will run that event only one time and then on the other side of this expression of course we have a JavaScript expression so whatever is going to happen here when we click or submit or watch or whatever so if we go to event handling here we can see all the if I can find it you see we have key ls's like we can listen for enter these are the common ones and that's why they listed out here we have modifiers like stop prevent self capture and so on and all the other listeners from JavaScript so let's talk about some of them again in my previous video we go over the view directives in more depth but here I'm just going to mention the most common ones so of course we have V on and the short hand for V on because it's quite often is just an at so if we say at click it's the same thing to say V on click so another one is V bind and that will bind an attribute to a dynamic data so let's say I have a varable here says my class okay and I'm going to set it to my class so I don't have this CSS class for example but I want to bind my CSS class down here and normally I say my class just like that so I'm passing my class text up here and I can just add a style tag down here and say for example my class give it a color of blue okay so the text will be blue now this is working and it's fine let's say I want to pass this one as a dynamic data rather than just pass hardcoding it because if I change this one up here nothing changes because why would it it's not bound so we can do so by V bind and again colon so V bind binds this class to this one and you can see it's giving me error because this my class is not the right way to call it so we don't have this my class and this syntax is not correct so we need to pass that my class up there so this variable reference to this V bind as a dynamic data if I save this we still get the blue because now we are calling this one and if we inspect the element you can see it has my class my Dash class so uh this is very nice first of all V bind is quite often just like the Click or the event listener there is a short hand and that is just the colon so if I say colon class that will work the same now here remember we said we can pass any JavaScript expression for example sometimes I want to apply conditional classes so I can say for example if it is true if my condition is true apply that my class on I'm using logical and here so if this condition is true this will be applied otherwise nothing will happen so right now I'm saying true if it's true apply the my class apply this my class okay and that's why the text is blue if I change this to false of course nothing is going to be applied so this is completely ignored and you can see I have nothing on my button no class so we have other directives like V if and we show and other things which we will cover as we build our application so I don't want to waste your time and you know go over them and then use them again in the application so when we get to them while we are building our application I can explain all those directives all right so before we get into building our application I just want to mention the difference between the script setup and the setup function so vue.js offers two apis options and composition and within the composition API we have two kind two syntax one is the script setup which we are using one is the setup function and I just want to briefly show you what's the difference and how crazy it is so I'm going to cut all of this out for a second and we need to have that export default and now this is an object right this is kind of like a component and within this component we will have all sorts of data so one of them is setup this is the most important one right so these are called options and this setup function returns a value now you can see this is giving me all sorts of error because it says you cannot have this setup syntax up there if you are using setup function so I can to delete that one I can paste that code that I had before so two variables we have a ref and we have my class now this would not work down here if I save it you can see warning nothing is working because we actually need to return whatever we use in our setup function so we have to specifically return those values that we want to use so if I save this one now it's working fine but you can see before it was just two line of code now I have to use the export default I have to use the setup and later on when we have our components it becomes even more evident that this a script setup is much much easier because you have to import everything with the setup function and then you have to specifically tell the setup function that I am using these stuff and again when we get to the components I will come back here and show you an example of a script setup and the setup function let's turn this back to the way it was and I'm going to delete actually everything because I don't need it but I'm going to put the setup up here and I'm going to delete this one too and this one so we're going to start building our application and I'm going to bring some HTML CSS code here but before that because I'm using SAS in my CSS I'm going to install SAS or S CSS so we can do so by saying npm install DD SAS all righty so I can run the local server again so let me grab the markup okay so I pasted some code here which I will explain in a second but before we do that I'm going to paste some CSS for the whole application so let's create create a file within the assets folder so let's create a CSS file and I'm going to call it main.css and I'm just going to paste some code here so I have a Google font bringing in and resetting my CSS just some colors and some stuff okay so we need to save this one now within our main.js we actually have to tell the application that we are using that CSS file and we can do so just by importing it so I can say it's within the assets and I called it main.css so if I save it you can see the font is applied and let's go back to that markup that I have which again this all of this code will be available in a GitHub repo so I'm going to delete the main CSS and main.js let me explain what's happening here so I have a markup which is basically this box right here which will contain the posts which we are going to show just some text and some icons for the icons I'm using material icons which I haven't linked it yet so let's do that first we can go to Google fonts and go to the icons on the left side and choose the material icons not the symbols and if we select any icon and go to the instruction on the right hand side here this will give us that link we need so I'm going to copy this one let's go back to the project in the index.html we are going to paste this on the head in the head sorry not on the head in the head and if we save it now we get the icons and these are all really just uh CSS and HML nothing fancy here but anyway let me explain what's going on so we have a header with two buttons delete and save where the user can delete or save a post and then it says when and who posted this and then the body of the post within my style tag you can see I have few extra things added first is this Lang attribute that specifies that this style is actually SAS or I am using a pre-processor basically so you might have seen this in other languages but I'm specifying that I'm using SAS as my CSS so I can Nest these classes within each other and also we have this scoped attribute this might be new to you but uh the scoped attribute it will make this style tag scoped to this component and again this is a beauty of UJS and a single file component that everything can be wrapped within one component without the need to reach out to other components and it just makes our job a lot easier and it follows the separation of concern concept so basically again this scoped variable if we add it to our style tag it may Mak sure it will make sure this these Styles stay in this component so if we have another wrapper outside of this component with the same class this will not interfere with that one so that's just basically the style scop now within my script I also pasted an array of posts so these are just hardcoded post there's nothing fancy here and within each object which is a post I have an ID title body author so the author of the page and the created app property which is date and is it saved or not which by default is false now what I want to do I want to show these on the screen and for each post which I have four I want to show a card so let's do this so I can wrap this whole thing within a div so I can just say div and now on this wrapper I want to repeat this whole thing here we know for example to Loop over an array we would use a four in Loop or four each Loop or something like that JavaScript but uh within the template of a vue.js we have a directive called V4 and as the name suggests this is a V4 Loop or fourin Loop sorry it's a Forin Loop in JavaScript so we can say for every Post in posts just like JavaScript okay do something now what do we want to do with this post I want to change this hardcoded properties to Dynamic properties so post. author I have that one for the date I can say post. created ad and you notice I'm using the must syntax so if I save this one you can see I actually have four cards already and the names are pretty much the same I can change one of them manually and you can see now it says Sarah anyway so let's do the same thing for body and the title I'm going to select both of them and say post. title and then for this one I'm going to say body awesome done finish and you can see how easy it was so I don't have to repeat myself like a normal HTML I don't have to have four different divs that repeating the same thing over and over again so we can just Loop over them and render for each item in our array render a card now you notice I'm getting this Wiggly red red line here that says there's something wrong here now VJs always recommends to provide a key and bind it to a specific unique value in your for loops and we can do so by binding the key so we bind on the key attribute and then set it to the post ID because we know that post ID is unique for all of them so you can see that error is gone and the code is working just fine this is a good place to make a component because we are in the home View and we are hardcoding this one which is clearly as a card within the home view so kind of it doesn't belong here so we can separate this or we can extract this to its own component and I'm going to grab this one because I want to use that wrapper for something else so let's create a component within our component folder I'm going to create a new file and just call it post item. view to get the boiler plate of a view component we can say V something like V Bas so this is from that view snippet extension so if I say V Bas and I have all these options that gives me so you can see here template div script setup y y y and this one gives me a script setup so View VB 3 setup I can use it but I I normally don't use it I just hard I just type everything myself so I like script tag on the top and now within this we can bring this card I'm going to grab everything here okay so I'm going to leave the wrapper and that V4 in here so back to the item within this div I'm going to wrap everything here so now this is our wrapper so let's bring the styles to I'm just going to copy everything even though I don't need the wrapper but I'm going to copy this bring get back here replace this style tag and go up there delete the wrapper CU I don't have it anymore something wrong here because of this okay if I save this one nothing changes because we're not doing anything just yet in here I'm going to delete every style except the wrapper so all the way to here and close that Curly bracket there we go and now we actually need to import that one in here so now we are using our external component this is a good way to have an example so first of all let's bring that one in and we can just use it as an HTML kind of like HTML element so we can say post item now sometimes vs code helps us to import it automatically sometimes it doesn't so we can try it up here see if it works again sometimes it works sometimes it doesn't so if I say post item you can see it doesn't recognize it for some reason sometimes works sometimes it doesn't so import post item from now we can here use the add sign because remember in the config we said that at sign is then Alias for our source folder so we can just say at sign that means the source folder components and we called it post item. view now I can use this within my template I can say post item and close it like that or I can just use a self-closing tag like that so if I save this one we will get some errors there we go because we are trying to reach a post attribute here or a post variable or property doesn't exist here you can see that post is actually in our home component so we need to find a way to communicate from the parent to the child we need to find a way to send this post back to the child and we can do so by using props on the child component we can Define props by using the Define props method now this Define props we can pass an array into this with all the ER with all the props we want to use so I'm looking for a post so I can pass it in an array as a text now this component is expecting a prop named post this is not the ideal way but or I'm just going to show you and then show you the other way going back to the home view on the component on our custom component I'm going to close this style tag by the way it's confusing so now we can pass that post prop just like an HTML attribute so I can say post and what I'm going to bind to this one is that post up here because we are looping through that posts array and we are getting getting every item and now I can show it here and of course I need to bind it like that so if I save this one everything is back to normal and if we refresh all the errors are gone this is a good way to do it however back in the child element right now this is kind of wake we don't really say what is this post this is not really the ideal way so the best way to use props is to pass an object into the prop Define props function or method and then Define the property that you want to use post and then we can pass an object as its value and say okay the type of this one is going to be an object and then here now because we have an object in front of it as its value now we have more flexibility we can add other things we can have required as well and if we set it to true now this prop will be required so if I save this one and come down here and cut this out for a second and save it you can see we are getting an error here says missing required prop post so I'm going to past paste that back and save it we will still get the same thing without any error but now it is much cleaner much easier to understand what is this post so our child component looks awesome so let's close this style tag too and save it by the way just want to take a quick detour here uh you might know that I always use tailn I love tail win but for this kind of thing I decided to use sty TXS because using Tailwind can make our code very kind of crowded and have all these classes on the elements and it's not clean so I decided to use the normal style tag just to keep the code clean all right that's I just wanted to explain that one all righty so now here uh I want to show you something else we have an import we are bringing our custom component here and we are using it in a template and we are looping through this post variable just by declaring it up here in the script and this is all because of this setup sugar syntax or attribute so if I want to just bring back the set setup function for a second I want to kind of make things more difficult for some reason so again I want to show you how difficult and complicated it can get with the script setup so we need to again use the export default and within that we need to use the setup function and return whatever we want to return so I want to return these posts all right so I'm not going to do that actually I'm just going to create another posts and set it to an empty array for now okay so of course we need to return that post so it is available down here if I save this this will all go away because the post array right now is empty okay and that's fine now you can see I'm getting an error warning it says file to resolve the component uh of course I need to import it okay I will import it let's see import are you are you happy now VJs no it's not because it says I don't know what is post item so we need to actually say components and pass an object to it and say that post item is my component for crying out loud and you can see I'm not getting any error but I'm not getting anything here too because I don't have an object if I just paste one of this so we can have something you can see it's working the point is here only two lines with the script setup but with a setup function all of this which is just an again this is a very simple example imagine you have so much code and so much functionality it can get really confusing I really don't like it so I I strongly recommend if you are using a build tool use the script setup or stick with option API and options API is much cleaner than setup function so I'm going to close I'm going to delete that one and bring this back everything back to normal so you notice that I kept this wrapper here because I want to use it somewhere else now this could be a good example for us to extract this wrapper into our own function where we can practice with slots so let's do it I'm going to create another component here and I'm going to call it my rapper. view and this is actually going to be quite easy so I'm going to use that vbase setup I don't need the script tag because this will not have any functionality this is just a wrapper so I'm going to grab this style tag all of it don't need it here paste it here in the my wrapper component and then this div with the class of my wrapper I'm actually going to just cut that one delete this one and back into my wrapper and I'm going to replace that div with that one and I'm going to close that one all right so you can see the code is somewhat broken or rather the Styles and now we're going to use this wrapper or my wrapper component within the home View so we already know how to do it we can just copy paste this one so I can do this and just say my wrapper and let's see if we can wrap this one my wrapper and close it now I need to close it this way because I want to wrap something within it so if we save this one of course we're not going to see anything and we're not getting any error because what we are doing is rendering this my wrapper and there's nothing within it if we do something here you can see it's working and we are looping through it because this is a for Loop but this is not what we want we want to have a special placeholder here so anything we add within my wrapper it's going to go within inside this my wrapper pretty much like what we are doing on the root of our element of our application we are saying that this is our special wrapper and we need a placeholder here that everything goes in here so we can do so by using a special HTML tag that looks like an HTML tag at least and that is a slot just like that and then close it like an HTML tag so now if I save this one you can see I'm getting all of the things that I want all of the cards that I actually have in here because now I'm saying that this should expect something that goes within it this is called a default slot now we also have something else that is called named slot and that could be done almost the same way so for example uh let's say I have a div here just as an example and I'm going to apply a style with the background ground of let's say Aqua okay so I just want to show you something that's why I'm applying that one in line and here I want to have a slot again now I can provide a name here uh so a name attribute and say this is going to be a header now let's save this one again we will not see anything because we're not using it now within my wrapper because this is within it's a child slot within this wrapper I can create a template we need to use the template tag we need to use this one and then I can uh pack whatever I want to do so I want to say header for example so this is the text but it's not working still right because we're not saying what is this template is and for this we can use another view directive and that is v slot and pass the name of our named slot which we called it header so we can pass it here this doesn't take any value so we can't do this okay this doesn't take any value it's so it just vlot colon the name if I save this one now I'm getting that header on the card now because this is quite common we have a short hand or shortcut for this one and that is a pound sign so if I say pound header still works same thing so this is basically how we can have named slots if you have a component and multiple slots in it you can name them and you can address them in your template just like this fantastic let's close let's delete this one we don't need it let's go here and delete that one too and we are good with the my wrapper component so far we're doing great we already we are already rendering the PO with a V4 and everything goes great what I want to do next is actually address the navigation Styles first and then actually go into the view router so we have we can have another link another page where we can create a post all right so let's go to the app. view which is the root component and the navigation is sitting there and I'm going to paste some Styles here first again nothing fancy it's just the scoped style tag that is applying some CSS classes to this router link and actually to any element with the class of nav link so targeting the nav itself to give it a background and some padding and then the nav link if I save it you can see it's up there so if I close this one now I want to add another page so I want to have a create post page let's talk about view router so let's go to main.js First and remember after we created our app we are using router we are importing router from this index.js which we will go in it in a second and then we are telling our app down here to use this router as a plugin as a function as whatever we want to call it but we are telling the app to use the router okay so let's go to this router and see what this is now you can see we are importing just like The View application itself we are importing the create router method and create web history methods from view router which is a dependency of our application we are also importing the home view because we are passing it as a component for a route we we get to this in a second down here we are creating a variable called router and we are setting the value to this create router which is a method and expects an object where we can add our options you know the options that we want to pass to the router and one of them is the history so this will handle how the history will work you know between the pages so nothing too fancy here and we don't need to really dig deeper this is just keeps track of the history of the pages how we are navigating between Pages like if I go here you can see and if I press back it keeps that history so it knows where I'm going and then of course we have the routes option this is the options that we are interested in and we can Define our routes in here so what I want to do actually I want to have another route that goes to for example create post or post create whatever and then have a name and and a component so you can see here these are text right so we can but we need a component for it we need another component to tell router this is our next page and go to that so we will do that in a second but you can see after doing all of the this so creating a router and telling where are the route we are exporting that router and in our main.js we are importing it all right let's go back to uh index.js let's stay here and first thing I'm going to create a view in the views folder so let's create a file let's call it post create. View and for now I'm just going to copy I'm just going to use the vbase thing vbase setup so this one I'm just going to add the script on top a new post let's add a text create new post and leave it at that for now let's go to our router index.js file and we can copy this object down here okay so you can see every object is is an individual route and we want to have another route so the path to that route which is the URL up here right we want to say this is going to be post-c create the name is going to be the same post-c create and the component for this one is going to be that post create we just created but we don't have it right now so let's import it going to say import post create from for crying out loud this today vs code is not my friend so I'm going to do this and we can change these to an add sign not that it will change anything but it's just cleaner so now I can use that post create down here so if I save this one nothing will happen because we still need to add it to our navigation so back in the app. view you see we have these router links and router view these are special elements from view router and you can see we are importing it so these are components if you will I should say component that's better these are components in vew R just like our custom components here so vew rat they have their own components and they are importing it up here and we are using it in the markup so a r link is basically an anchor tag that is just more powerful so we have a two attribute which is required and that takes the URL where do we want to go and this two attribute is the same as this path attribute here or Path property so I'm I'm going to copy this path here and go back to the app. view and copy paste that one and change this one to that post. create and the class is the same but the text we can add whatever we want this is just a text so I going to say new post there we go we have it up there and if you click on it it goes to that page and it doesn't work because let's see what where did I make a mistake post post post home no post create sorry about that so I made a mistake up there it should be post create and if I save this one and now we are in post cre create page now that is out of the way let's go back to the app. view and keep talking about these things so R link again is an anchor tag that is just boosted up and it has a two attribute which is required and in fact we can click on it and go to the router link here so this is VI we don't really this is kind of confusing we don't really know we don't really need to know what's going on here but this is all the code behind the scenes and how router is handling all these requests but at the bottom we have this router view basically whatever goes in here this router view handles it down here so this is again like a wrapper just like the div that we have in the root just like this my wrapper and it has a slot right so imagine this is a slot that view router is using and rendering whatever page we are telling it to go so if I move this view router inside the nav which is kind of silly you see what happens everything goes within the nav so again this is a wrapper that can go anywhere and wherever we put this view router that page or that view which we are defining them here this view will appear there so again and think of this as the wrapper of view router components or okay so that's it we have our new post page now we just want to create the boiler plate and we want to create the markup for a form so I'm going to close everything except post create and I'm going to paste some code again all righty as you can see I have a d which is the wrapper again now I'm actually using the wrapper but I'm not using my wrapper because we're going to import that just in a second so we will delete this one and we will import our custom component and then just again just Styles and there's nothing fancy here but I have some Styles and just for the button if it's disabled should be for example this color and the mouse should be this allowed and so on all right the first step I want to bring in my wrapper so I can say import my wrapper now it's helping me for some reason I don't know how this one works but vs code sometimes doesn't help so I want to say my wrapper and I want to close this one down here just like that format it it's still the same because this is exactly the same as there and actually I can delete this wrapper here because I don't use it anymore like that and I need to go down and delete one of these curly brackets and you can see actually by using components we are eliminating the repetition of coding all right so we need to get the data out of the form and show it and do do something with it right so we need a post variable if you will with two properties so I'm going to create an object so I'm going to say const post equals to title at first I'm going to set it to my title and then we will have a body and I will set it to an empty string at first and using this my title because I want to show you some examples so we can see what's going on so of course we already know how to show this my title in the post value what happened here okay guys sorry I I noticed that my rapper actually when we are using this wrapper it doesn't have a padding automatically so I add it to the form down here because on the home view we don't have a padding on the wrapper itself because of this heading thing uh I forgot about that that's nothing special again that was part of CSS all right back to the new post we already know how to get this title in this input field and we can just set the value of this input field and bind it to that title so I can say post. title and of course I'm going to see my title in the form right there so now the the problem is we want to get this out of the input field into our application so V bind is a one-way thing from application to the markup now now we want to go the other way around so what we can do here we can listen for an input so with a v on or add sign and then set the value of it to a again JavaScript expression so we want to lessen for the event and this is a callback function and lessen for the event Target value which is basically the value of this input field right this is again in JavaScript and we want to set this value to the same post. tile so as we are typing the value sorry I forgot the equal sign so as we are typing into this input field we are setting the post title value to whatever we are typing so if I save this one and above the form I'm just going to add a mustage syntax show that post title so we know it's working it's up there so if I type here it doesn't change because again this needs to be reactive that's another thing I wanted to mention so we need to make this reactive of course now in this time instead of ref I'm going to import reactive from view just like that and now we are going to wrap this object within a reactive object now it should work so if I type in here you can see it's updated up there because we are setting the value to the Posta title which is a reactive property or data and we are listening for that input change and of course we are putting it up there this is working fine and we can use it in our application but because again this is so common vue.js has a very nice directive for this and that is a v model so V model is used on input Fields if we want to have a two-way connection so not only from the application to the markup but from the markup to the application too and we can pass to the value that the whatever property we want to bind or have a two-way bind so I want to use the post title as the V model and if I I save this and refresh and you can see it still works the same way all right so we're going to do the same thing on the input field I'm sorry on the text area so this one needs to be bound to the body and I'm going to set this to an empty string okay and I'm going to delete this one so right now we are listening for these two inputs and we are saving them in this title and body so the next thing I want to do I want to keep the button disabled if the form is invalid and that means if there is nothing in these two Fields this button should be disabled and for that we can use computed properties in the options API we can use computed properties just like adding a function but here with composition API we we again need to import computed from view now we can create a computed property just like a normal function so I'm going to call it is form invalid and set it to a computed property computed method takes a callback function which is our getter you can see here it says getter so and we're going to pass a function here and we want to return something so that is the key so these these Getters they return something for us we want to say if post. title is empty string or post. body is an mty string then return the evaluation of this expression so whether it's false or true so we're going to save this one and now we need to use this on the button so we want to keep this button disabled like this if the form is invalid and when we type in here this should become enabled so we can bind this one to that is form invalid so we can pass sorry is form invalid into this disabled which is bound to our application now with view bind and if it is true then the disabled will be true therefore the form is disabled if it is false then this doesn't exist so let's do that and let's refresh the form is empty button is disabled and if I type here button becomes enabled if we inspect this button down here you can see it says button data V these are these are just a special view attributes so if I delete this ASD here you can see the disabled just added and if I type again the disabled is gone perfect so VJs makes things so much easier now we actually need to listen for the submit form here and do something with this data so what I'm going to do here I'm going to say submit so because I want to lesson for submit and we need to prevent that default right we don't want to actually send this anywhere because that will be a full refresh so let me just submit this without any thing here if I press submit you can see the page reloads that's not what we want we want to listen for submit and prevent the default and uh let's do something let's make our own submit method here so just like any method we can just add submit and set it to an arrow function let's just console.log that post. tile and post. body so let's just console.log these ones as we submit the form so uh let me open the console again so if we add something here and add you can see both of them are in here all right so what we essentially want to do is to send this data back to this array somehow now the problem is we are not calling this post create anywhere within our home view where this array is and this is where Pia comes in you can see already if we don't use Pia we are in a kind of a pickle here so the array is somewhere outside so the array of post is let's say it's on the database so how can communicate with this one when the post create form is on another page and there is no communication with this page or this view we could bring this one to the app and then communicate with the app because that is the root then we need to call this component here somewhere so it's already becoming so much so confusing but we're going to use Pineo and we're going to see how easy it gets to use Pia but before we do that I want to show you how actually we can communicate from a child component for example this post item to a parent component which is our home view here so for the time being I'm just going to close post that create and I'm going to leave it as it is we will edit this later we're just going to take a quick detour and see how we can communicate from a child component to the parent component so we already know the parent communicate with the child through props okay so we sent some data from the pattern to the child through props now we need to listen for some communication that the child wants to make so let's go to the Post item this is just a demonstration to show you how we can communicate with a parent so on the post item I want to create a button here so right on top and say click and I want to send the post ID of this post that we are expecting as the prop so every post I want to send the post ID back to the parent so I want to send some data and some data is in post in order to communicate with the parent we need to use a special method called Emit and emit method is just basically creating our own custom event listeners and within the script setup we can do Define emits which is a method and takes an array of all the emits or all the custom event listar we want to create it could be one it could be 10 so I want to create an event and call it get ID for example and now this one returns a function so I'm going to save it inside an emit variable now down here I can create my own custom function I can say for example get ID and set it to an arrow function this get ID is going to execute this emit function so I can pass it down here and pass the name that I used up here so the same thing because if I have multiple emits this emit need to know which one we want to fire up when we execute this method now when I click on this button I want to execute that get ID alongside the name we can pass variables to the parent this is kind of silly because what's the point of emitting something if there's nothing going up to the parent right so what I want to do actually I want to accept a parameter in my function and then send that parameter alongside with this custom event lessener so this ID now within this function right here because I have access to that post it's the prop you can see I can easily access it anywhere I can also say post. ID and send it back up so right now I am sending the post ID back to the parent using this custom emit event or event listener that I called get ID let's see how we can call it from the parent so let's go to the home View and on the post item which is the child which is emitting that event we want to lessen for that custom event which we called get ID so I can use at or V on and say get ID because this is our custom event listener and we want to do something something here now we are expecting an ID so I can pass a call back function here or Anonymous function and using Arrow function I can just say console.log for example that ID for me now remember this get ID has a parameter and therefore I'm expecting it in my arrow function all right I hope it makes sense so if I save this one and refresh the page you can see I have to click on every element and if I click on them I'm getting the ID of that element 1 2 3 4 and if we Ed you can see in fact the ID is 1 2 3 4 that is how we communicate from a child element to the parent by defining our custom event listeners or emits and then calling those emits on whichever element we want to call it and then alongside with those emits we can send data I can send the post I can send you know whatever value we are getting here so on our form for example if we were calling it here on the home View view then just like this we could have a custom event listener we could have an emit where we would send the form data to the parent so we could listen to it but again the problem is we are not using it because this is on a completely different page let's introduce pinea which makes our job super duper easy let's delete all of this we don't need that and put this back to normal and delete this button delete all these emit events and keep things simple so we are back to normal so you can see Pia is a store like library for View and it allows you to share a state across components and Pages now we already installed uh Pineo when we installed our application and we can create a Pia application using the create Pia from Pia library and that's why just like View and we are bringing that method in and we are just executing it it doesn't expect it doesn't accept anything at this point we are just telling our app use the Pia and we are executing it that's it that's all about pinia now we need to create our store so pinia uses these files called stores where we can save our data so I'm going to create a file here call it posts. JS so it's a Javascript file and the name is usually the convention is that the name of our file is the name of our store so this is a post store because it's in the folder so let's go back to the introduction here you can see that if you want to define a store we can just use this okay so I'm going to copy all of this and I will explain and paste it here delete these comments so we can define a store or a Pia store using a defined store function from Pia and that defined store Returns the function where we can use in our components and View and Views and we will do so later on now this defin store the first argument is the name this should be unique among all the stores so for example if we have a post store we can just call it posts like that store and the this name for the variable we are creating the convention is to say use and then the name of our store is posts and then the word store so this is the convention how we name our stores so use posts store and it kind of like react if you will so use State use that use this so this is how we can define a store and of course we are exporting it therefore we can call it from view components okay so Define a store takes an object as its second argument where we can Define our options and the first one is the state think of this one as the data options in options API and then we will return something from this one so this will accept a function and this function would return an object and here we can Define our properties we want to use so I want to have an array of posts all right so this is one way and I prefer this way it is much much cleaner or easier to understand but we can also use an arrow function so I can say State colon and then pass in an arrow function and remove all of this curly brackets and this return keyboard and then wrap this in a parentheses and curly brackets so it would look like this so this is the same thing and we are returning this post and I can add other properties if I want to either way works best for you I'm going to keep it as that return statement because it reminds me of the data options in options API so I'm going to make comments here and say this state is our data so we have our data function now I'm going to bring the posts from this post array here so I'm going to cut this out so we don't have it here anymore and this will break our application and I'm going to add it here so I need to change things around a bit we cannot use the const keyword anymore and we cannot use this equal sign we need to use the Coline and things look okay okay so let's reformat it and now we have our post array sitting here all righty so let's see how we can actually use this store within our view so first of course we need to import it so I'm going to say import we called it use post posts store from stores so so we import our use post store and now remember I said this will return the function so I can save it into another post store variable and then use the poster store and just execute it let's console.log and see what does one what does this post store give us let's save it okay sorry I made a mistake here again I forgot that thing here now if we go down here this object gives us bunch of stuff that we don't actually need what we need is our post array so if I just say post store. poost and save it again this will actually give me that proxy with four items that's what I want so instead of using posts here which it doesn't exist I can either save this into a post variable so if I just say const posts equals to posts store posts okay so this would work but I could also just use this one down here so I don't need to declare this one up here so this is I would say this is much cleaner because it's just one time I'm calling it and there's nothing else if there was more functionality to it if I wanted to do other things to it I would call it up here now you can see how easier it is uh just two line of code but my logic my data is stored somewhere else now again imagine this is just a simple example we are going to have other functions other methods and computers properties and so on and as we develop our store or our state manager we can see how easier it gets to work with it and again this follows the concept of separation of concerns and we have a post store or JS file that is containing all the logic for our post so now within our post create we can actually send data to our post array but the right way is to actually have methods so on our posts store we are going to create some methods so we can accept and add to this array so right under the state because again we can have other options I'm going to make another comment and called Methods and this will be our methods so we can Define methods by using actions options and this actions options takes an object and we can Define all our methods in here you can see this is getting pretty much like an options API so we have methods and we have data which is our state so I'm going to create a method here and say add post and this post this add post method will take a post object and it will add it to this array so to access this post array here because it's in a different block we need to use the dis keyword so we can access this post so we want to say this. posts. push so this is going to be an object that we want to push to this array of objects so we we have some properties here the first one is the ID and to have a unique ID we can just take this posts array and get the length and just add to it so if it's four it's going to be five six and so on so that would be our ID and for the title we are actually getting the title from the form so we can say post. title so this post will come from the for tile title sorry for the body we should have post. body from the form so for the author for now I'm just going to hardcode something so for example andd Tim I don't know so just a random name we have another property called created ad and for this I'm going to use a new date JavaScript date and I'm going to just chain to local data string so we will have a date like this and the last one is saved property which by default is going to be false and that's it so every time we click on the form button we want to execute this function so let's go to our post create and I'm going to close the home view for a second so we want to call this method which is in our post store so we need to import our post store so let's import use post stores from stores just like in home view I'm going to create a post store variable here and save that use post store it is a function and it returns this post store for me now from this posted store I want to call this method add post and I want to do it whenever the form is submitted so on my submit function I can type post store. add method sorry add post add method and and we said this add post should accept a post object with the title and the body and we already have this post up here so all I can do I can just pass it down here and let's see if this works so I'm going to give it a refresh and let's say new post and add some stuff here and press add so this is already worked and we need to actually clean this after adding it so let's go to homepage and there we go new post is added and again you can see how easy it was because we are using Pia as our state management and this is sending the data back to that post store and the post store can be called from anywhere so let's clean up things a bit first of all we need to clean the form after we submit the form so we can either do that or a better way we can actually redirect the the user back to the homepage I think that's a better way so we don't even have to clean it because they will be redirected to the homepage and if they come back to the new post this will be cleaned so what we can do we can use the router here if we go to the documentation vouter has this function called push where we can redirect the user to a certain Prout so first of all let's import it up here and I'm going to change this so I'm going to keep those organized I'm going to say import use router from view router and this use router just like the store we need to actually Define it down here and save it in a variable so we're going to say const router equals to use router and execute that one so this will give us the router object we need so within the submit form after we add the post we want to call that router and redirect the user now this push method takes an object with key value Pairs and we can pass the path to that route we can pass the name or whatever you want so I'm going to use the name and I know I called that route if we inspect it in the router we called our homepage home so that's the name of it so I want to redirect the user to a route that is called home so if I save this one and go back and give it a refresh here add a new post new post and somebody here so I'm going to add like this and add NVR back to the homepage and the post is down here all right fantastic the post create method is working just fine now let's go back to the post store what we want to do now we actually want to show these posts sorted by date because in every block the newest posts should go at the top now we already defined this method which is fine so we need a computed property so I'm going to make a comment here and say computed and in pinia computed properties are defined using Getters this is the same as computed property in options API or the setup function so again I'm making these comments to make this kind of similar to VJs now gets or computed properties are a way to return something based on a computation so we want to sort this array and send it back so let's call it sort it for example and again there are two ways to uh apply these ones so I'm going to use the easy one first so it's a function just like creating a function down here with actions now this sort it would return something what do we want to return we want to return this. poost do sort so we want to sort that this is Javascript sort function and this sort takes a call back function and takes two parameters so I'm going to call it a and b so these are the parameters that it's going to compare with each other now to compare the date we need to actually create a new date first and then pass that value that we want to compare so in this case I want to take the B the second value and take the created at so these are objects within our array right so this B whatever we want to call it and set it to minus new date set it to a. created that so to compare the dates and sort an array based on the date from newest to oldest we need to do this all right so if I save this one nothing's going to change because I haven't called this one yet okay so I'm going to save this one and back in the home view we are saying get the post directly from the data from the states now we actually want to get the sorted and this is a getter or this is computed so we can just come here and say sort it and if I save it and refresh we will get what we want and you can see now it is sorted by the date so if we create a new page here new post and press add we are directed back to the homepage and this is my latest post there's another way to create our Getters and that is using an arrow function so I'm going to comment this out for a second and create oops and create another sorted and use the colon so this is an object right so we want to use the sorted at as the property and the value is going to be an arrow function now when we use this one the Getters have access to the state so this function can take the state as its first parameter so this state is basically this so we don't need to use the disc keyboard anymore so because this is an arrow function we cannot use the disc keyboard right so here we can say state do all of this so the same thing goes here but you can see we are using the state as a parameter so we cannot use the dis keyboard and the rest is the same if I save this one and refresh we are still getting the same thing and if I make a post it still goes up there so whichever works best for you and again I prefer this way it's just much cleaner to me and but if you like to use the state this is uh aspia documentation says this is for encouraging the users to use the arrow function But whichever works for you best so I'm going to use this one now the next step is to implement these two buttons and we want to give the ability to the user to delete a post and also save a post and then filter those posts and give him a some sort of a filter up here that says all posts or save post and something like that so let's start with the delete which is easier so in the actions right after our Outpost post I'm going to create another method or action it's call it delete post so we need to delete a post so we need to accept an ID for a post which is unique for every post so all we want to do here is says this. posts and set it equal to so we are reassigning this post array and want to filter that particular post with this ID so we can use this. post again and filter it okay using the filter function which will take a call back function let's call it P for post and what do we want to filter so we want to bring back a list where the post ID the post ID within the array right here is not the same as this ID okay because we want to keep everything except this one that's what we are returning and that's it so let's save this and now we have to actually attach this to somewh and again this is the beauty of Pia so back in home view we can see this post item is our child component where the buttons are actually in there but if we were not using the pinea we had to reach out to home view or other components just to you know delete a post and by emitting an event but because we are using Pia it is super duper easy all we have to do just import our Pia just copy these two lines and in our child component above the defined props I'm just going to paste that and now on the delete icon I'm just going to add the event listener so I'm going to say at click what's going to happen when we click we want to call the post the store and call the delete post which takes an ID and we already have access to the post I can just say post. ID how much simpler is that that's it done finish so if I save this come here and it says this is a great book let's delete it it's not a great book anymore it's gone and of course we're not saving this state anywhere at this moment uh so if I refresh this will come back but we know the function ality of deleting is work so let's create a post here add and it's right there now I don't want it let's delete it gone as simple as that and again if you have worked with VJs before and you didn't use stores or P off for State Management you know what's the difference and you would understand like what a pain it is to communicate between components just to do a simple job like deleting a post like that all right we want to do the same thing with the saved posts so back to the posts store now we want to add another method let's call it save post and again this one will take an ID because we want to save a specific post first we want to find that post with that particular ID so let's grab this post array and find using the find method which takes a call back function let's call it P again and we want to find the post that has the same ID as the ID we are passing into it so this would be our unique post where we want to save it and and then we just want to grab the post is saved property and set it to the opposite so post do is saved so whenever we click on this is saved if it is saved it will be unsaved if it is unsaved it will be saved let's save it now again we need to attach it to this bookmark thingy right here on the post item child so I'm going to copy this because we already imported post the store we don't need to do it again of course just going to copy this one and add it here and instead of delet post I'm just going to say save post as easy as that so right now none of them are saved but if I click on one of these should save it but there is no visual indication that I'm saving the post so I'm going to bring up view Dev tools so we can inspect one of these posts for example why do I go there sorry and let's uh start with the first one okay right here and if I can get the data somewhere so you can see here within each rapper we have a post item and it says it is saved equal to false so let's click on this one and and refresh this one you can see it's true now so it is working so we just have to add the visual indication to it and we can do that by using an expression down here so this this is again coming from Material icons and there is another icon that is just called bookmark that is if I change this one to bookmark you can see it is a filled bookmark so it's not just a border now this I want it to be conditional so I can pass an expression here using the mustage syntax and I want to check if post do is saved is true so it's a eternity operator if it's true then just give me the bookmark icon otherwise give me the bookmark border so if I save this one and refresh the page again because we are not keeping the state everything is unsaved right I can click on these icons here and now it is saved and this one it is saved to make sure it is working and it's not just the visual thing we can check these post items you can see this is true which one is this one the first one this is the second one you can see the second one is also true so it is working and everything is just super easy bit Pia so we are saving these posts and unsaving it save unsave save unsave all right now on the home view I want to add a a kind of a banner up here that gives the ability to the user to filter between posts that are saved or all the posts all right so let me grab some HTML again okay so I have a header here you can see I pasted with some styles that are just again CSS and I have a class self header which is addressed down here with some background and some div what's going on inside it and there's nothing here at the moment I have an H1 H3 on the left that says all post and a button on the right that when I click on it it should gives me the saved posts so we need to tr keep track of either if it is all post or saved post so I'm going to create a a variable here call it post filter and set it to a ref so again remember ref is used for making reactive data and I can use this one to bring ref add it up top so above the components usually the important ones go up top and then components at the bottom I want to set it to all so by default this post filter would be all that means showing all the posts and when I click on this one I want to change that post filter so I can create another function say set post filter and set it to an arrow function now when I click on this button up here this blue button I want to set the value of that post filter to something else now remember because we are using ref we cannot just say post filter we need to say post filter. value set it to for example something else so I'm going to say saved now this is a one one time thing but I will change that in a second I want to say when I click on this button call the set post filter to show this post filter instead of this all posts I'm just going to use that post filter so we can see it on the screen so right now it says all if I click on this one it says saved now if I click again nothing's happening so instead of this one here I want to pass etary operator I want to say if the post filter value is something then do that so I'm going to copy this one set the post value to something else so we want to check if post filter value is all then set it to saved otherwise set it back to all okay so let's save this one and refresh and if you click on this one it's saved and again it's all now same thing needs to go for the text right now it says all posts for example we need to say show Saved post but when it is saved it says show all posts so down here again where we are rendering the text I can wrap it in a must syntax and repeat this here so I'm going to repeat the first part and just say if the post filter value is all then set the value or the text to show save the posts otherwise say show all posts if refresh again show all posts well this is not working oh we don't need to address the value here sorry my bad save let's do it again show Saved post show all posts great same thing needs to go for this title here so I'm just going to copy paste this one this is kind of repetition but it's fine for this case so we want to say just say saved post not show so we want to just take out the word show so this needs to say all posts this needs to say saved post so the other way around so right now we are seeing all posts we need to see the save posts so we are seeing the save post all post again now we actually have to apply the filter down here and we will do it in a second now you can you notice I'm repeating this one over and over again so we could have a computed property for this one but for now we are I'm going to leave it as it is because we already know how to make computed properties okay so I'm just going to leave it as it is and I'm going to close this header just like that so we can see better now down here instead of just looping through the sorted array I want to have another array which is called saved so back in our post. JS so in our store uh right under the Getters we have the sorted I want to make another computer called saved and for this one I'm going to use the other syntax just to for practice so I want to say I want to grab the state and then say state. posts sorry and I want to filter this array based on a post save so take the post and make sure it if the post is saved is true then return that array now we need to sort this one just like this one so we can copy this sort and chain it down here so this is also sorted and saved okay so let's save this one and now in the home view we are looping through the sorted array or filter now we want to make a similar V4 down here and loop over the saved array which is our computed property so this nothing here changes except this value here right so if if we save it and give it a refresh we should see both of them because we are not hiding any of them at this point so if I save this great book you can see it's added down here because it's being rendered here too so if we say view JS versus react and save it you can see it comes down here unsave it goes back up doesn't exist anymore so it's just one now we just want to show these conditionally we just we don't want to show them both at the same time so we can wrap both of them in a V if so this is another directive that we mentioning it for the first time in this course if you want to know more about it in the previous video I talk about these directives in more depth so we want to say we if which is quite self-explanatory it will render an element all its children based on a condition and I want to check if the post filter is all if the post filter is all then show the all show all the posts and I'm going to copy this one add it here and say if it is saved so we need to close that one we are saying if the post filter is all then show all the posts if the post filter is saved then of course show the saved posts so let's do that so right now if we refresh nothing is saved we have four posts let me make this small so we can see them all at once so I'm going to save this great book now it is saved of course but there is nothing down here so it's not adding we're not duplicating it but if we go to show Saved post we see only that one and it says saved posts now we want to see all the posts we go back we want to save this video games thing and go back there I have both of them now I want to unsave this great book and of course it's out of here and back to the all post great this works as we want and with that we are actually done with the application the last thing that is left is to act to maintain the state of our post and save it into an external file and for that we're going to use Json server so so far everything works great and we are able to delete a post save a post or unsave it filter the post create a new post even and redirect the user back to the homepage and so on and all of this is great but when we refresh the page it is back to its normal State now we want to actually keep this state so we can kind of show how we can communicate with the database which is actually quite easy and it's part of JavaScript so but let's do it you need to have Json server installed so I'm going to break this one for a moment well actually I'm just going to create another terminal down here and you need to install Json server so you can install Json server by this command install npm install Json server I already have it installed so I can just run it after I created my file so I'm going to create a DB file in the root directory we can close all these folders in the root directory I can create a db. Json so this is our this is going to be our fake database and from the post I'm going to grab everything so I'm going to cut this for a moment in the db. Json I'm going to paste it this is of course wrong because Json doesn't work like this we need to wrap this in the curly brackets first and if we reformat it vs code should do the trick for us should wrap everything in double quotations so this is our entry point this is our datab base so we have a Json file a posts that has a value of post which is an array of our object so I'm going to save this one and leave it open for now in the post. JS we still need to create that post and set it to an empty array okay so we will not get an error down there all right if we refresh our page now everything is gone but we we're not getting any error so everything is gone now and because our array is empty now we need to access this db. Json through a fetch so using a fetch API but we need to run our Json server and we can do so by saying npx Json server and I'm using npx because I'm on a Powershell it wouldn't recognize Json server so npx station server and we called it db. Json and I don't need to say for example go to a folder because it's in the root directory I also want to use the watch flag so I want to watch it and then later on we will apply a delay so we can see the delay okay so let's watch it for now and this will give us an end point to Local Host 3,000 and in fact if we just open this in a browser we can see our items so now we want to fetch the data from this endpoint I'm just going to copy this one in our method where we are adding and deleting and saving I'm going to create another method called get posts and that is just the convention of how things work we want to get the post from this external server so again this is our API now we need to grab the data and I'm going to use fetch I'm not going to use async and a wait just like Fetch with Den better so I'm going to fetch this from that endpoint and then say then this is again simple fetch API ra. Json all right that's a function that returns another promise now in this promise I'm going to say Gra WRA the data and add it to my post array so set the post this. post array to the data so now we need to call this somewhere so the best place to call this get post it would be in our root component because this is the first thing that gets mounted to the dump and we don't want to call it every time we go to the homepage let's let's call it from the homepage see what happens okay so down here we already have the poster store I'm just going to say post store.get posts and execute it okay so if you give it a refresh you can see it's working but the problem here is every time I go to the new post and back to the homepage this method is being called and to show you back in the post right after this fetch I'm just going to console.log called so refresh you can see we get called let's go to the new page and come back to home we get called again so every time we're switching because it's on the homepage it's getting called that's not what we want we want to call this one time initially in our app component so what I'm I'm going to do I'm going to use the poster store so I'm going to copy this one this import back to the view and use this one too use post store add it here and also call the function now I'm going to cut this one out of here and paste it here now there's nothing wrong with calling this post to store from different components that is the point of Pia to be able to call it from different places so that's why we are calling it from App View and it just makes our job super easy now if we refresh we still get our data and if we go back between back and forth between the pages nothing is being called all right so let me I deleted that one anyway but you know it's not getting called I'm going to do it again so called so first refresh it's getting called now we're switching between pages but there is no call anymore so this is the first step we are fetching the data but if we still delete things and refresh we get those backs because now these other methods are just on the front end we need to communicate with the back end and add this to our Json file but before that let's add a loading thing right here next to the post so so in the header I just added this span tag with a class of material icons and the text is cached which gives me that one now this is being animated because I have this style down here so you can see key frame spin yada yada yada there's nothing again fancy this is just CSS I want to show and hide this based on the condition of getting the data so let's go back to the Post store and I'm going to create two other variables let's do it one by one I'm going to have a loading property and I'm going to set it to True at first so the loading would be true so when we are fetching the data the loading is true already so we need to we don't need to turn it on we have to turn it off so down here where I'm saying set the data to my post array I'm going to wrap it with curly brackets and delete those parentheses and just say this. loading set it to false okay so reformat the code it looks like this so let's go back to the home View and we know we have access to this loading now because it's in our Pia State Management so on this span I can say V show now V show is another directive that is similar to V if but the difference is that V show uses CSS to show or hide an element VF completely destroys and render an element in terms of performance this is more more costly but because we don't want to actually render anything on the page if we are looking at all post so we I'm using the if but this can be toggled back and forth with CSS property so I want to say if the post store loading is true show this one otherwise don't so right now in the beginning is true and you can see for a second it appears and goes let's break our adjacent server pressing contrl C two time and I'm going to press Arrow up to get that one again but I'm going to add a flag D with maybe, 1500 100 so that is 1.5 seconds delay and let's run it all right now the local server or the local fake database is running with a 1.5 DeLay So let's refresh and you can see about 1.5 second and we get the data and the loading is gone another thing I want to add which is a good practice for development is to have an error message so I'm going to create a error MSG and set it to an empty string here and down here where I'm fetching the data I want to also catch if there is any error so this is an arrow function and this is a callback function and I'm going to pass an arrow function and I want to first of all console. log that error for myself for example but I want to set that error MSG to for example something went wrong now I want to show this if there is an error so on in my home view right under the header I'm going to add another div all right so that is the div I added and it's going to be like that but we don't want to show it if there is no error so we can again use the V if because this is not something that would toggle back and forth all the time so we can say V if post store and we called it error MSG so if that's true show this one otherwise don't so right now it is false or an empty which is basically means nothing null so it's not going to show me anything but if we have an actual error here we want to show this message down here so uh in the home View VI we can't just say error we can provide post store so same thing up here so I'm just going to copy this one paste here reformat the code and let's go to our post store and break the code so I'm just going to change the url here and save it and refresh so something I forgot I need to set the loading to false here too because whether we are getting an error or not we need to get rid of that loading so let's do it again that's it you can see it is giving me that error so if I change it back to and I'm I'm getting the error in the console too if I change it back to the right URL which is this one save it we are getting back our data let's break it again there we go we are getting an error now let's just add the other functionality so we want to actually make other requests to this endpoint and Patch delete or post a new post into our database so in the Json server if you visit Json server website which is this one from npm and if scroll down you can see we have these routes so this end points we can get a post we can get a specific point we can post request so we can add something we can patch and delete using the ID right so I'm going to do that one so for the add post we can again call the fetch method to that endpoint so this is going to be a post request so we need to add options to this fetch API so as the second parameter or argument sorry I'm going to set the method to post and so the header is application Json we are specifying that our post request is Json and also we need to provide the body so what do we want to send to that endpoint to our database so we want to use the Json stringy because this is an object and we need to send ad Json now we need to send a post right right down here I'm actually creating the proper post not this one this is only coming from the form which has two items only so what I'm going to do above this fish I'm going to create the post or rather new post and set it to this object down here so I'm going to grab all of this add it here so format the code now down here instead of pushing a new object I'm just going to say new post let's put it up here and then we will do the fetch so first we will add it to the array and then we will do the fetch post request and then we will add this new post to our database and also uh let's catch if there's any error so catch this time we're just going to console. log which is we are not going to show any error message to the user for now but we can if we want to we can just use the same error message here all right so you can see down here I'm getting post I'm making get requests all the time so let's refresh all right let's make a new post new post and the body is going to be just some nonsense and let's press add we should be able to see a post request there we go so you can see it took uh what maybe 150 millisecond or this one I don't know which one is the right one but we did make a post request to this endpoint and in fact if we look at our data Json file and all the way to the bottom we have a new item with the IDE of five because we said one plus the length the new post the body the author the date and it is not saved and if we refresh the page it will stay this there because because this is now saved in our database we still have to handle save and delete because if I save it now and refresh this is again unsaved it is not changing in our database so let's do the same thing here which is a lot easier for delete and save so I'm going to copy this but we don't need all of this one so for the delete we are going to make a request to this endpoint and then pass the ID so I'm going to use the template string and we are already getting the ID up here right right and I need to change this single quotation to back TI like that so we are making a request to this address so it's going to be post slash one 2 3 or whatever and the method is going to be delete all right we don't need headers or any new things so that's it and again we are catching if there is any error so let's save this one too let's refresh and in our Json file we have the file down here so I'm going to delete this new post let's see what happens we should see a delete request down here and this should should be gone Moment of Truth gone delete request and the object was gone so let's do the same thing I'm going to copy this one um I'm going to copy this one because we need to patch something with the saved post right under toggling is saved I'm going to paste that one and this is just like the delete function I can copy this string or template string down here because it expects the ID we are patching one post so we want to set the method to patch we don't need the headers but I'm going to keep it there it's good to have it there because we are still sending something and in the body we are saying this post need to change so we want to send an object and set the property is saved to post dot is saved so this is saved belongs to this ID so whatever ID it is and now down here we are saying that set it to whatever this post ID is if it is saved make it unsaved and if it is unsaved make it saved and again we are catching any error save let's see when I click on let's create a post first so let's refresh we are making a get request go to the new post new post and add some data press add we will make a post request just like that in our DB now we have a number five again now I want to make a patch request and make this true so I want to save this post I'm clicking on this button there we go we made the patch request and now this is true and that's it so I can again delete need it and it's gone and physically gone from our database and I can save it and refresh it I can still get the same thing and with that guys we can wrap things up that's that's really it so I'm going to close the console I'm going to push this down close this DB this home View and this post and just do a very quick recap because it was a big project uh in my opinion again we learned a lot of things and you can do a lot of things with what you just learned in this video video I should say first of all view is my favorite JavaScript framework I should say that but I'm going to be working with uh react as well later on so we will have a video about react later on I can't promise when but we will have one anyway uh let's do a very quick recap so we created our vue.js application and we told our application to use Pia and V router and in our view router we defined our routes and said use these components or views where we created them as the pages and in our app Root component we defined those route router links that are basically just anchor tags but much more powerful than anchor tags and we told when we click on these anchor tags go to these specific links where we created in the view router and then show them using this view router placeholder and therefore we can go to page to page and nothing changes above but the View at the bottom changes and then we applied some components so we learned about slots and the name slots and we learned about communicating from a child component to the parent and the other way around so a parent to the child and also we used Pino stores and which made our job super easy and you can see all the logic we really need is within this store we don't have much logic in our views or our component in the home view we are doing nothing except calling the post store and just making a filter that's it in the post create we are doing nothing except listening for that form input and then adding it sending it back to pinia so our store can manage the data so the logic in our views or component are super simple and very well organized even this code can be refact and be a lot easier for example in the home view I use this evaluation over and over again where we can actually make this into a computed property which is not necessary for this one but it we can and we saved all our data within our fake database this db. Json using Json server and that is basically a View application and imagine this is your actual real API where you are making the calls uh whether you made it with python PHP or anything VJs and especially these stores using Pia make things really easy and the most important part for me is the separation of con concerns because this is the logic behind the application and there is no markup there is no style it's just JavaScript and with that guys I'm going to end this video and I hope you enjoyed it and this has been helpful let me know in the comments what you think and I really appreciate your like subscribe views and your support thanks for watching see you at the next one bye-bye

Channel: Learn with Jon

Views: 2,105

Keywords: html, css, js, javascript, web development, web design, learn, frontend, full stack developer, vue, vue.js, options api, composition api, crash course, full course

Id: WSh8iiWgOLg

Length: 104min 41sec (6281 seconds)

Published: Sun Nov 12 2023