Nuxt 3 Server Routes CRUD w/ MongoDB | TailwindCSS | HeadlessUI | Pinia | Vue 3 Easy Datatable

hey everybody so today I want to do this video on Knox they just released RC 10 for version 3 and I want to show how how you can actually use the server routes to interact with your mongodatabase right so we have two pages here books and authors and I can go ahead and create a book and I can create an author to create an author just click this add author button let's see solido is or auto click on create and solido gets added to the database we can edit her name let's say sorry Smith open it up and you can see her name got updated in the table um let's close this we can go over to books and add a new book let's say Sally's life is the name of the book and we can search for an author here um this is headless UI in action the combo box component uh so we can just search for Sally select her and then select uh published it put in some ISBN of the sort put in the page point and click create and that will uh sorry Sally's live book two or table we can also click on this thing to edit the book let's say there's a new author or someone helped her to write this book uh we can just select that person and we see Sally Smith plus one more and then we can just click update and that book gets updated um for this application we'll be using headless UI children CSS Knox 30 rc10 um the notification library and view three easy data table to search for different items in the table [Music] and we'll be using pinia as well for our state management and we'll have all the actions that will actually interact with the database or the API and then the API will in turn interact with the database so without further Ado let's just jump straight into creating our application all right so to get started uh we can just visit the Knox 3 websites and go to the installation section and you can see here for a new project they ask you to run npx noxy in it and name of your application so you can just copy this and go back to our vs code project and once we're here we can just paste that in in our case uh because we already have this folder created we're just going to use npx nox in it dots and this dot just tells the command line tool now we want to install all the files in this current directory so if you press enter if this is your first time doing this it may ask you to download the dependencies temporarily but if not then you'll see this message then we can just run npm install to install all the dependencies to one all right so after we've installed the dependencies needed for Knox we can just go ahead and start adding the dependencies that we'll need for our project and that will include the pineal package Pina Knox Tailwind CSS forms V validate and Vivaldi rules digits Joy Mongoose nox icon and view three easy data table and view three tossification so let's just go ahead and add these packages so this is a list of all the dependencies I will need headless UI View um they provide a set of components that make your life easy as a developer and the very compatible with Tailwind CSS one goes to communicate with our mongodb database joy for validation headless UI children CSS works very well with lsui View um children CSS forms to add some basic styles to our form elements we validate and we validate rules um will help us with form validation view 3 easy data table will give us a table that we can search and sort information with view toast notification will help us with providing feedback to the user and notes icon will help us to add icons to or application easily so let's just press enter and add these dependencies all right so now that our dependencies are added we can go ahead and add pineal to our application so we can just go to the opinion website and and this to our application so it's npm install our pinion nooks and we may run into our problem while installing this um there's a recent problem with rc10 and Pina slash Knox let's see if that will happen all right good so there was no issue so let's just go ahead and start our application and see if everything is okay so do npm run depth and then go to localhost 3000 and see if everything is fine all right so our application is running so I guess we're okay all right so notice our application is running properly I think the best place to start is on or server so we're going to go ahead and create a server folder that will have our API endpoints as well as other folders that will help us to connect to the database and provide validation and so on so the nox website for version 3 actually provides a pretty good guide on how to get this setup one started and it's on this page where it talks about the server directory so you can just visit this webpage and then you'll learn as much as there is to learn about the server directory and Knox 3. so you can see where they have all of the documentation here so any topic that you want to learn about you can just visit this page and you'll be sure to learn about it um it may help if you also learn about the fetch component that's Auto imported and the H3 package that's used to power the um server directory so we can just jump back to vs code and start creating our server directory to communicate with our database so back to vs code let's just minimize this and the first thing we want to do is to create a directory for our server API so uh we can just click this icon right here to create a new file server slash API slash books slash index.ts and how this works is if we have the server folder everything within this API folder will be treated as an endpoint so books index will be or URL slash books and that's how you actually access this books and points within your server API uh nox actually requires us to export a default function so we export default Define oh Define event handler and this will actually pass us an event variable I like to make it asynchronous events that returns a function all right so whatever we return from this Define event handler function is what will be returned from this endpoint so let's just restart our servo and if we should visit localhost slash API slash books we should get hello from books from that endpoint so let's just go to our server and as you can see localhost API slash books returns hello from books so back to vs code uh let's just leave this as is and we actually want to start with or mongodb connections um without connecting to the database we can't really do anything so we want to create a DOT EnV file and in this dot EnV file we want to add or database connection so if you have mongodb installed locally you can just add the URL to your database here and it should work if you don't have it installed locally then you can create an account at mongodb alas um they provide a free mongodb database and it's pretty easy to get started with you can just Google it and you'll see how to for my URI I'll be using um the local installation and this will be the link to that installation let's just call it um nox very server routes so this is the URI and this is the name of the database that we'll be using for this connection so let's just save that we may need to restart our application and then we can go to the server folder and create a new file it's going to be a DB index dot yes and here will just be connecting to our database so to connect to our database we'll actually use a Nitro plugin and what this will do is it will help us to connect to the database when the application starts and user connection throughout the application so we if you want to learn more about Nitro Plugin or Nitro itself you can just visit this website and you'll learn a lot a lot more so it's nitro.on.js.io it's right here this URL so you can just visit it and read the guides configuration and everything to learn more about it all right so here in our DB index.ts file we want to import mongoose and after importing Mongoose we want to export a default function that helps us to connect to our database so it's going to look something like this so it's export default function on a synchronous function that takes the Nitro app and we're going to pull in the use runtime config and we're going to connect to our mongod database with the URI from our config and then log connected to DV once we're connected and if there's an error we just log that error now this URI is not yet set up because we have to actually add that to our noxconfig so we can just go over to ornox config and add that runtime config so it's going to look something like this where we have runtime config and we pass in our URI and we're going to get it from the EnV file now if you want to add configuration variables for your client there is a public key that you can actually add them to so key is defined within the public uh object will be available throughout the client while the ones that aren't defined in the public objects are available to server side only so let's just delete this save that now once we are connected to our database um we will be able to perform the different operations so let's go ahead and run our application see if we get connected and if we can actually proceed to do in the different operations with or Mongoose models okay so because we haven't defined any models as yet we won't see where the connection is taking place so let's just close this and start defining our models so a model in mongodb is basically a blueprint of what you're trying to store in your database um in this application will be stored in data on authors and books so we're going to create an author model and a book model so let's start with the author model so let's create a new file I'm going to call it models and we want author dot model dot TS within this author model we want to import mongoose and then we want to Define an author schema so this schema is going to be of type Mongoose a schema it's going to we're going to define a new schema here and in this object the first object we're going to define the properties that we want to keep track of in our collection so we want the authors to have a name it has to be of type string and it's required uh we want to add options afterwards for timestamps so what this will do is it will create the created at an updated that field on each record that is stored in this collection after this schema is created we can go ahead and create a model that will be used to query information from this collection and store information in this collection so we export a default Mongoose model the name that's passed to the model function has to be of a capitalized singular version of The Collection name so this will be converted to lowercase authors in or database and we pass in this schema that we defined up here so if we save that this is the definition for or author model for book model we can just go ahead and duplicate this call it book dot model dot TS and in this one we'll also import Mongoose but the values that we're keeping track of will be a bit different so in this one we want to keep track of our title for the book it will be of type string is required the published it it'll be a date string it'll be required as well the iOS bin which is not required and an array of an array of authors so the authors will be of type uh object ID and this is just the ID of a different document in a different collection which will be from the author collection and you can see this ref key here that's telling us that we want to get these IDs from the author uh model so it's an array of object IDs but these object IDs will map to different documents within this model and we have a page count which is of type number we're getting the passing the same timestamps um option so we'll have a question that's an updated at key on each document or each record and we're exporting the model as a book model and we're passing in this schema that was created earlier so let's just change this to book hit save and that's it for our models after creating orb models we want to go ahead and create the validation so every time we try to add something to our database we want to validate the information that's coming in and we'll do that using a file called validation.ts in this file we'll just import The Joy Library and then we'll create two schemas so the first schema is just for authors and we're creating a joy object and this is the shape of the object it's saying that we should always get the name key inside of our object whenever we're creating an author and it should be at least three characters long and it's required for our books we'll just have a different shape where the title is required the ISBN is required the authors can be an array it can be empty because all objects within this object are all keys within this object are are optional by default so the authors array it's optional but it has to be an array if it's defined the published key it must be a date and it's required the pinch cone can be a number if it's defined so go ahead and save that and close salt lastly on our server we want to define the different API endpoints so for books we have this index dot TS file and what we want to do here is we want to return all the books from our database so it's going to be return await and you can see here we're we can just import the book model find which is a method on the model definition from Mongoose and then we want to populate all the authors so what this will do is whenever we find a book instead of returning the author ID or the IDS you are going to get all of the information for that author so let's hit save here and that's all for this endpoint now for the create endpoint we can create a file called create dot post dot TS what this dot post does is we can only send a post request to this endpoint so if we try to send uh a get request to the create endpoint it will fail with a 404. so they create that post just tells nox that hey every request I sent to this create endpoint for books will be of the type post so in here we want to import the book validation and the book model so let's go ahead and import those two files we also want to define the event handler and Export it as you can see it's returning an asynchronous function and we're going to get the body from the event so this is how you get the body from the event there's a composable called use body I think this is from H3 yes it is and you pass in the event and you get all of the body that the person sends along with this request after getting the body we can do simple validation we'll just get the error from the books email we'll call the validate method and pass in the body know if there's an error we're just going to throw an error so we're going to send this back to our client which will be your front end or if you're using Postman or some other risk client to call this endpoint you will get this error message so because Joy usually have some double quotes in their error message I just went ahead and replaced all of them with nothing so it's more human readable um we'll send a status quo to 400 and no it's not filled out it's just an error that user needs to fix so after validation we'll just go ahead and create a book inside a try catch block we'll just await book model that creates and this is a function from the model that was created down here because that's what we're importing and we'll just return to the client that hey the book was created so we can go ahead and save that and move on to the next endpoint so the next endpoint will be or update endpoint so we'll just create a file called brackets ID dot put dot CS now you may be wondering what this bracket ID does um this is how you pass parameters in the URL to the server routes so whatever you pass to books slash whatever as a put request the params will be extracted from this here so if you send box slash one two three as a put request then this will be stored in this IDE variable so in this file we want to import the validation and the book model as well and then we want to export the default Define event handler function so here we're getting the body and then we get the ID as well so you get the ID or any other param by saying event which is this dot contexts.params dot ID so if you name this something else like DOT book ID you'll have book ID right here so once you have the ID and the body uh you can perform validation again and then if there's any validation error then you can just send that back to the client otherwise you just update the book so we have another method called find by ID and update from the book model and you pass in the ID of the entity that you want to update and then the actual records that you want to update and send what this response to the client so author updated oh this should be actually both completed my bad let's save that okay so our next endpoint will be our delete endpoint and the late endpoint is much simpler it's going to follow the same pattern as the put endpoint where you have brackets ID because you want to pass an ID in the params then you say delete dot CS so in here we don't need validation so we'll just import the model and then we'll export this Define event handler so so to Define event handler function is just one that gets the ID from the params with event dot context.params ID and then we'll use a try cut try catch block to delete the book from the database and you can see here where we use this find by ID and Elites function from the model and passing the ID and this is what we send back to the client book removed so we can just go ahead and save that and for our authors it will be very similar so let me just move this uh over to this follow and you can see where our index for the authors is very similar we bring in the author model and then we just return all the authors or to create endpoints we bring in the validation on the model we get the body check for validation errors we can remove this and then we use a try catch block to create or author and send this response to the client same thing for the put we get a body under ID from the event check for validation errors and then we just use a try catch block to update the author and send this response to our client same thing for the delete endpoint we don't need this we send we get the ID from the event and then we just delete author and send this response to our client let's just close all these files I know that we're done with the API side of things we can move on to setting up or styles on tailwind and plugins and pages and all that good stuff so we can just open our nox config and add a few modules that we installed earlier to our config file here so we added the Tailwind CSS module knock cycle module and opinion module let's just save this and or or Tailwind path we're going to add a custom path so I'm going to call it assets slash main.css so we can just go ahead and create that file and in this file we're just gonna go ahead and import a few things we're going to import the Tailwind directives we're gonna import the enter font and we're just going to go ahead and save this next we want to just go ahead and add or Nitro plugin right here and as you can see it's referencing this file the DB index.ts and what this will do is once our application starts it will run the plugin that's registered here and connect to our database so once we start up our application we'll connect to the database and we should be good we also want to transpile a few of the dependencies that we installed earlier these dependencies include the Headless UI view the view justification and the Headless UI Tailwind CSS package Now to create or Tailwind config.css we can just go here and create a new file Tailwind Dot config.js and within this file we are going to add these values so this is just getting the colors from the table and package as you can see we're typing the object that's been exported here with the type of table and css.config uh we are going to set our font family to Intel we're going to set the primary color to Orange 500 and then we're going to add these two plugins the Italian CSS forms and the Italian CSS from Headway headless UI want to save that we can close and I think that's it for our nox config file we can go ahead and close this view we can just go ahead and remove the nox welcome tag and change it to Knox page once we have KNOX page here we can go ahead and create our Pages directory and add the index.view file so we'll say pages index.org View so let's just go ahead and add some classes to our home page and the only class I want to add here is the min height screen let's change this to the setup let's see if our application is running without any issues all right so we have an error here and it's saying that it can't find this module all right so let's just go ahead and install this module once that is installed we can go ahead and run npm room Dev again see if we have any issues and two so the opinion module cannot be found and for this one I found where we have to install opinion by force so we run npn ipinia dash dash Force once that is done we should be able to run the project again let's see and we can see where it's not given any errors but let's just visit our browser to see if that's the case and we can see that we have no issues in or browser and if we come back to vs code we can see where there are no issues here as well we see we're connected to the database so we should be good to go so the next step is to define the functions that will be used to communicate with our database and that's where we Define our composables that we will be using as the Pina store so let's just go ahead and close this terminal all right so before we go ahead and create our composables I just want to go ahead and bring in some plugins that we'll be using for this application so let me just bring this plugin all over here and copy it so the first file is the data tables Dot client.ts and what this is doing is registering the view3 easy data table as a global component so we export the default Define nox plugin function and then we say up Dot View up or no stop Dot View up and then we call a component function register this component and we should be able to use easy data table as a component in our application the dot client just tells nox that we only want to use this plugin on the client side since this component is not SSR friendly on to the next file is or post notification plugin that we installed earlier so we'll just import the plugin and the CSS files for the plugin and we just use it in our Nooks application again this is a client plugin so we just say dot client.ts and not we'll use this only on the client side our next file will be the V validate and we just import the rules that will be used within our application and you can see that the rules are defined here so we have required mean Min value Min is used for Strings Min values used for numbers same with Max this is for Strings this is for normals so let's move on to creating our composables so let's get a folder called composables and the composables here will be Auto imported within Linux application so we can just go ahead and bring in this use source composable and what this will do is it will Define the toast that can be used throughout our application so in order to use this all we have to do is call use First and pass oh and then call the function that we want from this composable so it's using The View tossification Library we're just importing it as trusty and then we're gonna create a variable that will store the entire import and then we'll just export it to use broader application the next thing that we want in this composables folder is the author store so let's just bring that in and as you can see here the author store is bringing in defined store from pinia the author interface which is not defined as yet and use those from this composable we Define opinion store by saying use author store opinion stated that this convention is the best way to go so whatever store you're creating you just started with use and end it with store oh so I'm using the options format you can also use a setup format you can just visit the pinion docs and you'll see how to use the setup format so we just use options format here the option format allows us to use State actions and get us but we're not using any Getters in this project so the state should be a function that returns an object with all other values so you can see I'm returning on authors uh variable from the store and it is of type interface author so let me just go ahead and grab those interfaces so we don't have these errors and it should be in the root of the project so the types book on author so an author can have a name which is required on underscore ID which is the mongodb ID and can be present can be absent same thing for the values up here title ISBN page count published and author should always be present and the ID can be upset so for the actions you can see where we have the different options to communicate with the API endpoints we have the get all which will just uh send the fetch request and this fetch is a built-in composable from Knox you can learn more about it on the website so if we visit the API page of the V3 Knox documentation we can go down to utils and then Fetch and we should see the documentation there also recommend that you look at the data fetching page right here to learn more about it so we'll just send this fetch request to API authors and when you provide no options to fetch other than the URL it will just send a get request to this endpoint once we get the results we're going to set the author's array to the data that is returned and just in the event that this action is used inside of our composable or function within your application you will get the data returned to a variable as well if there's an error we just use the use tools composable that was defined here called the error method on it and pass in the string that would be the error message for our create function inside of actions in the Auto Store we just want the name of the auto and then we're going to send a fetch request to this endpoint which is API authors create it's going to be a post request which will match this post right here and in the body we're just sending the name that's fasting so this is equivalent to name name once that's done if there's an error we'll just display that error but if it's successful we'll go ahead and get all of the authors and then short this toast message also created for or updates method in actions we will accept an ID which is the ID and the name of the author that you're updating it to so we'll send the fetch request to API authors and the ID which will be stored in here so id.put it will be a put request and we're sending the name of the author the updated name of the author in this request uh the same applies the catch will display the error message and if it's successful then we'll just display that the author was updated to the user application all of the updated authors to delete an author we call this remove function within actions and we'll pass in the ID of the author that we want to remove we will send a fetch request to API authors and the ID of the author which will be stored here which in within this ID variable inside the brackets for this delete request and once it's done we'll get all of the authors and show this message to or client so that's it for the author store or the bookstore it's very similar let's bring that in so now we're just going to go ahead and create our components directory and this will store all of the components that we'll use throughout your application the first one I want to create is actually the input component because I think that's very important so let's go ahead and create a file called form input Dot View and inside this form go ahead and create our template changes to setup saved up I don't think we need this style so here we're defining a form component now for a form component we need a label an input field and since we're using V validate we're going to need a slot for display and error messages so we can just go ahead and Define a div here [Music] class with full and then inside this we want a label now we're going to give the four attribute on the label the value of the ID attribute that's passed in so we're going to say attrs attributes the ID so this should be bound to the ID attribute that's passed in and then we want to display the label here this label should only be displayed if the label attribute was passed to this component now to tell this common component that it should expect the layer attribute we have to create a prop or some props so we're going to say con consprops is equal to Define props and we can pass in an object or an array of strings first one is going to be label and it should be a string so this is telling this component that hey look up for this label prop the second prop should be the name and it should be a string this is one that's required by V validate next prop is going to be a set of rules this is used by Viva late as well and it will let the input value you know what to validate against our next prop will be the model value and this model value will be of type string or number if I can spell right and whenever we use V model on a component it passes the model value prop and emits an event that's called update colon model value so we'll actually see that update model value function in action soon but these are all the props that we need for this component we also want to import the use of field from V validate so let's go use field and this is what we will use to send back the value from this component to our parent component whenever it's used within our application let me just bring this code in so we're getting the error message and value from the use field import here and for the use field we have to pass the name prop and the rules that we want to use on this field so the name prop is coming from props.name it has to be a reference or maybe ref as you can see here so it's a string a number that's the type string or a number and the name has to be of um reference type string the rules maybe ref rules expression string or number and then we can pass some options which is this object right here so the initial value for this input field will be your props on model value like I said earlier when you use V model on a component it passes in this model value so in your parent component if your V modeling to a variable that has a value defined it will be passed down to this component label is what's used in the error message so we are saying that hey for the error message for this field use the label if that's not defined then you use the name let's go ahead and save that for or label we'll just have a class of label and for input we'll just go ahead and V model the input value to this value that's returned from use field that way use field is in charge of emitting the updated value and displaying the error message to our parent component the vimbine attributes dollar sign attributes is just telling us that whatever values come from the parent component just bind them to this input tag and we're given as a class of input for displaying the error message we are defining this dot as a transparent um that that way we won't have this crazy jump in whenever the error message is not there um and then we just want to display the error message right here as a red small text so we can go ahead and save that and this is our input component uh to make this work we have to define the different styles and to define the Styles I'm just going to go ahead and use the layer directive from Tailwind CSS so we can say a layer and I want to Define them in the components layer and this is an object so for input and label this is the code for both of them for each input we want to apply a width of fall give it a border of 300 rounded MD which is 6 pixels uh whenever it's focused we want the water to be off color primary which is that orange color that we defined in or tailoring config you want the text to be small once it's focused wanting to be 4 which equates to how many pixels is this four pixels and then Focus we want to apply these Styles as well so we want the color to be of primary with a velocity of 30 percent and we want the border to be uh primary of 50 we also want to add padding of 2.5 all around to this input class same thing applies for the label we want to have the label be inline block have a margin bottom of one we want it takes to be small and it takes to be gray 600 so let's go ahead and save this for our next component we want to create the author input and this component is going to be a combo box from headless CLI what it will do is display the names of all the authors so we can just search and select the author that we want to add to each book that we're creating so we're just going to say author input and let me go ahead and just bring in the code and explain what's happening so in or setup function we have all of these components coming in from headless UI so we have the combo box label the combo box itself which is the parent component the combo box input and this component is a quantity that you type the value in the combo box options that will hold all of the options available so this is the parent for the different author options this is a single option within this component and the combo box button is usually placed next to the combo box input once you click on this you will see the list of all the options that are available so here we are instantiating the auto store so from the composable that says author store we're just instantiating that here and then we're going to use async data from uh nox this is auto imported we are going to give it the 100 law which is this function that returns all of the authors so it's going to call the get all function on the author store which is this one this will populate the auto store with all the authors that we have in our database and we're just passing this option initial cache to files if we don't pass in this option I realize that we have this problem where if we add a new author and we don't reload the page we want call this missing data function every time the component is created so the search value will be the search value that stores the value that the user types in and this get display method is just used to show a value inside the input so instead of displaying all of the author names we're just going to go ahead and get the authors that are already selected which will be an array because we're going to set the multiple prop on the combo box to accept more than one author if there is nothing then we just return nothing uh if we have at least one person then we're gonna go ahead and check the authors in the Auto Store and find the one where the ID uh much as the author and the author store and return the name if we have more than one we just return this first person that we found plus the number of other authors that are actually being stored in this component uh if it's not more than one authors that were selected then we just go ahead and return this a single author for the last function in our setup uh script right here we just gonna display the uh filtered authors so whenever the user type something in that combo input we'll just go ahead and return the value based on whatever time what they're typing so if the query value is empty we just return all the authors if it's not empty then we just go ahead and filter out all the authors whose name that's a lowercase includes the query value to lowercase up to the templates you can see here where we're defining the combo box this is the parent uh component from headless UI it gives us the open value as a slot and we can pass this multiple prop to say hey we want to select more than one value in this combo box the relative styling is for all the elements within the combo box and you can see we have a combo box label here that says author and we give it the class of a label which was defined within the components here for the combo box input we have a placeholder which is search here uh we give it a class of input for uniformity input was defined here and a change so whenever the value here changes then we call this function where the query is equal to the value that's passed back from this change event the display value is this get display function that we describe down here where inside the input will just show the name of the first person if only one person was selected and if more than one person was selected we show the first person's name plus however many more people were selected for the combo box button we're positioning in this button to the extreme right of the input and whenever you click on this thing we have a dynamic class here that takes this open prop and we say if the combo Box is open then we want to rotate this by 180 if not we do nothing return to the original position we're using the icon component here shout out to athenox for this component it's really cool because you can use any icon from iconify website and the plugin that I'm using to display the icon here is actually one from Anthony Foo I think let's see I can if I yeah iconify intellisense is the name of the plugin so whenever you type in an icon that's from the I so whenever you type in an icon that's from the Icon as website it will just show that icon within your code editor in vs code uh next we have the combo box options and like I said this is just the parent that holds all of the options uh as you can see the Tailwind Styles here it's absolute has a weight of fall the background is white there's a little border and it's rounded with a shadow uh for this part we're just saying that if there is no results whenever the user types in some name or the sort then we'll just show this text that says hey no Auto was found with the bird that you typed in if we have results then we just Loop over each of them and display the author's name so you can see here where we're checking within the filtered authors component to say hey display all of the authors the key is going to be the author ID and the value should be the ID of that author uh while developing I realized that using objects for the value is not very smart it's always best to use a primitive value so you might want to keep that in mind spent a lot of time trying to figure out why the values coming back from the database weren't being marked in the combo box option and then I realized that the value was like this instead of being a primitive value which this is a string so it marked perfectly when I was getting the values from the database for the list items uh you can see where we applied a few Styles put in cursor to pointer and then the UI active that you're seeing here this is coming from this plugin that we installed earlier endless UI children CSS so you need to install this in order to use these uh classes for the Headless UI components so headless UI active so once this combo box option is active then we give it this style and the active for the combo box is whenever you are hovering over it if it's selected meaning it's a part of the V module or a part of this value then it will have a background or primary and the text will be white the Styles here are are applied to this spine as well that's basically it for the author component let me go ahead and close these or our next component we're going to create a global header that will be used throughout your application so in the components directory I'm going to go ahead and add the nav header component and explain what's happening so in our script setup you can see where we have this uh menu ref and it's just an array of objects with the name and a link so the name books this will be displayed to be front-end user and this is the link that will this is the location that you will go to if you click on it same thing for authors we are also using a scope style here for the active links um you can see where we're just saying that hey the text should be primary once we're on the page that has wrote a link active and Link class available on the element background should be primary 50 and the text should be primary up here we have the header the header just have a few music styles with full border bottom border grade 200 so this is just coloring the board at the bottom uh the background should be white with an opacity of 50. that's what this slash 50 is for and we want it to be blurred uh within this header is where we have the parent component for all the elements and we're just saying that hey the mark switch should be 7xl which equates to 100 1280 pixels it should be in the middle that's why this MX Auto is for put in height uh it's a flex container wood items a centered and justifiers between first element is going to be or icon so it's going to be called crud and we just add in the text Excel style and font semi board style to this uh Knox link and as you can see it's going to the home page next We're looping over the menu items in this enough tag and we want this to be Flex items as well so we have the Navas effects container and the SpaceX is just saying that hey add uh this amount of space between each element so we have a template here we Loop over the items in the menu and just delete that Loop over items in the menu uh give it a key and then we want to display an AUX link for each item so we add a few styles to this nox link and display the name which will be equivalent to this within minox link and then the two prop is going to this location which is link so after our nav component we want to create the models that will be used to add an author and a book tool or application so we're gonna go ahead and start with our author model so let me just bring this in and explain what's happening as always we start with or setup script so we're going to go ahead and import uh these components from headless UI the dialog the dialog panel dialogue title the transition root and transition child we also want to import the use form from V validate and this will help us with form validation and submitting our form data as you can see here again we instantiated the auto store which is from pineal and created a reference to the author and relentable we're just using this author reference to store the values coming back from the database whenever we're editing the author here we're getting the 100 submit function from use form and this will help us with validation and we're setting the initial values to the author reference up here so the submit author function is equal to the 100 submit that comes from use form and this accepts the function that will trigger whenever we submit our form so it's an asynchronous function that passes the values from the form and the context of the form so we first check if the author value has the underscore ID meaning it's a value from our database and we're editing it if it doesn't have this ID then we're going to create a new author so we can see where we call the create function from our auto store which was defined in Pina and then we passed the values which would be the name value from this values uh property that was passed in from the use forms handle submit function the closed model is a function that's defined on here and all it does is is clearly author value and set the open value for the model to false if we don't have this IDE then we're going to update the author by calling the update method on the auto store and sending the ID as well as the name value to this function as soon as we're done updating the author we're going to close the model this open variable just determines if the model gets displayed or not the open model function receives an item and if this item is defined then we're gonna set the author value up here to the item that's passed in and then we're going to open the model last but not least for the setup function we're going to expose a few functions to the parent component the functions that we're exposing are the open model and closed model so whenever we create a reference if we import this Auto model inside the parent component and create a reference we'll be able to call uh the reference dots close model or open model to open or close the model and you'll see that in action soon now up to the templates we have the transition root component from headless UI and we have the show prop which accepts the open variable that we created down here Horizon here so this is true the transition will be displayed if it's false it won't be displayed now the dialog component we are passing this as prop and we want to render this as a div uh we're given the class of relative and Z index of 20 so as it sits above a few other elements whenever the closes emitted we want to call the close function that was defined here so whenever we close the model this function will be triggered for the transition child we want to render or overlay inside of this uh transition child component and what this is what this is doing is just calling this element and it's going to appear smoothly on our page so we don't have the issue of uh just jumping on and jumping off so the transitions that we're defining are here so interactive it's going to have a duration of 200 leave active is going to have a duration of 200 enter from zero opacity and leave to zero opacity for positioning the dialog itself we have these divs and classes so it's going to be fixed instead of 0 and overflow y of Auto and the container that's folding the dialog panel or the dialog content is going to be a fixed item uh it's going to be centered it's going to have a Min height of full and a pattern of four we have the Transcendent child component here again which is going to determine how or dialog panel will be displayed and you can see we Define the different properties here for entering and leaving the dialog panel is going to have a width of full um minimum weight of 260 pixels this is called an arbitrary value until in CSS put in background Shadow and it's going to be rounded for the dialogue title if the author has an ID we're assuming that it's going to be updated and we're gonna display updates instead of create same thing here again if the author has an ID and this author is just the variable we defined down here this reference so if there's an ID property on this author we're gonna say hey this is coming from the database let's update instead of create uh for the also we have a form that whenever it's submitted it's going to call the submit author function which is this one that was defined on here and this is the form input that we created earlier as you can see remember we added the V button attributes here to this so whenever we put any attribute on this component is going to be bound to the input tag right here or the input element right here so the V model is going to be author.name it's going to be model to author name rules it's acquired the label is going to be named type is going to be a text the name is going to be name and the ID is going to be also so the buttons down here for this model is going to be a cancel button and it's going to call the close model function whenever it's clicked and this button is of type submit so this is going to submit the form and it's going to have a class of submit that we're going to Define right now in our main.css file so the button class is going to be like this we're just going to apply all of these Tailwind CSS Styles and wherever we call BTN as a class in our application it will apply these Styles the reason why we do all of these Styles inside of the components layer is so that we can actually override them in line within or markup so if I don't want the pattern to be 2.5 on the input within my markup I can just go ahead and go to the inputs and put whatever pattern I want here and this will override whatever is in here so that's it for the author model uh let's just go ahead and close that and create or book model so the book model is going to be very similar it's the same dialog with the same classes uh just a few more input Fields as you can see here we have we have the overlay we have the transition child we have the dialog panel um for the book it's doing the same thing with ID say hey are we updating or creating like I said earlier a few more input Fields um we're bringing in the author inputs and remodeling authors for more script setup and we're doing the same for the different inputs the buttons are basically the same we have a cancel button that closes the model and a submit button that submits the form in or setup script there are a few differences we instantiate the bookstore here author store here um we have a book riff an author's ref the submit function is more or less the same except we are passing the authors the value that's bound to the author's inputs uh separately from the values that are passed in but from the V validate form uh we're still defining the open model and closed model functions that will essentially just assign the values once the model is open and clear them once it's closed foreign S created we can go ahead and add our authors page so the authors page is pretty simple um in our setup here script setup here we are importing the header type from view3 Easy data table uh we're instantiating the auto store and then we're getting all the authors from our database the guitar function um we're creating a reference for the author model that will help us to uh create and update different authors we have a search ref and this will be used to search for different values in the table we have a remove auto function that we'll just call the remove function from our author store and we have the headers for our view three easy data table knowing the template we have just a header and another text telling the user what's happening on this page so this is the authors page and you can manage your authors here um we have the search input along with a button that allows us to add a new author to our database and once you click on it um it will call the Auto model dot open so that's this riff right here awesome model and it will call the open model function on this um ref that we exposed and in our view three easy data table components we are just wrapping this in the client only Tab and that's just telling Knox that hey this should be rendered on the client only we're passing a few uh props to this component so whenever the table is empty we want this message to be displayed no Auto found the search value should be bound to the search rep that we created down here the theme color this is the color for or orange uh the table class name is just to apply styles to this table and we're gonna use the easy table as the parent Style headers bone to the headers we defined here and the items for the table are all the authors that are coming from the auto store here we're override in a few of the columns so you can see for the name item which is equivalent to this name right here from the table headers so for this column we're gonna make the text semi ball and for the actions column which is here we are going to display this markup within that column so here you can see where we are going to display this pin icon inside of a button and for removing the auto we're going to display this trash icon and clicking on each will open the model and pass in the current author and this one will just call the remove auto function that we defined down here here in the markup we have the author model and this is the reference that will be used to perform different actions on this child component so if we just save this and npm run Dell we should be able to create a few authors in our application so you can see where we have no errors thank you so let's just jump to Chrome since we are connected to the database and if we go to the authors you can see where we have all of our markup here so the authors is right here and manager authors right there this is the input to search for different authors this is the view three easy data table component and or button to add a new author as you can see our navigation is missing so we can just go ahead and add that to our markup so back in vs4 we can just come to the app.view and add the nav header some point here let's just save that and if we go back to Chrome you can see where we have our navigation bar here I want to go to the books and I want to go to authors no this table is not looking as good as we want it to so we can just go ahead and add some styles to this table if you want to see all the variables that can be used on this table you can just go ahead and check out the view Theory easy data table website which is here and you will see all of the styles right here so these are all cells that you can use the customized look of this table so I'm just gonna go back to vs code and copy some of the styles in so assets and down here I'm just gonna go ahead and bring these styles in so these are all little Styles and the customization and I have one more save that and if we go back to Chrome we can see where the Styles got updated so this is the new set of styles for the view 3 easy data table and like I said you can go here and you'll see all of them so let's try adding an author to our database so we have a problem already I'm seeing where this thing is outlined that should not be the case so there's something wrong in or code so let's just jump back to PS4 and close this and that was in our Auto model I think the issue was that we are inheriting the styles that are passed in so to disable that we can just go and create a different script that says hey don't inherit the styles on the input that's used inside the other model component so here we need to say we don't want to inherit the attributes that are passed in and to do that we just create a second script export the default object that says inert attributes false so if we save that and go to Chrome open the add Auto model again and it's gone so we should be able to say gender click create and here we go Django was created we got our notification that the author was created to close up and if we go ahead and click on this delete one we get the notification that Jindo was removed so we can go ahead and search and go create James Brown create you can go ahead and edit the James Brown record click update so once we click on edit you realize we're using the same model but it's saying update instead of create so click on update and it updated the record in the table so now for our books uh nothing has been displayed here as yet because we haven't defined what should be displayed on the home page uh let's just go back to vs code and let's close this out and for pages on the index page we want to bring in this code for or books so here uh it's more or less the same where we have books and telling news about hey we're managing books on this page uh we have the same input that allows us to search for different books uh we're using the icon EP search and clicking on this add button will open the book model that we defined here this component uh or easy data table we're passing similar properties to this one and we have we are overriding a few more slots here so we're over at the title slot publish uh slot where we have the published date we should be using this DJs package which we did not install so let's just go ahead and install that no so we can say npmi dhis and ajs is just a library that allows us to do different stuff with uh dids it's similar to moment.js but it's smaller so it's better for our application so let me just find the datejust website so this is the datejust website you can just visit it to learn more about the package and this is the table of content you can just click on anything on run whatever you need to learn about DJs so back to vs code once that's installed we can just go ahead and run our application connect it to the database we're good so they just used to format the date that's coming back from the database and we are displaying the action buttons here again where we open the book model for editing and remove a book when you click on this trash icon the setup is very similar to that of the authors page where we import the header type from view through easy data table we get DHS in we instantiate the bookstore that we declared up here this bookstore uh we get all of the books to display them in the table we have a reference to the book model the search that will be used to get the different records in the table and we Define the table headers here lastly this function is used to remove a book from our table so if you go ahead and save that uh we've seen a few warnings um but they won't support application from working properly if we go to Chrome again we'll see all of that markup on this page if you click on add a book this is the model that we defined earlier so we can create a title click on this combo box button to get the different authors see James Brown and if you click on Jane Doe you'll see it says James Brown plus one more and remember this is coming from the component for the author input where we said that if we have more than one author we want to return the first one plus the rest so if we have two authors it will return the link to the array minus one so it will return one more two more three more Etc the publish date um date input the ISBN can be anything page count can be anything I'm clicking on create we'll create this book and add it to our table clicking on edit we'll get to change title of the book we can remove our ad different authors can change your publish date change the ISBN and we can change the page mode update that and that's all updated in our table so that's basically how you use the server API uh of course if you have an API that requires a lot more functionality it would be best if you created a separate API with something like strappy or next store Express or python or whatever you want to create your API with and communicate between um back-end front end with the fetch user sync data on different data fetching methods wooden knocks three uh if you have any questions just let me know um hopefully this helps someone over there and until next time peace

Channel: Behon Baker

Views: 11,898

Keywords: Nuxt 3, TailwindCSS, HeadlessUI, Vue 3 EasyDatatable, Pinia, Dayjs, Joi validation, MongoDb, Mongoose, VeeValidate, Nuxt Icon

Id: 1uWHDdcDZWw

Length: 96min 9sec (5769 seconds)

Published: Sat Sep 17 2022