Transcript for:
Vue.js Crash Course

hey guys welcome to my vue.js crash course so this is a course that's designed to get you up and running with vue.js as quick as possible and it's scared toward beginners so if you've never used vue.js before if you just dabbled with it or even if you've worked with it but you want some Refreshers or you want to learn about the composition API then you're in the right place and there's going to be a few different parts to this course so first we're going to go through some slides and talk about what view is and how it works and that shouldn't take very long probably under 10 minutes or so and then I'm going to show you how to get up and running very quickly using the CDN which is the fastest way to use view although you should only use that for really small projects and testing and just messing around for larger projects we use something called create view which is ultimately what we'll be using so after we do that we'll get into set getting set up with create View and we'll go over the fundamentals of components directives data methods Etc uh we're going to look at a very basic task project I wouldn't even call it an app it's just a project to experiment with and learn different things different directives and so on and then after that we'll move on to our main job listing website and since view is a front-end framework we need a backend for data so we're going to be using something called Json server which is a library that allows us to create basically a mock rest API and we'll start with some hardcoded job data but then we'll add some Dynamic data from the API and we'll learn how to make requests and so on so I'll have the the template files the HTML with the Tailwind classes and all that available for you in the repo as well if you took my latest react crash course it's the same exact application and that was intentional so that you can compare the two Frameworks and I'll also be creating an angular and a spelt version of that joob listing project as well because that's that's essentially the reason for these crash courses is so you can just get your feet wet and you can compare and contrast with other Frameworks and then you can decide on which one you want to specialize in all right so relax get a coffee or tea or whatever it is that you drink and let's get started learning vue.js [Music] this video is sponsored by daily dodev which is a platform that lets developers stay up to date with current Tech and I've used the daily dodev Chrome extension for over a year now so it opens up automatically when I open open a new tab and there's always something that catches my eye in fact there's been a bunch of articles that have given me inspiration and ideas for new videos and it can often feel like you're falling behind because it seems like every day there's new trends and new technologies that come out and daily dodev compiles information from all over the web and you can even set up your own custom feeds with specific tags of the type of content that you want to follow and you can manage categories content types and block certain tags you can also create Squad SS and I've recently created a public traversy media Squad so feel free to join and stay up to date with my latest content so visit daily. deev today and download the extension or use the web version all right so as with any of my crash courses we're going to start off by defining what VJs is so it's a progressive JavaScript framework used for building user interfaces and single page applications or Spas although you do have meta Frameworks now such as n and gridsum where you can build serers side rendered apps as well as static websites but we're sticking to spas in in this project or in this course so it's designed to be simple flexible and incrementally adoptable meaning you can start using it for small parts of your application and and then gradually scale up and view makes it easy for developers to integrate it into projects of all sizes whether you're just adding some interactivity to an existing web page or building a complex web application from script ratch and with its reactive data binding and component-based architecture VJs helps developers create Dynamic and interactive experiences for users in a very straightforward and efficient way so view was created back in 2013 By a developer an independent developer named Evan U who is I believe currently based in Singapore at least that's what I know from his bio and the reason that I I like to mention that is because I think that the fact that Vue wasn't created by a Google or a Facebook or any other Tech Giant like most of the front-end Frameworks were and the fact that it still has the popularity that it has I think that speaks volumes about the framework and about its quality and about its Community now as far as prerequisites a lot of people ask me when am I ready to learn a framework and the answer to that is a tough one because everyone has a different learning ability and different ways that they like to learn I know people that learn JavaScript at the same time that they learned react or view however I don't think that's the optimal way to do it for most people I think you should first learn the building blocks HTML CSS JavaScript and when I say JavaScript I don't mean just learn what a variable and a function is I mean learn it to the point where you can build at least some kind of of fairly simple front-end Project without any framework so I usually recommend the following JavaScript fundamentals so Loops functions objects arrays things like that events and Dom manipulation the fetch API and just basic HTTP so learn how to make a request to public apis get data back send a post request Etc um things like Arrow functions high order array methods destructuring basically all the es6 features that we got I think you should know that stuff because because you're just going to run into that constantly and you don't want to get mixed up in you know what is actually JavaScript and what is actually VJs or or react or whatever framework you're learning you want to know have a solid understanding of JavaScript and then I think learning npm is important learning the node package manager because you'll be using that constantly including using it to get set up with your initial VJs project now before we talk specifically about vue.js let's talk about the role of front-end Frameworks and why they were created and some of the advantages that you have uh cuz some people don't understand why you would use something like VI VI or react or angular so one you have enhanced user experience so front-end Frameworks are designed to make it easier for developers to create uh interactive user interfaces they provide a lot of functionality out of the box and allow you to focus on the things that are unique to your application and if you try to build a really interactive interface with just vanilla JavaScript it can get really messy really quick and I'm not saying that you can't do it but it can be uh it just be really difficult and it's it's kind of like Reinventing the wheel so next you have organization front-end Frameworks are designed to make it easier for developers to organize their code the UI is broken into components and each component has its own State its own properties things like that and they're also essential um frontend Frameworks are also essential for collaboration so if you have five different developers create an interface with vanilla JavaScript you're going to get five completely different code bases it's going to they're going to all be have their own style by using a framework everyone can be on the same page and it's much easier to collab and to build with a team so performance front-end Frameworks are optimized for performance they they have a lot of built-in features such as the virtual Dom which is a way of rendering the document object model without having to render the entire Dom every time this is a huge performance boost and gives users a really fast UI and then one of the key benefits of front-end Frameworks is their modularity they allow developers to break down their applications into smaller reusable components and this modular approach not only makes the codebase more manageable and easier to understand but it also promotes reusability so those are just some of the reasons why we use front-end Frameworks I'm not saying that you should always use one in fact that's something I see a lot of people doing these days is using view or react or felt to create something like a very simple landing page and I think that that can just over complicate things so you have to look at each project individually all right so that's just the role of front-end Frameworks now let's talk about why view because there's there's quite a few out there so first we have Simplicity and approachability VJs is renowned for its Simplicity and ease of integration into existing projects and it has a very gentle learning curve and it makes it makes it accessible to developers with varying levels of experience and it allows them to quickly get started and become productive rather than learning something like angular and I don't mean to trash angular but it is a very difficult framework to learn and it's going to take you a lot more time to start building stuff so flexibility VJs is designed to be incrementally adoptable again that means that you can introduce it into your projects gradually and whether you need to build a small widget or a full-fledged single page application VJs scales effortlessly and uh it it allows you to meet very diverse project requirements next we have performance and size so VJs offers excellent performance due to its efficient rendering mechanisms including the virtual Dom additionally View's core library is very lightweight which uh contributes to faster initial load times and better runtime performance and it's known to be one of the fastest front-end Frameworks around view promotes uh component-based architecture and components are self-contained units that can be reused across different parts of your application fostering maintainability and code reusability VJs also has a really Vibrant Community and Rich ecosystem of libraries tools and plugins in addition to building single page applications you have meta Frameworks like nujs which allows you to build serers side rendered applications as well as Frameworks like gridsum which allows you to build static websites so VI has a great ecosystem that is similar to to that of react now choosing VJs over react spelt angular it often boils down to personal preference and you should also take into account what's being used in the industry and especially in your area but I'm also of the opinion that you should enjoy the framework that you're working with all the time so my advice is to always try the framework s that interest you that's again that's why I create these crash courses so you can get your feet wet and create something and see which one really clicks with you and I think that building the same project with multiple Frameworks really gives you a lot of insight so as with any other front-end JavaScript framework vuejs is built around the concept of components and components are reusable selfcontain pieces of code that can be easily dropped into different projects and view components a very simple structure that's broken into three parts essentially so first we have the logic which is the JavaScript and this is wrapped in script tags this is in a in a an actual view file your components are have a do view extension and this is where you would Define any state or data as well as any methods events Imports things like that then you have your template output which consists of HTML that will be rendered however we can can also include Dynamic elements within this template such as variables Loops conditionals um using something called directives and we'll cover these later and then you have the style which is the CSS and you can add scoped which means that the styling will only pertain to that specific component so this is just a very simple example uh I don't even have any JavaScript or css but you can see how it's broke it's clearly broken up into those three parts and you might not even have any sty or you might not even have any any logic it could just be a dumb component which is just a just something that displays something and then you should also be aware of the the two ways to build view components one is the options API which is kind of the traditional way of of doing things um where we everything is within objects or options the data the methods Etc and it's a it's more straightforward and it's a it can be a good choice for smaller projects however the composition API which is uh released with vue3 is more flexible and allows you to create more complex components and I'm going to give you an example of both but overall I want to use the newer composition API and if you really want to get into the options API you can also look at my my older vue.js crash course because that's what we used in that one with both ways you can Define State data methods life cycle hooks you can have certain things happen at certain times such as when the comp component is is done loading Etc so I mean there's they're similar in what they do but the way that you write them is it's pretty different so the last slide that I have is just getting set up there's different ways to do this the easiest way is to use the CDN although this isn't really the recommended way if you're building any serious project so basically you can just include the URL in uh in a script tag and you can just use vue.js you can initialize a view in and go from there and I'm going to show you an example of how to do this as well as using Create view now there's something called the vew CLI which was used and popular for a very long time it's a command line interface to scaffold up a view project it includes a rich collection of official plugins and Integrations however the vli isn't recommended for new projects anymore uh and it's in I believe it's in maintenance mode meaning that it will only receive bug fixes and security updates if you go to the VCI so view CLI website you'll see that it's no longer recommended and they actually suggest using Create View and create view uses the V web server and frontend Tool and it includes features like hot reloading out of the Bots typescript and other features and it also has a re Rich ecosystem of plugins and Integrations so we can set up a project with one single command and this is what we'll be using for our job listings app and then another way to use View is with meta Frameworks just like react has nextjs view has njs which allows you to create server side rendered applications and then gridsome is a static site generator that uses view it's comparable to Gatsby and react so these Frameworks have their own tools to get set up and they're definitely things that I think you should check out but I always suggest learning the core framework first and learn how to build single page applications then move on to you know SSR and and SSG so that's it for slides now we're going to jump in and like I said I'm just going to show you real quick how to use view with the CDN and then we can jump in and use create view all right guys so this is the vue.js documentation which is pretty good and I'd suggest just keeping it open as a supplement to to this crash course and you can check things out there's obviously going to be stuff in here we're not going to go over CU this is meant to be kind of a beginner's guide now you can switch here from composition to the options AP and it will change the the code examples because the logic in your in your view components is going to be different depending on which API you use we're going to start off using the options API but then ultimately we're going to use the composition API in our main project so to get started there's a few ways that you can do it the recommended way is to run create View and that will scaffold up a project for you and you can have your your single file file components meaning you can have components in a file with a view extension and it allows you to build you know really scalable applications but if you just want to try things out or you just have a little bit of functionality you want to add to an existing project you can use the CDN and that's what I want to show you first so we're just going to spend a few minutes using the CDN so I'm going to copy this script tag right here and we're going to just go into I have this empty folder called view test and I'm going to open that with vs code and then we're just going to create an index.html and just scaffold up an HTML document we'll say view test and then let's add in that script tag with the CDN and we now have access to the The View object so in the body what I'm going to do is just have an ID of app and if if you're familiar with how react works if you've ever used react or angular in a single page application you have a specific div specific element and you basically bind your UI to that element and that's what this is so down at the bottom let's add in some script tags and then I'm going to create a variable called app and what we can do is use the view object to create a new instance or to create a new app and there's a um method called create app and what that's going to take in is an object and then here we can Define any any data or methods that we want on this in this app and the data and for now we're using the options API this is going to be a function called data and that returns an object okay it can be a little confusing because some people think it's you know when you first get started it's something like this so you have a data object but it's not it's a function called data and returns an object and then here we'll just Define something like let's just say message and we'll say hello from view okay and now what we can do is go under where we created the app variable and we can mount that so app. mount to the ID of app or whatever you choose to to call this and now inside this div we should be able to use interpolation which is going to be the it's going to be double curly braces that's a syntax and then we can use any of the variables that we have in our data so if I go ahead and save this and I'm just going to open it with live server we get hello from view all right so any data we put in here we can then add in here and it's it's basically Dynamic now we can also have events and methods and and I'm going to go over this stuff in depth later on I'm just doing this really quick so you can see how useful it is to just use in your projects but let's go we'll actually put uh an H1 around this message okay and then underneath that let's create a button and I'll just say click me and then we can add an event by doing at and then the event which is going to be a click and then set that to the name of a method which I'll just call we'll just call it uh click me all right so now this method we can Define down here in our app so we want to go under the data function which ends right here and then we're going to say methods and that's going to be an object of methods so let's say click me and then all I'm going to do here is just console log and we'll say button clicked okay so now we have the button and if I open up my console and I click we see in the console button clicked okay so you can see this is very easy to implement and it's nice and structured so you have all your your data your state and then you have uh any methods and also you have access to this data from within your method so for instance I could do let's say this so we use the this keyword message and we'll just say updated message so now if I click this that changes to updated message all right so that's about as far as I want to go with the CDN just wanted to show you how it works now we'll go ahead and create a new application using Create view so I'm just going to close this up and we can delete that okay and then I'm going to open up a terminal and just navigate to wherever you want to create this and we're going to run npm create space view at latest and then whatever you want to call the folder I'm going to call it view crash 2024 okay so this is going to ask us a few questions and what we want to include if you want typescript you can I'm going to say no you can also have jsx support within your templates we'll say no and then the view router is important and I want to I do want to use the view router in our our project but I'm not going to say yes here because I'm going to show you how to set it up from scratch so we're going to say no for now and then paa is a state management Library similar to like Redux and if you have a larger application you might want to include it but we're going to say no we're not doing any testing so tools for unit testing and and end to end testing we're going to say no yes lint no view Dev tools no and then let's CD into that folder and we do have to run npm install or npmi to install the dependencies okay then once that's done let's uh I'm just going to go ahead and open up this folder in vs code and I'm going to go over all the files and not all but most of these files and folders in a minute but but I just want to mention for extensions you want to install a view extensions and there's a few to choose from but what I would recommend is this one right here view official um this is going to give you all the syntax highlighting and stuff that you need if you don't install a view extension and you you go to a view file you're not going to have the correct highlighting and it's it's not going to be a very good experience so just be sure to install this one or one of the other ones if if you know of another one all right so let's look at the package Json first it's pretty simple we just have the view framework as a a dependency we have vit as a Dev dependency that's our our Dev server and our Dev tool and that there's a ecosystem of plugins for V and view this plug-in view is one of them and that's what allows us to use vue.js there's also a react plugin and many others and then for scripts we have the dev script which will run our local Dev server we have the build script which will uh create our production build and then we can preview our production build with preview so pretty simple package.json we also have the the V config and this is where you would bring in your plugin such as the view plugin and initialize it in the plugins array one thing I like to do is change the port because by default the dev server uses I believe it's 5173 or 5713 I like to use 3,000 so I'm going to add the server object here and in that I'm going to say port and set that to 3,000 you don't have to do that that's just something I like to have my my frontend projects on Port 3000 so the index HTML this is the the single page of the single page application so this is what the browser loads as you can see there's an an element with the ID of app just like we had when I used the CDN and that's where our UI is rendered and that comes from the main JS file in the source folder which is the basically the entry point to view Js and since we're using vit it's this is included as a module because vit has U es module support so unlike webpack where it would be you know a compiled u u bundled Javascript file so the title I'm just going to change that to view jobs and we can save that close it up and then the source folder this is where you know all the magic happens this is where all of our components go the main JS this is the entry point and again we're just using we're we're bringing in create app just like I did when we had the CDN and we're mounting to that that div that I showed you with the ID of app and what we're mounting to it is this app. view component which is right here in the source folder and this is bringing in some other components from the components folder so and you don't have to worry about this code we're going to wipe it all away but uh as you can see there's a script template and then Style so it has those three main parts um and then for the CSS this main CSS um we're actually going to be using Tailwind for our project so I'll show you how to get that set up there's a couple steps we have to go through but yeah that's pretty much the structure of of what you get when you scaffold up a a view app so I want to just clean things up a little bit actually let's run the dev server first so if we run npm run Dev as you can see see for me it's starting on 3000 um because of that what I added in the config file and it's just the the landing page it's just this stuff here this hello world and so on but what I want to do is just get rid of all this so in the components folder we can actually delete everything here and in the app. view I'm going to just for now get rid of the script and let's clear everything out of the template uh we want to keep the template tags but clear everything out and then clear out all the style and for now we'll just have an H1 and we'll just say um I don't know we'll say hello or let's just say view jobs even though we're going to do some some stuff first just to demonstrate what certain directives are and so on before we actually start on our application but as you can see now it's just showing the the template here now before we do anything else I just want to go over a few things so as I said as I showed you we have our script that can go at the top but you can also put your script down here if you want which was more of the convention with uh with vue2 but I like to have it at the top and then you can have your style and you can scope that to this specific component by saying scoped so anything I put in here like if I put H1 and I make that red that's only going to be in this the H1s that are in this particular component now just like we had in the where we use the CDN we can Define data in this component let's do that so we'll open up our script tag and we're going to export default in objects now I'm as I said I'm going to start with the options API and we're just going to do a few things I'll show you some directives and then I'm going to go back in and and switch it up and convert it to the the composition API so you have a a clear definition of of both apis so with the options API you do have to export default from the script so you have access to the data and methods in your template so in this export default we can Define our function called data and that will return an object and in that we can put our data so let's just say name and we'll say John Doe all right now since I have this this name I can use that down here so in this H1 I'll replace that and I'm going to use interpolation with double curly braces and I can just put name and as you can see it's now outputting John Doe so that's how we can create data and use it within our template now we're going to look at something called directives which allow us to uh to basically make this template Dynamic and we can have things like conditionals and loops and events so let's um let's start off by adding another piece of data here called status and I'm going to set that to true for now just a Boolean and then under the H1 I'm going to have a paragraph and the first um directive I want to show you is V if and all these directives are going to start with v-h and you use them just like any HTML attribute so let's say V if and then I'll say status okay so it's going to look at that status data and I'm going to say user is active and if I save that now we can see user is active on the screen and if I change this status to false now we don't see it so that's V if just like any if statement and we also have V else so if I go under that and let's have a paragraph and say um v- else and then I'll say user is inactive if I do that now user is inactive and if I were to set that to true then user is active now I'm going to change this from a Boolean to a string and we'll say active and I'm going to show you V else if so let's say well first of all instead of just saying if status let's add in here if status is equal to active then user is active and then we'll have another paragraph and we'll say v- else if equals status and let's say if that status is equal to pending then we'll say user is pending okay so now we see user is active if I change this to inactive or anything anything at all it's that's not active or pending then it's going to show this right user is inactive and if I add pending as the status then user is pending all right so that's how you can use those conditional directives now the next one I want to show you is V4 which you can use to iterate over array items so let's go ahead and um and add some data here I'm going to call this tasks and set that to an array and we'll just use an array of strings we'll say task one task two and task 3 okay and then what I want to do is down here under these paragraphs I want to Loop through actually let's put an H3 and just say tasks and we're not building like an actual app here it's just it's just to give you an example of these directives so let's say we want a ul and we want a list item item for each task so what we can do is create a list item and then we can use v-4 and it's basically a four in Loop we can say task in tasks okay so this task refers to the data up here right and you can call this whatever you want but since we use task we'll be able to use that within our list item now when you create uh a list like this just like with react you have to add a key so we do that by doing colon key key and then I'm just going to set that to the task it should be something unique all right and then inside the LI let's just output a t the task itself with interpolation so now if I save that you can see we have task one two and three in list items so that's V4 now the next one we have is V bind which allows you to bind a piece of data to an attribute so for instance if we have let's say link I'm just going to use https google.com and then let's say down here we have an a tag and I want to bind that link to the href what I can do is say v-bind colon href and then set that to link and I'll say click for Google and now if I click that it should go to google.com that was just cached uh so yeah so you can bind any data to to any attribute now this is the long way of doing it I'm going to just copy this down and comment that out because I want you guys to have this um but the shorter way is to get rid of V bind and just have the colon and then the and then the um the attribute okay so when you use a colon what you're saying is this is going to be dynamic this this is not just text of Link it's a variable okay if we do that without the colon then we're just setting it to a string of Link so that's V bind now for events there's a couple ways to do it I already showed you one of them and I'll I'll revisit that but we can use the V on directive so let's create a button I'm just going to put a space here and let's say button and let's say change status okay and then what I want to do here is say v- on colon click and then set that to u a function called toggle status right so when I I set this V on click and you can use other events too but we want to click and then we can create a method so just like I showed you earlier let's go under the data and say methods and then in here I'll put toggle status like that and what I'm going to do is change the status and I can access any of this data I can access in the methods by using this and this is with the options API it's different with composition which I'll get to soon but I'm going to go ahead and just have an an if else if here so let's say if this. status is equal to active then I'm going to set this. status equal to pending okay else if this do status is equal to pending then I'm going to set it to inactive so this do status equals inactive and then we'll have an else and then we'll set this do status equal to active all right so now we have this button and I'm just going to put a line break right here okay and if I click change status you'll see that now says user is inactive user is active user is pending so it's reacting to my my button click here now the the shorter way to do an event I'm just going to comment that down is we can do instead of v on colon we can replace that with the at symbol and just say at click and now you'll see that that still does the same thing all right so I mean in my experience you see this more than you do this all right so yeah I think that that's that's pretty much all I want to show you as far as the options API so you have your data you have your methods it's it's very straightforward and you'll probably see you'll probably find that the composition API seems a little tougher at first but it's much more flexible and you can create much more complex components and there's a a long way of doing it and a shorter way I'm going to show you the longer way first all right so um do I want to keep this you know what I have I I'm going to put the blog post in the description which has all the code like every bit of code I write in this tutorial so I am going to get rid of this um oh you know what I'll do is I'm going to rename or not rename I'm going to copy this and then rename that to let's say app 2 and then back in app. viiew I'm going to get rid of everything in the export okay so I want to keep keep all this cuz whether you're using options or composition this stuff is going to be the same the directives all that those don't change it's just this the logic all right so we want to have and I'll keep this open too so we can see we want the this data back but using the composition API now with the composition API we have to wrap everything in a setup function okay and there's again there's a shorter way of doing this and I'm going to show you that after so in setup we can then Define our data just like we would normal data we don't have to have a data function or anything like that and I'm going to set that to John Doe and then we want what else did we have the status which I'll set to active and then we have our tasks so we'll say task one task two and task three and then we have the link we don't I guess we don't need the link so I'm going to get rid of this uh this right here okay so I saved and you see that the tasks aren't showing um I'll I'll get to that but let's let's create the function because remember we have the methods object with a toggle status what I'm going to do is copy everything in the toggle status body and then we're going to define the function here I'm going to use an arrow function so toggle status equals arrow and then we can paste that stuff in there all right and then what we'll do is in the setup function we're going to return so down at the bottom setup ends right here so I'm going to return the name the status tasks and toggle status all right so now we can see our task a task are back the name is back so basically we have our setup function we have our data we have our method and we're returning all that now if I click this notice that it's not uh it's not changing the Status the reason for that is these aren by default these values are not reactive and we need we need the status to be reactive because we're we want it to react to this button so the way that we fix that is we need to wrap it in a function called ref there's also a function called reactive which you can use with objects but I'll get to that later so what we need to do is import ref so up here we're going to say import ref from View and then we just need to wrap our data so ref and we're going to wrap John Doe and then for the status ref wrap that and ref like that okay so I'm going to save it and then click change status and it notice it's still not working that's because when you have a reactive variable like we do here we don't use the this keyword and we need to use value so what we can do is change these instances of this do status to status. Value save that and let's come over here and now it works all right so this is the the conversion of this the options API to the composition API now there's a bunch of things we can do to shorten this up this is the long version so first off we can instead of you using the setup function explicitly we can actually put it in the script tag like this script setup and then not not only do we not need the the setup but we don't even need to export default so we can get rid of both of these lines and then down here get rid of both of these and then since we're we don't have an explicit setup we don't even need to have this return we can completely get rid of that okay so now that looks a lot cleaner right we don't have the setup function we're just using setup here we don't have the export which is nice because with the options API you need the export and then we're not returning anything it's just implicit so if I click change status it still works all right so this is the the composition this is the options and it's up to you on what you want to use but again this is much more flexible this is very rigid right you have a data function that you need you need to return the specific object you have a specific methods option or object with all your methods here you just it's it's more like a react application right um and ref you can think of ref sort of as used state in react if you are familiar with react um because it with used State you you can't just have a variable and then just reassign it to something you update it with used State that's kind of similar to what we do here although you can just directly set the dot value which I think is is much neater now I know we're like a half hour or more into the video and we haven't started the project yet but there's a couple other things I want to show you and the reason I'm showing you all this stuff now now is so we can kind of go through our project with ease obviously there's new things that I'll show you there but you're already going to know understand reactive variables and you know how to create methods and events and and directives so let's add a little form where we can add a task to this list so I'm going to go into the template and let's see we'll just go doesn't really matter this doesn't have to look good at all but we'll go above the H3 okay and then I'm going to create a form tag and what we can do here is either use v-h onsubmit we can use V on directive or we can just do at submit and set that to a function which I'm going to call add task now when you submit a form whether it's vanilla JavaScript or whatever you have to do you know e. prevent default because you have to prevent that default um Behavior but what we can do here is we can just do prevent and then we don't have to worry about doing event.prevent uh above in the method so in the form let's add a label so we'll say for let's call it new task and we're just going to say add task and then we'll have an input type is going to be text ID we'll say new task uh what else do we want here let's do a name of new task now what we can do is we can bind a piece of data to an input and we can do that using the V model directive so up at the top here where we have our data let's say con new task just like with react I know I'm saying a lot about react but I'm guessing a lot of you guys have at least a little bit experience with it and it's fine if you don't it's absolutely fine but with react when you usually when you have form inputs they're attached to a part of your state and that's what we're doing here so we're setting new TX task to ref and it's just going to be an empty string that's our default and then down here in the input we can then set the V model attribute or directive to new task okay so now if I put something as the default in this new task and I save it's going to show in the index input so those two are bound together all right now let's create the ad task so I'll go right under the toggle status let's say const add task all right and actually forgot a submit button so under that what is going on under that input let's do button type is going to be submit and I'll just say submit all right so we have our add task and I'm just going to do just a little bit of validation we're just going to check to make sure that it's there so let's say if new task. value and we'll do trim if that is not equal to nothing then we're just going to add it to the the the list the array so we have access to task. Value right and then we're going to push onto that and we're going to pass the new task. value and then we'll clear it by saying new task. value and we can set that to nothing so it's nice that we can just set it equal to something so now I'm going to go up here and I'll say task 4 enter and there we go so I can just add tasks and obviously they're not going to stick if I reload because we don't have any persisting database or anything now the last thing I want to do in this this little project here is is delete a class I'm not delete a task so down here where we have our task we have our our list item and what I'm going to do is let's see I'm going to put this this Tex ask and to put this in a span yeah so we'll do that put that in a span and then I want to have a delete button so right under it let's say button and we're going to add uh for the content we'll just put an X and then we're going to have a a click event so at click and set that to delete task now we need to pass in in something so that we know which task we're dealing with and when we have a V4 we can actually get the index too so instead of just saying task in tasks we can open some parentheses and we can get the task but we can also get the index and then let's pass in index into the delete all right so now whoops I don't want to move that so now up at the top here let's go down under add task and let's say const delete task okay and that's going to take in index all right now to delete this is going to be very simple I'm just going to take the tasks do value and I'm going to use splice and I'm going to splice at the index and then one so that should just take take it out so if I go to task two I click that task two is gone okay so now we can dynamically add and remove tasks change the status now the last thing I want to show you before we move on to the The View jobs is life cycle methods so if you're familiar with react you might be famili familiar with these These are functions that are called at different points in the life cycle of a component so for example um this on before Mount is called before the mounting begins on mounted calls when the component is mounted and this I would say this is probably the most common one if you're going to make an HTTP request when your component loads this is probably what you're going to use you also have on before update on updated on before unmount on unmounted on activated on deactivated and on error captured okay so these are the the life cycle methods that you have to work with so let's just do something real quick I'm going to just fetch some to-dos from Jason placeholder which is just like a f fake rest API um same people that created the Jason server that we're going to use and I'm just going to add them to the task list here when the component mounts so let's go to the bottom here and we're going to say on mounted uh and actually we do have to we do have to bring this in so let's go up at the top and just bring in on mounted from View and it's a lower lowercase o all right so in on mounted it takes a function and I'm going to make this asynchronous because we're going to be using U the fetch API so we'll say async and use an arrow function and let's just put this in a TR catch so we'll say const response set that to a waight Fetch and the end point is going to be htps and Json placeholder do typy code do com and then slash todos so there's different resources we're going to get to-dos which are basically tasks and then let's say cons data set that to await the response. Json and then I'm going to take the tasks. value and set that to the data now I just want the title because these the data is going to be bunch of objects right they're going to be uh to-do objects so I'm going to use map so that I can just get an array of titles so I'm going to say for each task then I just want the task. tile all right and then in the error I'll just do uh console log of we'll just say eror error fetching tasks all right so let's save that and there we go so you can see it's fetching the data it's it's just turning it into an array of uh of titles and adding it to the task array so now we can see them we can also delete them we can add more so that should get added to the bottom as you can see right here all right so that's pretty much that that's pretty much the fundamentals of vue.js so now we'll move on and we'll create um a a more real Life Application so what I'm going to do is take everything that I have in app. viw and I'm going to put it in the app 2. viw so you guys do at least have this code close that up and then we'll completely get rid of everything just put a template in here I don't know why em it's not working and let's just do an H1 and say view jobs all right so let's let's let's get Tailwind set up and if we go to or if we just search for view Tailwind there's a documentation page that we can follow so it's going to be right here it's at the in the Tailwind CSS um documentation so we want to to run this so npm install Tailwind CSS and post CSS in the auto prefixer so we can just grab that and I'm just going to open up another uh another terminal here actually wait I don't okay so I'm going to paste that in all right once we do that we need to create a Tailwind config which is going to be this and if we add the- P that'll also create a post CSS config file so I'm going to paste that in all right now there's a few things I want to add to the Tailwind config so I'm going to uh close that up and and notice in the documentation here they still have Purge now well it's now content all right and what you want to put in here is what files do you want to watch for tailin classes so the first thing I'm going to put in here is going to be dot slash and then index.html which is the the entry point basically all right then I'm going to add the the folders and and file extensions that I want to watch so it's going to be do/ source so in the source folder and then slash and then double asterisk slash as asterisk Dot and then in curly braces I want to look at the following EXT extensions Vue JS TS jsx in case you're using jsx and TSX all right so that's what we want in content now in theme there's a couple things I want to add to extend one is going to be the font family um so I actually want to use the Poppins font so what we can do is add sanss and set that to an array and we're going to pass in here Poppins and Sans Das serif okay so that's that and then under font family I'm just going to have a class of grid I want to do grid temp split columns because on the actual job page I want to have uh split columns where one is 70 and one is 30 so we'll have a class let's do 7030 and then we're going to set that to a value of 70% and not quite 30 but 28% okay so it's just adding some extra um classes for for Tailwind or an extra class and that's it so we can close that or we can save that um yeah I don't think there's anything else the variance extend we don't need but I guess I guess we could put it in there like that and yeah so we can close that up now we can continue on here and let's see it'll also create a post CSS yep that's already created we don't need to do anything to that that's the post CSS and let's see what else we already did this The Purge which is now content and then the last thing we have to do is just add these three lines to our CSS file so that's going to be in assets and then main.css I'm going to replace everything here add that and now if we look at our project let's see is this being included should be because you know what I might have to restart the server there we go all right so Tailwind classes should now work we can test that out by doing class let's set that to text- 2XL and there we go so Tailwind is now is now working now I like to have my projects at least look decent so in the final repository which is a link to in the description you're going to see a a repo that has the final code and it's going to have this underscore theme files and this is just the HTML for the project like if I open the index HTML you can see basically just the just the interface or just the the website it's not functional or anything and there's no data real data it's just the HTML all right so what I would suggest doing is bringing that into your pro you can bring it into your project or open it up in a separate editor so I'm just going to copy the folder into here so that I have access to those so for for when we need the HTML and then also if you look in Source there's going to be uh in assets there's an IMG folder so I want to bring that over to our assets folder like that and I think that I think all that's in there is the the logo let's see yeah it's just a logo and we can get rid of the base CSS and this logo SVG we can delete both of those okay so now we have the logo now the first thing I want to do and you know what I'm just going to open up the theme just so we can see what the page we're looking on looks like and what we're actually working on at that time which first I want to do the navbar here so the Navar is going to have the logo and then just some links and I want it to have active links like if I click on jobs I want the jobs uh to be highlighted in the navbar so we're going to create a component in the components folder here called navb bar. viw okay all your all your view components are going to have a do view extension and when we add our script tag since we're using the composition API and we're using the shorthand then you always want to make sure you add setup here if you don't add setup then you're going to have to export default you know if you're using either the options API or if you're using the the explicit setup function so here I'm going to import and we want to bring the logo in so that's going to be from and we can use at slash so this is a shorthand or an alias for the source folder so from there we want to go into compon uh not components sorry assets slash and then IMG and then logo.png I believe it's a PMG yeah all right so we're going to bring that in and then let's create our template and forgot M it's m it's not working for template and to get the HTML I'm going to go into index.html or any of them really and grab the nav tag so that whole thing because there's no sense in US typing out all that and then paste that in the template here and then we just want to replace the image or the image source cuz right now it's just pointing to images SL logo but what what we want to do is bind the logo variable that we just created above to this source so we can do v-bind see so now you already know what this stuff is and I don't have to explain it because we already went over it and we want to bind it to that logo variable so in here we can just put logo and then we can even use the shorthand and just do colon Source all right so let's go ahead and save that and let's go to our version now obviously it's not going to show because we need to bring this Navar into the app. view so up at the top here let's say script let's add in setup and then let's import the navbar okay that's going to be from our Alias SL and then components slash and then navbar and then we can replace this H1 here with the navbar embed and there we go okay so I mean this right these right now are going to like HTML obviously those don't go to the right place and we don't even have uh we don't even have the view router set up so don't worry about the the actual links for now we'll get to that later and we'll get to the you know highlighting each each of these uh links later so the next thing I'll do is the hero component which is going to be this right here it just has a title and a subtitle and this is where we're going to going to get into props right CU components can have data passed in and those are called props so what we'll do is in components let's create a new file called hero. viw and we'll create script setup and let's add our template okay and then for the template I'm just going to go to the index HTML and we're going to get the next section so I I created this template so it's just easy to go in and grab each section I know some people really don't like that to have to copy and paste but we don't also don't want to type out a bunch of classes that's not what this is about so let's paste that in the template and we'll just save it for now I'll do the props after let's just bring it into our app so we'll just copy this down and let's take navbar here and here and replace that with hero and then let's see under that that we'll say hero and there we go now like I said we're going to get into props so I want to be able to pass in into hero I want to be able to do this title equals and then set it to we'll just say test title for now okay so I want to be able to pass this in and have that show here as the the H1 so to have props in a component we have to go into the script and we have to first off import Define props okay so we're going to import that from view then we want to call Define props and then we can pass in here an object of the props that we want and there's a couple ways to do this we can say title because that's what I want to call this prop and then we can just set that to string like that or you can set it to an object and then then have type and then put string okay now the reason I want to do this is because I also want to have a default prop so if I put here default and I'm going to set that to become a view Dev as the default so basically if I don't pass anything in if I don't pass a title in then this is what's going to show now we can just simply go down to the H1 and replace this with our double curly braces and title and if I save now we get test title okay now I want to be able to pass in the subtitle as well so let's say subtitle and set that to test subtitle and then what we would do is just add that so I guess we can just copy that down and do subtitle it's going to be a string and then for the default let's set set that to this text right here and then in the paragraph get rid of that and have subtitle and there we go now if I don't pass either of these in which I'm not because I just want to use the default then there we go we have the default values so that's that's essentially how you use props you just bring in defined props you define them with their type and a default if you want one and then just use them so pretty simple so the next thing I want to do is these two cards here which I'm going to put them both in a a component called home cards and then I'm going to show you how we can use a container component which is a component that wraps around content so let's start off by creating in components home cards. viw and we'll add script add our setup and then our template and I'm notice I'm not doing any style because we're using Tailwind classes so there's really no we don't need any custom styling so to get the home cards HTML I'm going to go to theme files and then the index and this developers and employers that section is what I want to copy so I'm going to grab that paste that into the template and for now just save it bring it into um into our app. viw so we'll copy that down and let's replace that and that with home cards and then we're going to put that down here home cards save it let's look at our version and there we go now I want to like I said have a a wrapper component called card and put the data or not the data but the content of each one of these inside of it so basically this right here would be instead of having a div here we could have card like that and then anything that's in here would be in that card and we can have certain background color props and stuff like that in the card so let's create a new component called card. viw and we'll have script setup and template and let's see the the way that I want to do this is where we have our home cards we have this div with the class of BG gray P6 basically I want to have this div so I'm going to just copy that and paste that in here with an ending div and ultimately I want to be able to pass the background color in so we can have a dynamic background color for the cards but I'll just leave the gray for now and the way that we output the content that we wrap is with a slot like this and if you've use react it's similar to when you have a children prop right and you output that so now yeah we should we can save that and now in home cards I'm going to bring in I'm going to bring in the card component I don't know why it's not coming up so slash component SLC card. viw and then I'm going to replace the div right here where we have the P6 rounded Shadow I'm going to replace that div with the card component and we're going to wrap that content okay so that's the first card then we have this one which has the BG green so we're going to replace that div with card as well so if I save that now it's working but notice the BG green is now gone right because the card component has BG gray so what I'd like to do is have a prop for that class for the background so let's go up into the script of card and let's import um we're going to import Define props and then let's define props and I'm going to call this BG for background and let's say type is going to be string and then let's add a default and the default will be BG Das gray- 100 and now we can come down here and we can use this BG prop in place of this but we need this to be dynamic right because we're going to be adding a variable to it so what we can do is bind to this by putting a colon here or you could do VB colon and then instead of double quotes um actually no we still want double quotes but we want to add in back ticks after it okay because when you when you put a colon here whatever you're putting within the double quotes is Javascript okay it's actual code so right here so we want the back ticks and then we want to replace that with BG like that so now if I save it's they're still both gray but I should now be able to go to the second card and pass in BG you'll see it comes up here and let's say BG Das green-00 save it and now that's green if I passed in red 100 so now I have this Dynamic component where I can just pass in the color that I want this card and I can reuse that all around the project all right so that takes care of that now the next part is going to be here the browse jobs so what we're going to do is create let's just close some of this stuff up just leave the app open and we're going to create a new component called job listings plural. viw and let's add a script tag with our setup and then we'll have our template and just for now I'm just going to say jobs listings or job listings okay and then we're going to bring that into our app. view so import jobs our job listings and let's output that right here so job listings and then if we look at our project you should just see job listings now as far as the data goes we're going to ultimately we're going to use Json server which is like a fake backend rest API but for now we're just going to use a Json file so if you go to the code and repository and let me just uh let me just grab that real quick so code Dev okay so this is the code from the from the repo and you'll see that in the source folder there's a jobs. Json and jobs 2. Json so right now we're going to be working with the jobs 2. Json there's just a slight difference here but we do have to change the structure later so that's why there's two versions so let's bring that into the source folder okay make sure you bring it into Source not the root and then we're just going to rename that for now to just jobs. Json and what we have is an array of of objects that have an ID a title A type description location salary and then a company object with a name description email and phone okay so what I'm going to do is now in that job listings component I'm going to import that data so let's say import and I'm going to call this job data and that's going to be from and then up one level uh actually we can just do at slash and um should be yeah that should work right do we put it I put it in the right place yeah Source all right so that should work now um in order to make that data reactive which we need to do because we're going to be adding and deleting and stuff so we also want to uh we want to import ref from from view okay and then what we can do is just create a variable called jobs and set that to ref and then pass in job data making it reactive so again it's if you're coming from the react framework it's similar to Ed State and just to see if that's actually getting them let's do a console log and it's going to be job do value cuz remember since we're using ref we use value and if I open up the console here you can see that it is fetching that data so array and there we go all right so now that we've done that I'm going to use V4 to to Loop over them and then output each one like this all right so let's go into the template here and uh yeah I guess for for now I'm just going to just have a div and let's say v-4 and we're going to set that to let's say job in jobs and we need to give it a key so colon key and we'll set that to let's say job. and then in here all I'm going to output for now just to make sure this is working is the job do title and there we go so we know that we're fetching the data I mean fetching if you even want to call it that we're just getting it from a file now we want to have like the title and stuff in here and it's going to be kind of confusing if I copy it so let's just type this part out so I'm just going to put section and the section we're going to give this a couple classes let's say BG - blue uh -50 and then padding on the xais 4 padding y-10 and then in the section we're going to have a div with the class of container Das XL and also on that we're going to say on large screens we want to use the container class and then also m- uh margin Das Auto and in that div we're going to have an H2 and that's going to have a class of text- 3XL and then let's do font Das bold and text- green or text green 500 margin bottom six and text Dash Center all right and that's going to just say browse jobs okay now uh let's see we want to go under the H2 and that's where we're going to have our grid so let's say grid and then grid Dash calls D1 and GAP D6 so that'll be a one column but on medium screens and up so MD colon and this is just Tailwind if you don't understand these classes that's fine don't worry about it that's not really the point of this course so MD grid calls 3 all right so in here is where we want to have this this div that iterates over the job so I'm going to cut that from here and put that inside the grid like that all right so now it's going to look like this and if I make this bigger you'll see that it goes into three columns but obviously that's not the data we want to display just the title we want the whole the whole card this whole box all right so what we can do is go into the template the index HTML and down in the browse jobs we already have this stuff right so what we can do is just grab one of the these listings and they're they're labeled they're commented so I'm going to grab this first job listing which ends right here so I'm going to copy that and then we're going to create another component for just a single job listing so job listing singular. View and we'll add script setup and then our template and then I'm going to paste that into the template now I'm going to want to show this job listing component for every listing here right instead of this div so let's bring in the single job listing component so import job listing and then I'm going to replace this div right here with job listing and it's not going to be a a wrapping component so we can get rid of oops I hate when ites does that just get rid of this and then add a slash at the end here but we also need to pass in the job right We're looping through right here so we're getting the job so we need to pass that in as a prop so we're going to say colon job so we're binding it to job now we should be able to access this as a prop okay um and notice that now it's showing all the boxes but it has all the hardcoded data so High coded content so it's all the same so let's go into the job listing and let's prepare to to get that job prop so in order to do that we need to import Define props and then we're going to Define props oops find props and we're going to pass in an object with job which is going to be an object okay so now we should have access to job so I can replace fulltime here with double curly braces and then job. type okay now if I save that I think one of these yeah this one right here says part-time so we know that that's that's the data from the file let's replace this with job. tile now we have all different titles and then we have the description so replace that with job dot description the salary which how is this let me just see how this is formatted so the salary is yeah like 70 80k so it's doesn't have the slash year so let's just replace this with job. salary okay what else we get the location we also have the icon which doesn't show up because we're not using font awesome I'm going to use a another package called view awesome for that but we we'll get to that after let's change this this the hardcoded to um to job do location okay and then finally the the link here it's going to job HTML which obviously that's not correct so what we're going to do is bind so we're going to use the colon here and then replace this because we do have to have the ID in here so it's going to be dynamic so we'll replace that with u we'll just have quotes and we'll say slash job Flash and then let's concatenate the job. ID and that should do it so now if I were to click on the read more and we look at the link it's job sl3 right if I go to this one job SL1 so that they're bringing us to the right place obviously we don't have that you know that route we don't even have the router set up yet but the link is correct and now the content is correct now the next thing I'd like to do I'm just going to make this bigger so we can see it better I want this this whole job listings I want to take in a couple props one is going to be limit so that we can limit it because I don't want all of them to show which right now if I had 30 jobs here they'd all show on the homepage I want to limit it to three so we'll pass limit in as a prop and then also if we look at the template that view all jobs I want to include that in this component as well but have an option to not show it cuz I do want to show it here but when we use that component on the jobs page I don't want to show it so we'll have a prop of limit and a prop of show button so let's do the limit first so we'll go into job listing so I'm going to just close that up this uh yeah we can get rid of that for now so in job listings I'm going to also bring in Define props and then let's define props and we're going to take in a limit which is going to be a number all right so there's a couple ways we can use this limit what I'm going to do is come down to the the V4 and just add on to this this uh where it says in jobs I'm going to use do slice and then pass in from zero to the limit uh or then just show all of them so job jobs. length Okay so now if we were to pass in let's go to app. viw where we're embedding job listings and let's say limit equals 3 actually since it's a number we need to add the colon in front of it so if I do that now it's only showing three if I put two then it shows two okay so that was pretty easy now for the button we don't have that in our job listings component yet so let's go to the theme files in index HTML and under the browse job section you have this section with the U with the button so I'm just going to copy that and then we're going to put that directly under this section okay but I only want this to show if the show button is true so what we can do is pass in show button which is going to be a Boolean and actually I want to have a default for that so let's set that to an object with a type of Boolean and then a default of false so it won't show by default and then all we have to do is go down to the section where the button is and add a v if and set that to show button all right so save that we don't see the button but if I go to app. viw and I add show button actually we're going to do colon show button and set that equal to true now it shows all right and that button right now goes to jobs. HTML so we also want to change that it's just going to go to uh Slash jobs so change that there we go all right cool um and that's just cache let me reload it there we go so the next thing I want to do is talk about the computed function and this is a function that returns a value based on other values and it will run when that particular value changes and if you're familiar with react it's kind of like how the dependency array in the use effect hook works when that dependency changes that effect runs or that function runs so let's use it to show a truncated version of the description so basically we'll have a short or truncated version with a button to show more and then it will show the full uh the full description so that's going to be within the job listing component the singular so let's close job listings and go to job listing which is this one okay and in order to use computed we're going to bring it in so let's bring in in in addition to Define props we're going to bring in ref and we're going to bring in computed because we need a a a piece of data for the the true or false if we want to show the full description or not all right in fact let's go right under Define props and let's say const show full description and we're going to wrap this in ref because this is going to be reactive and set that to a default value of false now I want to access the job up here so what we can do is we can this Define props we can actually set that to a variable so set it to props and then props do job should give us the job and we can say like props do job. description to get the description so now we're going to use computed here let's say truncated description ultimately that's what this is going to give us and the way we use computed is we just set it like this and then pass in a function all right and then let's say let description and I'm going to set that to props do job. description okay so that's going to come from the prop that's passed in the job and then let's have an if statement under that and we want to check to see if it's let's say if it's false so if not show um wait do we yeah if not show full description and remember remember since we're using ref it's going to be value and if that's not then we're going to say description and set that to description and then do substring so this is how we're going to truncate it we're going to cut it off a little bit let's do 0 to 90 and let's add an ellipsis after it so we'll just concatenate onto it three dots so it'll get the first whatever 90 characters and then after the if we'll just return description okay so now anytime the uh full show fold description changes the truncated description is going to run okay now we need a well we we'll do the toggle after because we need a function to actually change it this is just checking to see what the if the value is false if it is um so if we don't want to show the full description then it's going to narrow it down using substring so let's go down to where we have the description and instead of job. description we're just going to say description uh let's see why is that not showing a that's because we want to show we don't want to show description is a variable in this computed we want this truncated description there we go so you can see it's not showing the whole thing and it's adding the ellipses onto it so now let's just have a function to toggle that so we'll say cons toggle description or maybe we should call it toggle full description and we'll set that to an arrow function and all we're going to do is take the show full description. valal and we're just going to set it equal to not show description full full show description value so if it's true it'll get set to false if it's false it'll get set to true now we just need a way to to actually trigger that so let's put this right below the truncated description here so basically we have um you know what let's put this in a div so we'll go like this and move that into the div and then under the div let's have a button and I'm going to give this button a couple classes we're going to do text- green- 500 and let's say on Hover we want to do text- green- 600 and then margin bottom five okay so uh in the button I want to show either less or more so what we'll do is we can say I don't even think we've used a Turner yet we can use Turner um um uh operators inside here so we can say like show full description if that's true then show the text of less if that's not true then show the text of more okay so if I save that we see more right because it's not showing the full description so let's add an event to this button now so we'll say at click and let's set that to that toggle full description what what did I do here okay so I'll save that and now let's click on the more and now I'm I can toggle this particular description I can toggle this one all right cool so now what we want to do is the icons where we have these locations I want to have the little map icon right now if we look where that's supposed to be which is where is the location right here we have the it tag with the the font awesome icons which aren't showing up because we have't included font awesome and if you want you could just as well include the font awesome CDN or you could install it but I'm going to use something different called Prime icons so let's go to or just search for view actually it's just Prime icons and you can use this for react and other uh Frameworks as well so it's this right here so you can see Prime NG for angular Prime react Prime faces we want Prime View and then we can install it like this and then all we have to do is import the CSS into our main J main JS file so let's install it I'm going to go here and npm install Prime icons all right and then um let's go to the main.js and right under that CSS I'm going to paste that in and that's it now we can use these classes to to have the icons show up so where we have the fa solid this right here the it tag I'm going to just get rid of all those classes and I'm going to replace it with pi so Prime icons and then I'm going to use pi- map-marker that's the icon I want and then I'm just going to add in text- Orange d500 which is just um or 700 which is a Tailwind class so let's save that and see if that shows up and there it is okay so you can use these icon classes wherever you want now I think that we've come to the point where we want to start to use the router our homepage is is pretty much done right there's not there's not really anything else we need to do here we have the data obviously we want to fetch it from Jason server uh in a little bit but I want to introduce the router first and get that set up now now remember at the beginning when we use the create view CLI we could have said yes and it would create the router file for us it would create our our home route and all that and that's probably what you're going to do from now on after this but I want to show you how to set it up from scratch so of course we need to install it because it's not it's not you know bundled within the the framework it's like using the react router it is the official router to use so let's go ahead and what am I doing import um npm install and then it's going to be view- router okay now we need to set up the router in a file so in Let's see we want to go into the source folder and create a folder in there called router just close this stuff up so in router we're going to have a file called index.js and this is going to be our main router where if we want to add you know an about page and set that to an about view we would do that here if we want to set our home page to a home view we we'll do that here so let's start off by importing and this code I'm writing right now this would be included if you chose yes in the beginning so we want to bring in create router and we want to bring in create web history I think that's right yeah create router create web history and we're going to bring that in from view- router let's uh close that up okay and then we're going to need a view to bring in so why don't we create in the source folder a a folder called views now a view is uh is basically a page right and your views can have multiple components so in this case I want our home View to basically be what we have here in our app folder or in our app file rather all right so if we go to app. viw the only thing I want to leave here is the Navar because I want that on every page the hero home cards and job listings should only be on the home the home view so what I'll do is cut these Imports and then we'll put that in let's go into views and create a new file called home View and it still is a component so it'll be have a view and then let's add script and setup and in that we'll paste that in and then we'll have our template and I'm going to grab from the app. viw everything except the nav okay so we'll do that if I save now we're only going to see the nav bar but let's go to home view paste that into the template all right and then let's see we're going to go back to um The View file I'm sorry the router file which is router and then index.js and we're going to want to create that home view so first off let's import it so import home view from at views home View and then we're going to create a variable here called router and this is going to use that create router which takes in an object and and we need to add this history and this is where we use create web history so this is so we can go you know back we can use the back button and stuff just like if it were a regular server rendered app and then we're going to pass in here import. meta do env. basore URL so that will provide the base URL then after that we want to provide our routes which is going to be an array of objects and each one is going to have a path so let's do slash for the home and you can give it a name so I'm going to give it a name of home and then the component that you want to load or the view in our case so home view all right and then at the bottom don't forget you have to export this as default router all right so it's not going to work just yet because we're not doing anything with this there's actually two steps we have to take for this to actually work first in our main.js in the entry point we need to use the router the file that we just created so let's import that so we can say import router from and then we can just do do slash router we don't have to do slash index.js because since we named it index.js it'll automatically load that all right and then we can just come down here and instead of just saying create app I'm actually going to set a variable of app set that equal to create app and then down at the bottom we can say app. Mount so this is doing the same exact thing but now I can also say app.use and then pass in router all right so that'll use the router so if we look at this it says fail to resolve import components job listing view oh I didn't use the Alias there all right there we go okay so the last thing we have to do in order for the stuff to show the home view is in the app. view we need to bring in something called router view which is like the outlet if you've ever used react router then you you put an outlet in your main layout and that's what we're going to do here wherever we put this is where the the the view will show so I'm going to go right under the Navar and say router view save it and now you can see that we have our entire home view showing right because we're at slash if I go to slash anything else it doesn't show and we can create a not found page as well so yeah that's how we set the router up just to kind of reiterate we create the router folder the index.js we we add our routes create our view bring it in set it as the component and then in the main JS we use use the router we bring we import it and then we use it and then in the app. viw the main component we use our router view which is like the outlet all right so now we have the router set up and again if you chose yes in the beginning all this would have been created for you and in your app. view I mean in your main JS this would be here too the router View and also basically everything we just did would already be included now let's do our job drop this right here which goes to slash well right now it's going to U jobs HTML we actually want that to go to slash jobs so let's go to the navbar and let's see we're going to change this so This Home is going to go to slash now we're not ultimately we're not going to use a tags there's something called router link but for now we can just we'll stick to a tags just to create this route and go to it so let's say slash jobs and then this one is going to go to slash jobs slad okay so if I go to slash jobs obviously nothing shows here so let's create a jobs view so under views new file jobs view. viw Vie and we're going to have our template and then all I'm going to do here is is use the job listings component that we already created so let's say script oops script setup and we're going to import the job listings plural and then we're just going to embed that here job listings and we're not going to pass in a limit or the show button true all right so if we do that and then go to our router files so router index bring in that view so you can see kind of the process of adding new views so jobs View and then let's we can just copy that down and let's say slash jobs change the name to jobs change the component to jobs view save it and there we go okay so we're at jobs and this highlighting is is not working yet we'll we'll get to that but I can go home and I can go to jobs all right now before we do the highlighting the active link let's change the a tags to use the the router link so we'll start in the nav bar so up at the top here we're going to import router link from view router and then anywhere where we have an a tag including the logo right here I'm going to change that to router link okay make sure that the ending tag changes as well and instead of an hre it's going to be a two okay just like with u with react rotor and then let's change this to just slash it's going to go to the homepage so that's that then let's go to these three a tags change that to router link uh again make sure that the ending tags some sometimes it doesn't register so make sure we do oops is that right that's right I don't know why it's putting that on the next line but yeah that should work so let's go to this one oh actually you know what we want to change this let's change all these so commander control D again and we'll change those to two Okay so this one here router link make sure we add the ending tag and then this a tag router link add the ending tag all right so let's save that and I'm going to click on home all right so now that works a lot faster because it's not actually refreshing the page right it's a single page app so it's the JavaScript is doing all the work now there's some other places where we have links right here here these three and so let's go into our home cards we can close some of this stuff up for now let's go into uh components and then home cards and again we want to bring in router link and then we want to exchange the a tags for router link and we're going to change the HRA to two and this is going to go to uh Slash jobs and then this one here let's see this going to be router link and we're going to change that to two and change this to slash job slad okay so that takes care of that you can test those out that goes there add job that's not we haven't created that yet but it goes to the right place and and then we have the the job listing so we can close that up let's go to job listing and let's import router link and where we have the a tag change that to router link and change this href to two click on that and it goes to job job one this one goes to job two good and then the button at the bottom that's going to be the job listings component so let's bring in router link and down at the bottom change this change that to two and make sure that the ending tag gets put on there we go okay so now all the links are working and they're all using router link so now let's do the active links if I'm on the jobs page I want that to be highlighted not home so if we open the navbar and I'm just going to close that up and then we want to basically just get the path here and we can get that by using the use route Hook from view router so let's say use route bring that in and then we're going to have a a function called is is active link and just set that to an arrow function and it's going to take in a route path which we're going to pass in and we want to check to see if that route path matches the actual route path now we do have to set a variable of route to use route and then we can access the actual route path with this so what we can do is return if the route path is equal to the route path that's passed in so if that's true it'll this will return true obviously and we can add a certain class this right here which is the BG if we go down to the the navigation this BG green 900 is what's giving it that if I get rid of that you'll see that that goes away so we need to make this Dynamic now the way we can do this is just add a colon in front of class and then we can put we can make this Dynamic and we can actually set an array here with class names so for instance if I save this now with no class names it looks like this but I can add in here a string of text white and that will add the class right so basically I want to read these classes here the text White and the rounded and the padding so text white and then let's do uh PX what is it PX -3 I believe was that it yeah PX3 and then py2 so I'm just adding in Array items here for the classes as array items and then rounded uh rounded DMD right so now it looks like that and what I can do is let's go I guess we'll do it at the beginning here we'll say is active link and we want to check to see if it's slash because this is the home link and if it is so we'll use a Turner here if it is then we want to show a specific class if else then we'll show a specific class and then we'll put a comma here all right so whatever I put in here will show if it is the active link and I want to do BG green- 900 and then else I don't want the BG green but I do want to add hover so I want um the hover to be BG - gray- 900 I think that's right yeah VG gray 900 and let's also do hover B uh not BG text- white all right so I have this on the home link so if I go home now you can see that that has that background if I go to jobs it nothing has it because I haven't added this to the jobs uh jobs link but let's do that so I'm going to just grab this whole router link and then replace this except I want to change the text to back to jobs and when I'm checking for the isactive link I want to check for slash jobs so I'll save that and now jobs is is highlighted and if I go if I click if I hover this we get that that black black background all right now we want to do the same to wait why can't I click oh the link the actual link uh let's see so we have yeah right here so this should be slash jobs all right good so now we'll do the same to the ad job so let's again just copy one of these router links and replace this router link but we want to make sure we change the the URL to jobs ad and then the is active is going to be jobs ad and the text is going to be add job now if I click on that even though it doesn't work we don't see anything down here it is the active link so now we have that functionality so next why don't we have a not found page since we don't have a route for a job slad it should say like not found right so what we can do is create a new view so in views I'll create let's say not found view. viw Vue and basically the only thing we need to bring in here is the router link so we do need our script tags set up and then let's import uh router link and then we'll have our template and in the template I'm just going to grab from the uh the theme files there's a not found HTML so I'm going to go down to the main section which isn't shouldn't be much right just this section right here I'm going to copy that and then add that in the template and then just change a couple things up so one the link we need to change that to router link and make sure you add the ending tag so router link and then the actual link actually we're going to change this to two so two and then that's going to go to the home view so that that'll be slash all right now we have the font awesome icon here so I'm going to get rid of that and I'm going to use the um I'm going to use the what is it called Prime icons classes so let's do PI and then pi- exclamation let's do what do we want exclamation triangle we'll do and then I'm going to do text Dash yellow 500 and let's do text dash 7 XL and then margin bottom mb5 okay now obviously that's not going to show just yet because we need to add the route so we'll go to router index and of course we need to bring the view in so let's import not found View and then we'll go down here here and the way we can do a not found very they actually make it pretty simple so for the path we can set that to slash and then colon catch all and then in here we're just going to have do asterisk so basically any any file or resource we go to that doesn't exist it's going to match that path and we'll give it a name of not- found and then the component that we want to load is the not found view all right so we'll save that and there we go 404 not found got the nice icon and go back good so any anytime we go to a URL that doesn't exist we're going to see that so I think the next thing we should do is the single job view right if I click on read more it goes to the correct URL but we don't have anything here so let's create the view first so I'm going to go into views and this one I'm going to call just job view. View and let's create our script setup and template and what I'm going to do from here is just grab the from the theme files I'm just going to get the hardcoded stuff and then we'll replace it with Dynamic data later so let's go to job HTML and go to the main section so this we're also going to want this go back as well but we'll do that after this is going to be the main section so I'm going to grab that whole section has the sidebar and all that stuff in it so copy that put that in the template so it's just all hard-coded HTML for now but let's just bring it into the router so go to router and let's bring in import job view now this this URL is going to have or this yeah I guess this URL is going to have a an ID so I'm going to I'm going to keep the catch all at the bottom you don't have to but I just I just like to keep it at the bottom so let's add in another object here and the path since it's going to have an ID what we do is slash jaw slash and then colon ID okay that's going to be the path and then let's give it a name so I'll just call it job and then let's give it a component and that's going to be the job view component save that okay so that's not working and that's because this is job SL1 I do want to keep it as Jobs because that's what I'm I'm going to have everything else as right uh did I what I do collapse this yeah so we have jobs and then we'll have jobs ad and job's ID so what we need to do is change the actual link on these buttons so that's going to be in the job listing and right here I'm just going to add an S all right so if I click read more there we go and then obviously this is all hardcoded so no matter what job I click read more it's always going to be this this data that's what we have in the HTML but we're actually going to come back to this because what I want to do now is Implement Jason server which will be like a real back end instead of just getting it from the Json file I mean technically it does come from a Jason file but Json server sets it up so you can make actual get post put delete requests to um to have you know crud functionality so I'm going to just close this stuff up for now and let's install Jason server so we're going to say npm install json-server and the way this works is it'll actually look at a spe a specific Json file and it'll use that as your data now we have this jobs. Json and the only thing we need to change and this is why I had two versions of this we need to make it so we have this array called jobs so what I'm going to do is first off just copy this so duplicate it and change the initial one oh I'll change the copy it doesn't really matter I'm going to change that to jobs 2 just so you have the old version as well and then in jobs. Json all I'm going to do is we're going to have an object wrapping this whole thing right so opening curly brace and then have jobs and then set that to the array right so jobs set to this array and then just add the ending curly brace down here so that's all I want to change and then Jason server will look at this and use jobs as a resource for create read update delete or I should say get post put delete routes so the way that we set that up is in our package.json we're going to create a new uh a new script to load Jason server so let's go to scripts and let's add we'll call it server you could call it anything and what we want to run here is json-server and d-at and we want to watch in the source folder the jobs. Json file because that's our data and I want it to run on Port 5,000 that'll be our our back end so it's just like if you create if you used Express and you created a rest API for jobs and you put it on 5,000 it's the same exact thing as far as looking at it from the front end all right so now let's run that so I'm going to make sure you keep the the V server running but go to another terminal and do npm run server and let's see what happened here oh I think I have I think I have yeah something's already running on 5,000 that I can't really stop so let's I'm going to change it you can leave it at 5,000 yours will work as long as you don't have anything running but I'm going I guess I'll change it to 8,000 so now if I run npm run server now it's running at 8,000 and I actually have this endpoint of Local Host 8,000 jobs if I look at that there's my data and I have I I can make a post request to add a new job I can do a a put to update a job and a delete to delete a job so that's I mean it's as easy as that to set up a a mock rest API all right so so why don't we now since we have that set up let's have our data that's on in our job listings component come from Jason server now you can keep using the fetch API if you want but I'm actually going to use axios for this which is just a an HTTP client that's a little easier and a a little um you don't have to write as much code to make requests so I'm going to open up another shell here since I already have two running and let's let's do npm install axio again if you want to use fetch you can and then let's go into the job listings component listings plural and this is where initially we're we're bringing in that Json file which now if I reload actually why is it still working because I changed the format up of that oh this is that's the the uh theme yeah so see now this isn't working because I changed the format of that Json jobs Json file now we're not going to need to bring this in anymore because we're not going to use that we're going to make a request to our back end we're also not going to use um job data here so we can get rid of that and just put an empty array so basically our jobs is going to start with an empty array we're going to make our request in the on mounted life cycle method and then fill this array this jobs with the dat data from the API okay so let's bring axios in so we can use that or again if you want to use Fetch and we're going to do we're going to bring in on mounted from view so right here let's also bring in on mounted it's lowercase o and usually we'll put this at the bottom so let's say unmounted and then we want to pass in on mounted we're going to use use a sync we since we're using axios and and this is kind of like use effect in react so let's do uh try catch and we want to get the response so we're going to send a requests with await axios make a get request to http Local Host port and mine is 8,000 so just put put in the right port for your backend and then slash jobs right and then we can set jobs. value to the response response. dat data like that so that should update the jobs and then we'll just do a console. error and we'll say error fetching jobs and I guess we can yeah we'll also output the error okay so let's save that and now we get our jobs back and it should be here and on the jobs page because they both use this job listings component so now it's fetching it from the actual from Json server all right if we were to look at the network Tab and reload you can see uh where is it right here so it's making the get request to Local Host 8,000 jobs getting it back if we look at the response there we go so we're we're no longer just pulling in a file now before we move on this what we've done here with ref and using ref here that's absolutely fine there's nothing wrong with that in fact I think that's probably what most people would do but there's also something called reactive that we can use instead of ref now there are differences so the main difference is that reactive only takes objects it doesn't take Primitives like strings numbers and booleans and it also uses ref under the hood ref can take objects or Primitives so you can use that no matter what in fact a lot of you developers will just stick to always using ref and I probably would do that here but I want to show you other you know what else is available and then ref has the value property for reassigning where reactive doesn't use dot value and it can't be reassigned and when I say reassigned I mean you can't just take the actual variable and set it equal to something else it'll be an object inside and of course you can manipulate that object all right so what I kind of like to think of it as is and this is for people that are already familiar with react so when you have a form sometimes you'll you'll add a different Ed state for each field like the name the email Etc that's like an example of using ref where using reactive is if you were to use a single object that has each field inside of it so an object with name email Etc that's just the way that I think of it I don't know if that's I don't know if that makes sense or not that's just just me uh so let's bring in reactive and then what we're going to do is instead of just setting jobs to ref what I'm going to do is call this state and set that to reactive but we want to pass in an object and then in that object is where I'll have my jobs which starts as an empty array and then I'm also going to have an is loading so you can have a spinner or whatever while it's loading and I'm going to set that to True by default all right and then down here what we can do is let's see so we have cons response we're getting that now remember there's no dot value but what you will do is say state. jobs because I called this state so state. jobs we're setting that to the response data and then I want to use the loading which is set to True by default so what I'm going to do is add a finally to this try catch which just means whatever I put in here is going to run whether this runs or this runs and in both cases want to set is loading to false so we would say state do is loading and set that to false okay now this is not reassigning it this would be reassigning it State equals something I'm just taking an a value in the object or a property in the state object and and setting that that's perfectly fine all right so let's save that and uh let's see that's not working and that's because that's because down here um for job we want to say here state. jobs and then over here where we get the length we want to say state. jobs there we go so now that's working if I go to jobs that's working so again this is kind of um you know this is optional you don't have to do it this way but I just I just want to show you guys other ways of doing it now we should probably use that that loading so let's um let's set up a spinner and there's a an extension called view spinner that's pretty cool it's very easy to use so I'm just going to install npm install and it's called view Dash spinner very very simple extension now we do need to I believe we have to add the CSS file is that right um no maybe we don't actually yeah I don't think I don't think we need to add that um so what we'll do is bring in up at the top here say import now there's different types of spinners you can bring in I'm going to bring in the post pulse loader from and that's going to be from view spinner slash Source SL puls loader. viw okay so we're bringing that in and then let's go down here to the template and where I want to put this is right under the H2 so I'm going to say show loading spinner uh while loading is true okay so we can use the the V if so let's have a div and let's say v-if set that to State don't forget the state and then dot is loading so if that's true and I also want to add a couple classes on this so we're going to do text- Center and let's do text- gray- 500 and py- 6 and then in that div I'm just going to put the pulse load all right so that's if it's loading and then down here where we have the the grid with the job listing let's just put a comment here so we'll say show job listing when done loading so we can use V else here so v- else and that should be all we need to add here so if I reload you can see real quick three dots so it'll be there and it'll be here all right so now what I want to do is the single page right so we'll come back to that because right now this is all just HTML so let's go into the job uh where is it the job View and if you want you could put this in a separate component if you don't want to put it all in a view file but I I assume it's I mean it's a component so we'll just do it here now I'm going to use reactive just because I use used it in the job listings if you want to use ref you can so like I said it's all preference U so what I'm going to import from here is going to be the pulse loader so pulse loader from and that's view spinner Source pulse loader and then I'm also going to import axios because we need to make a request for the single job listing and then let's go under that and I'm going to also import actually we'll just this up here and I usually like to put axios at the bottom so I'm going to import reactive and then we're also going to need on mounted from whoops on mounted from View and from The View router let's import use r rout so we're going to bring in US Route and we're going to bring in router link okay all right now let's see we're going to initialize use route so route set that to use route now the reason I'm doing this is because we need to get what is going on here why did I say import const the reason I'm doing this is because we need to get the ID from here and we need to make the request to the back end with that ID and way we get that ID is with this route variable so I'm going to say cons job ID and I'm going to set that to Route Dot and the way we do it is params and then do ID and the reason it's ID is because in the router right here is what I used I used ID if I use like slug or something here then it would be pam. slug so next let's create our state so we're going to use reactive and again if you want to use ref you can if you want to use Primitives you can but I'm going to just I kind of like the idea of just having a state object so let's say job which will be just an empty object to begin with and then is loading set that to true to begin with and then let's do our on mounted I'll actually copy it from uh from the job listings so this on mounted right here I'm just going to grab this whole thing and paste that in except now we're making a request to jobs slash and then the ID so let's actually change change this to back Tex and we'll do job slash and then job ID okay and then let's see State this is going to be state.job not jobs and then this stuff we'll just say error fetching job and that should do it okay now down here let's let's figure out where we're going to put the loader I guess I'm just going to put it so uh we only want to show this if the if loading is not true so why don't we go into the section and add a v if so we'll say V if not state do is loading and then down at the bottom let's just put actually know what I'll do is grab from here yeah just grab this and it'll go under the section and then paste that in so we're just saying if uh actually here we want to say if else and get rid of this all right so if it's not loading it'll show that if it is loading then it'll show this and if I reload you can see the dots now we want to make this obviously Dynamic we want to have the actual data so let's go back to the top of the template and just kind of go down so we have fulltime let's change that to interpolation of state do job dot what is this type and you can see it still says fulltime let's change this I'm just going to copy that and then we'll change that to title senior view developer and then we have the location which is going to be right here so oops job location just make sure this is working right so this one's myami yeah there we go so Miami good um the description change that description then we got wait what is this oh this is um wait what is that what did I just change oh I changed the title idiot description all right and then we get the salary so we're just going to replace this part of it with job. salary then we got in the sidebar company info so this is the name the title of the I think it's the what is it the title the name let me check so jobs yeah so we have company object and then name so let's replace that with job dot job. companyname okay so that changed the vineer solution ions and then I'm just going to copy this replace this with the company do description contact email change that whoops I just copied it change that with company. contact email okay that changed and then this one here the phone is going to be company do contact phone then down here we have the manage job now we're going to want to use a router link here did I bring that in yeah I did all right so anywhere where we have a tags which should just be the edit job so we're going to change this to router link add the ending tag all right and then we're going to change the the hre to a two attribute or a two prop and then this is going to go to since it's an edit um what do we want this to go to so we can put back ticks in here and then we can say slash jobs slash edit slash and then the um job ID I believe that oh actually you know what let's not do that let's do state. job. ID so we're getting the ID from the database or from the back end and then if I hit edit job yeah that's that's not working what did I do wrong here um can I not use back ticks oh two needs to have a colon in front of it there we go so it's going to jobs edit 2 which is what we want okay so this is all now Dynamic so if I click on any of these it's going to show me the actual data coming from the back end now let's do the the go back button which is going to be pretty simple um we'll just create a separate component for that so let's go to components right here and let's create back button. viw okay we'll add our template now the back button we can just get that from the theme files if we go to job. HTML up at the top here there's this this right here this section for go back I'm going to just grab that and I'm going to put that in the template and since there's a link so there there's a link and we'll also change the icon class so let's bring in router link and then let's change that to router link let's change this to two and we want to go back to slash jobs and then for the icon let's get rid of that and let's do it's going to be pi and what is it going to be the arrow so Pi Dash let's see arrow and I want to do an arrow left so we'll do Circle Arrow left let's see what that looks like so will bring the back button into the job View and then I'm going to put that right above the section so back button okay so let's add a little bit of spacing after that icon so in the back button We'll add what do we want M margin right three maybe yeah I think that's good now the next thing I want to show you is proxying because right now we have two requests we have one in the job view making it to the the single job and then we have one in job listings to jobs now you might have you know 5 10 15 different requests and you don't want to have this HTTP Local Host 8000 cuz what happens when you deploy so what we can do is add a proxy and say instead of using Local Host 8000 we can just use like slash API so we can do that in the v um uh where is it the V config so I'm going to open that up and we're going to add this to the server object so right here let's add proxy and proxy is going to be set to an object and I'm going to do slash API because that's that's what I want to use is slash API slash and then jobs or or whatever so we set that to an object and then we're going to add the Target and the target is going to be HTTP Local Host and then M's 8,000 if you used 5,000 for your server then that's what you want to put and then we're going to add change origin set that to true and then we're going to have a rewrite uh rewrite path and this is just what's in the documentation we're going to say path. replace because what we're doing is replacing we're going to like I said replace this with uh we want to replace it with a slash API so in here it takes a regular expression and we can just put two forward slashes and then the carrot so we're going to say begins with and then we want to use um escaping for the next slash so back slash escapes the forward slash and then API slash and then we want to um put pass in just an empty string wait a minute is that no that's not right that shouldn't be there that should do it all right so just copy this and then what we can do is go back to where we make those requests like in the job View and I should now be able to replace this with API or SL API SL jobs and then same thing in the um job listings replace this with Slash API and then just reload so the jobs view is still working and the jobs listing is working and now I'm not uh explicitly saying Local Host 8,000 so that's proxying so let's start to work on the ad job page I know this is a this is a long crash course but I wanted to just I wanted to fit all this stuff into it so and if you've made it this far congratulations uh most people don't these days at least I feel like I feel like people just don't have attention spans anymore they want they want to learn everything through uh 30 second Tik Tok videos so let's create I sound like an like a grumpy old man so let's create a new view for this so in views we'll say add job view. [Music] Vue and let's add um for now I'm just going to put template and I just want to get it displayed so I'm just going to say add job like that and then bring it into our router let's close the rest of the stuff up go into our router index bring in the view add a route for it we'll go right here path is going to be slash job slad name is going to be add job component is going to be add job view so now we can see add job so this is going to be a form pretty long form so we're not definitely not not going to type it out let's grab it from the theme files so ad job HTML and go past the navbar to the section and we're going to grab the whole section again I tried to make the theme files easy so that everything is just laid out in sections that you can just take so we'll take that let's paste that into the template save it and there we go so we have our form now now obviously we want to make this form function so couple things um now forms are where I do like to use reactive and over ref right so because that otherwise I'd be creating a primitive for every single field and even in react I'll have an object in Ed State rather than you know a separate state for each one so let's add our script and let's import reactive okay and then I'm going to call this variable form set that to reactive and pass in an object and we're going to have all the fields so type now type I want it to be filled with fulltime first uh rather than just being empty I want it to show like that full time so I'm going to add that as a default value and then title is going this is going to be empty everything else is pretty much just going to be an empty string description we have salary we have uh location and then company company is going to be an object and in that we'll have name description contact email and contact phone okay so that's our data or State uh what else so we want to to to bind these to the inputs and that's where we use V model right so let's come down here to the first input well it's actually a select but we're going to add to this v- model and we're going to set that to form. type all right so if I save that it should still say fulltime if I were to change this to part-time then it'll say part-time now it has to it have this has to match one of the the actual options so it has to be one of these or it's not going to show right if I put um part-time one and save it's not going to show it it has to match one of those so that's the select then let's go to the name uh yeah is it n yeah name and then we'll add v- model and set that to form. name right we'll go to the next one the description which is a text area and V model set that to form. description then we get the salary which is a select uh we'll go right here V model set that to salary not salary job um form. salary then we got the location location and then company info so we have the the company uh what's this this is going to be company name so let's add V model set that to form. companyname then we get the description make sure you put it in the the input or text area not in the label so here let's say [Music] vodel form. company dot description contact email so v-model form. company. contact email and then finally the phone so form. company do contact phone all right and if we put like any default values like for Loc if I say hello and I look in location it says hello so these are they're bound together now the next step is to add the function or the submit event and point it to a function so let's go to the form and let's say at submit or you could use V on and we're going to do uh submit. prevent to prevent the default behavior and let's set that to let's say handle submit all right so with that we're going to come up here under the form the bottom of the script here and let's say const handle submit okay and then we're going to be making a request so let's make this asynchronous and then just for now let's just see if we can get if it actually works so we'll do a console log and I should be able to get like form. tile let's try that all right so if I put something in here I think these are required so we need to just put in some dummy stuff here and just put whatever it doesn't matter so add job and then I'm going to look in the console and uh let's see we should see the title so I'm getting nothing did I put a title in I did oh you know what did I put title or name I did I put name so this right here job listing name should actually be that should be form title as the as the V model so I'm going to have to submit this again with a title and there we go all right so I just had the I had the V model wrong so we're up to this point where we can actually where we have the the data bound to the inputs we can get the data when we submit like that so why don't we create a new job object and let's set this to let's say title set that to form. tile which we just saw that we can get type set to form type uh what else location description uh salary what's next company which is an object so that's going to be we have name which is form. company name and what's next description form do company. description contact email and contact phone all right so that gives us the new job and let's just test that out now make sure that we we get that and make sure all the the fields are actually filled in so new job and this is kind of a pain to actually I think I have yeah I have the fake form filler I don't know why I'm not using that that's a pretty good extension fake form filler just add some data in there so we have this object with company so all that stuff is good description yeah so everything looks looks good so it's it's catching the data as it should and then we want to make the request so let's do I'll just copy from uh from one of these other from the jobs view uh job view this inside the unmounted I don't want the unmounted I just want the try we don't even need the finally I guess I could have just typed it so we're going to say response but we're making a post request now so we want to say post and it's going to be the end point will be API jobs you can actually just make these quotes or you can keep back tick some people see a lot of people lately just always use back ticks um so API jobs and then we want to pass in the new job as our data and then we don't need to do this state thing um what I do want to do is add a toast so I'll say to do show toast which is like a notification and then let's router so router. push and then we'll pass in some back tick and say slash jobs slash and then from that response we want the data and we want the ID so it'll go to the the actual job that we add all right and I want to add a toast down here if there's an error so let's try that out I'm going to go ahead and just reload I'll just say test job and we can put anything in let's use the fake filler again add job let's see what did I axios is not defined so I didn't bring in axios all right let's try it again there we go so that's just all the dummy data that I just added if I go back to job listings there it is all right one thing I'm missing here is the little map icon so that's going to be in the job View and let's see right here we want to replace that let me just see what I used for that job view so it's called it's map marker all right so I want to I'm going to keep I'm actually going to change it to text XEL and then get rid of these classes and we're going to do PI and then pi- map marker and there we go all right cool so up to this point we have uh create functionality now we have read so we all we have left is edit and delete right so I want to be able to come here and click delete and delete it but before we we do that why don't we do the toast because I want a nice notification that slides in and says you know uh job has been added so to do that we're going to install a package called view toastify so let's say npm install view Das uh toastation at next make sure you put that at next or you'll get an error so now we need to initialize that in our main.js so there's two things we want to bring in here we want to bring in um we want to bring in the CSS file and the actual toast so let's say import toast oops no import toast from view- toastify and then the CSS is going to be view- toastify slist SL index.css so that'll give us the styling and then we just have to come down here and we have to do app.use and then pass in toast okay so that will give us the styling and the ability to use the the used toast hook so we're going to go back into the add form so add job View and from here let's import uh we want to import the Ed toast Hook from view toastify all right now now we need to initialize that so I'm going to go right under the form here and let's say const and call this toast set that to use toast and then wherever we want to use that we can just replace that and say toast. success so you can do success or error depending on what you know what color you want the thing to be so the message I just want to say job we'll say job added successfully and then if there's some kind of error then let's do toast. error and I'll just say job was not added and it'll console log the actual error cool so let's save that and now let's try to add another job so I'm just going to use my form filler so it's called Dennis Horn as the job listing name we can change that to like uh just like view Dev and then add job there we go so we get job added successfully in our toast and it brings us to the new the new job page so moving on we want to do the delete so let's go into that's going to be in the job view so we can close that up let's go into job View and then Let's uh let's add the button first so or we have the button but let's add the event so down at the bottom where we have the delete button I'm going to add at click and we'll set that to let's call it delete job okay and then up at the top before we create delete job I'm just going to import a couple things so we want I I want to use the toast so I'm going to say use toast and that's going to be from View toastify and then in addition to use route and router link I'm going to bring in the use router uh use router hook as well uh and then we need to initialize both of those so let's do that let's see we'll go right here and let's say const router set that to use router and then we want cons toast set that to use toast and then we we'll create our delete job I'm going to put that right above the unmounted so const delete job use an arrow function and this is also going to be a synchronous because we're using axios and we'll have a TR catch and in the try let's await axios do did I bring in axios I think I did yeah so we want to await axios do delete cuz we're making a delete request now and the endpoint let's actually use back ticks for this and it's going to be SL API SL jobs slash and then the job ID all right so that'll make the request and then let's say toast. success and we'll say job deleted or job deleted successfully and then after that I want to redirect to the jobs page so this is where we can use router. push and let's go to slash jobs and then in the catch here let's do console dot we'll do console. error and we'll say error deleting job and let's also show the error and then after that we'll do a toast so toast. error and let's say um job just say job not deleted all right so I think that should do it let's come back over here I'm just going to give it a Reload and let's click delete job job deleted success F we probably should have a confirmation so let's let's um yeah we'll do that as well so we'll say const confirm set that equal to window. [Music] confirm and we'll say are you sure you want to delete this job and then under underneath that we'll say if confirm then we want to do this all right so let's go to this one delete job if I say cancel it doesn't delete if I say okay then it deletes and I get redirected and we get our toast all right so that was pretty easy now the last major piece of functionality is the edit so let's create the edit View view so in views I'm going to create edit job view. viu and for now I'm just going to put a template in here and just say edit job and then we're going to add it to the router so router index.js let's bring that view in so import edit job View and then we'll add it down here uh I'm just going to copy this and we want it to go to jobs sledit slid for the name we'll do edit djob and then we want edit job View for the component all right so now if I go to one of these and I click the edit button it should bring you to the correct URL now for the form we might as well copy the the whole ad job view page because it's similar so I'm going to just grab everything in the ad job View and paste it in here and then let's change like um the button text we'll change that to update job and there's I believe there's a heading as well so this right here instead of add job we'll say edit job all right and then let's see there's going to be some stuff that we need to bring in um actually yeah so do we have we need to use route from the router because we need to get the ID from the URL so let's say import use route and let's also do use router and then we'll go right here and initialize those so cons route equals use route and const router equals use router and then we need the job ID so let's say const job ID and we can get that with route. params doid so that'll give us the ID and then we're going to need some state so let's see we have our obviously we have our form our form Fields state but we're also going to create a state object we're going to use reactive pass in our object and the job which is going to be just an empty object to begin with and we'll do is loading and set that to true to begin with now we need to fetch the job so that we can fill the form Fields so we're going to need on mounted as well so let's bring that in from view so in addition to reactive we'll bring in on mounted and then let's put that down at the bottom of the script here so we want to go under handle submit and let's say on mounted we're going to pass in an async arrow function and let's make the request so we'll say cons response actually let's put this in a try catch all right so const resp response set that to await axios and we're going to make a get request because we're getting the job and let's use backtick SL API SL job slash and then the job ID which comes from the URL and then we're going to assign state.job to the response.data okay now to populate the forms or populate the inputs what we can do is just set form. type set that to state. job. type okay and then we'll do form. tile job title we have form. description state job description and form do salary state job salary and the location location and then we have the the company stuff so form. compan which is an object so we want the name and that's going to be state. job. company. name and and I'll just copy this down so in addition to the name we have the What description so we'll grab this and this description okay then the next one is going to be what contact email and then we have contact phone all right so that should fill the forms let's just add in the catch here um we'll do a console. error and we'll say error fetching job and the actual error and then we'll add a finally here because once once that's done we want to set state. is loading to false all right so let's see what we got here identify a router has already been declared oh bring in router here so I you can do you can either do this use this router yeah you can either do that or use the hook I guess I guess we'll just use that so we don't have to initialize it I think that'll work okay so we can see that these form fields are all filled which is good now the next step is to do the handle submit because right now it's uh it's making a post request we need to make a put request so let's change the the name of this because it's not a new job it's an updated job and then this stuff can all stay the same because we're still getting it from the form and let's see down here we're going to say response equals axios dop put and then the URL needs the ID so let's make this into back Texs and let's do slash and say job ID and then pass in updated job and then for this the toast we'll say job updated successfully and then for the push we'll just yeah we'll do the same thing and yeah I think I think that should do it so let's try it we'll save it and then I'm going to just change something so let's see which one should I change we'll go to senior view developer click edit job and I'm just going to change it to senior view Dev and we'll change change the salary to let's say 90 to 100 and then update job job updated successfully senior view Dev and 90 to 100 so now we can update our jobs so we have full crud functionality all right so that's that's it I mean that's our application I know it's very simple in functionality but we there's there's a lot that you learned here that you're going to use in every single one of your your vue.js single page applications now when it comes to deployment I actually am going to show you how to deploy this to netfi um versell is another great service both of them have very generous freets however when we if we deploy this the jobs aren't actually going to show up because remember we're using Json server which is a it's a local mock rest API so we're not going to be able to access it from um from a production website but I want to show you the process just so you know for your own projects but there's really no sense in deploying this because it uses Json server all right um so let's let's uh go into the terminal here we can close this up and what you're going to do first is well you actually you don't have to do this step because the build command is actually ran on netlify but you can run npm run build yourself and it says building for production and it's going to what it's going to do do is create a disc folder with all your static assets okay so if you were if you were deploying to like a shared host or something like that then you could upload the disc content now if you want to preview your production deployment that's what npm run preview is for so if I do that it starts on 4173 and it just gives you your production which is the same it's the same thing as the dev server same content and all that um but it is the production uh production build so now what you would do if you want to deploy to netlify is create a GitHub repo and push to GitHub I'm not going to do that part because you guys should know how to do that just get your repo up and then let's go to nfy and I'm going to log in and then you would create uh and I already have my my uh GitHub repo up so you would go to add new site import from GitHub and then search for your repo so let's see I want this right here view crash 2024 site name could say like view- jobs project okay and then here you can see it's it's going to deploy the main branch and it's going to run npm run build on the server that's why you don't have to run it before deployment and then it's going to publish the disc directory okay so if you had a different command then you would change this or if you had a different uh production folder you would change that but it's already what we need we have no environment variables so we should be all set to deploy and this might take a couple minutes so uh what I'll do is pause the video and I'll come back when it's done all right cool so it's done so if I click on the The Domain here it's going to open up and again it's not going to show the jobs because we no longer are on the local server where we have Jason server running right if I go to jobs there's nothing there uh and if I were to open up the network tab you'll see that there's just an error fetching the jobs well that's the console but if I go to network and reload and it's trying to get if we go to right here um yeah it's trying to get from API jobs but remember that's that's Jason server which of course we didn't deploy so it's getting a 44 but that's the process of deployment and when you update your GitHub repo it should automatically Deploy on netlify which is really cool but that's it guys I hope that you learned a lot from this and I will see you next time