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 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 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 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 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 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 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 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 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 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 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 setup and then our template and then I'm going to paste that into 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 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 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 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…

Transcript truncated. Watch the full video for the complete content.