Vuetify3 + Nuxt3 Setup Guide

welcome back welcome back welcome back uh today in this video I want to show you guys how I'd go about setting up the new release of beautify with a nox3 application um as you know nox3 release there um official version sometime back which is 3.0 still version um you can visit your website.nox.com and read the announcements if you want to learn more uh so beautify three is oats knocks the result and to get started uh we can go to the Knox documentation and go to the installation page here and then it will show you all the stuff that you need to get started of course node they recommend vs code the volar extension and you can enable takeover mode which is detailed on this page um enabling takeover mode is simple it's opening the command palette in vs code searching for the built-in extensions and disabling typescript but I'll show you how to do that soon um next the show you here how you can actually um disable generating the shim so you just add this to your nox config and you'll be good to go and this is how you create a new project with the npx command so npx noxy in it the name of the project and then you can you know install the dependencies Saturday of server and you'll be good so let me just show you how I'd go about doing that right now so vs code we open the terminal I have node installed you can check that by running node.v I'm running to 16. point 17.1 I think the latest version is 18 point something not sure but this one works just fine so I'm going to start I have a new folder nothing in this folder is it so npx not saying in it and a full stop this full stop is just telling the um command to generate the files in this current directory so hit enter creates the files fairly quickly um so npm I will install the dependencies know why the dependencies are being installed let me just jump over back to Chrome and go to the get started or beautify so you see it's not next next.view to 5js.com and they're showing us how to create it here with their CLI tool I imagine we're not going to use this we're going to install it manually so we're gonna grab this headbox vs code and as soon as the dependencies are done installing we'll just run the installer beautify package all right good everything is installed we have a working nox application if we should run this let me just run anything around Dev open this in Chrome and we get this this is the Knox welcome component that we have here in vs code so this knocks welcome thing this is what you get from it but they actually recommend that you replace it with your own code so let me just close this for now and head back to vs code and start adding or stop so we want to install beautify next then let's add some Dev dependencies I want so install SAS other Dev dependency and the nox icon module I also want to install custom fonts so let me just go and grab that package real quick Google fonts um this version is not working with nox3 unfortunately but there is a fix um there's an issue on the Repository this one where the fix is to install the pre-release version all right so we copy this go back to vs code and then we just add that right here hit enter and install the dependencies and then let's do some configuring so we head to the nox config file and we want to add both modules so let's add the Knox icon module and then the Google fonts module so let's just jump back to Chrome and get this setup so copy this add it to the list of modules good and we save that no we beautify we have to create a plugin so let's create plugins beautify dot CS and head back to the beautify website to see oh we should actually install this or set this up so we need this create beautify thing here so back to vs code let's import this and this is how you actually create a plugin in Nooks you export default Define nox plugin so this function not even sure if this is a function I think it's a function um first argument is the knocks up or the only argument I think is the knocks up and process could be an arrow good then inside of this you will create your beautify instance so this is going to be equal to create beautify and then if you press Ctrl on the space bar these are all the properties of this object so the first one that we want to set is SSR because we're using nox so we'll set SSR to true save that and then here we say up which is the next up and you can see when we put the dot there we get a few properties that we can configure the one that we want to actually use is the view up this is the view instance and then we want to say dot use and use beautify so with this um beautiful is added to our application but we still need to do a few more things inside of um or nox config here so first let's enable takeover mode um so we are the typescript e here and then set the shim to files and then you want to press Ctrl shift p to bring up the palette in vs code and then we will search for builds and then we select this one extensions Show built-in extensions click on that and then type in typescript and then click on this with the Cog disable workspace of course you'll have to reload and just like that takeover mode is now enabled good uh the next thing that we want to do is we want to transpile beautify so we're gonna go to the build object transpile and this should be an array and we want to add beautify to this array we also have to do a little bit of wheat configuration as well so here wheat object SSR and then we go to no external this is also an array we add beautify to this as well hit save and good uh next thing is that we want to go back to the beautify website and they are actually recommending that you import other components and directives here but I don't think that's smart I think it's best if we use the tree shaking feature which can be found here so we click on three shaking and you can see that they actually have a guide for Knox and what makes tree shaking possible is the vit plugin for beautify so this is the um npm page you can just visit it and take a look at what it does and how it works but I'll show you as well so for nox we have our top for Knox here um we want to install this package cool so let's copy it Go activate its code and we're gonna install it while that's been installed let's go and grab the code from chrome that we need in our noxconfig so we copy this import go back to vs code and we import it at the top let's close these I don't know what that is um go back to Chrome and then we have to add this to our list of modules so let's just screw up this go back to vs code and then in our modules here let's just add it and this is basically just um pushing this plugin into the Veet configuration so we can save that let's see think this is enough for this to work um let me just go ahead and run the post install command again which is nox prepared good so no errors should be good um we just got a warning saying that we haven't configured the font module so let me just go ahead and do that right now so we can say something like uh wait what's Happening Here why am I why is this all white what happened I do something wrong nope right let's run npm move on dev but before I do that let me just change this out I'm going to say this is a v up as you can see we're getting the autocomplete from vs code so that's good so this is just the application layout you can actually find this on the beautify website uh here where it shows you how you should actually go about structuring the application so it's the um V up and then up navigation bar the app bar V Main and then a container or whatever you want to put inside of vmin cool so let's jump back to vs code so we have V up the main and let's just go V container and inside the container let me add a text field name block name type of name yeah that should be good let me try and run this application let's see if it will actually work still no funds provided click on this link and head back to Chrome and see what happens and we have this very weird looking input field so something is definitely wrong uh I think what's happening is we're not importing the Styles so let's just go back to vs code and add the styles so in or nox config uh we can go CSS I think something went wrong when I paste this thing here let me see what's wrong we have that we have that hmm not sure what's wrong what no error so far so I guess I guess we're good uh let me run the first install again all right so CSS and let's import the beautify styles save that run the project again head back to Chrome and see what's happening and there we go so this looks normal somewhat normal uh let me try adding up bar to see if it will be rendered properly uh uh bar hello save that Chrome again good so beautifies added to our application and we can go ahead and use the components and directives as we see fit now if you are okay with just using the vanilla components then you can stop here but I like to customize my applications so of course I'll I'll not stop here um the next thing that I want to look at is customizing the SAS variables so if you visit this guide in the documentation it says that if you're using Veet which Nooks three users by default then you should install SAS as a div dependency we already did that at the start and it's telling you um if you want the basic usage uh you can remove this Styles import and create a main.scss file and then add this to it and customize the variables here the issue with this approach is not all the variables can be customized this way not all the component variables so for component specific values they actually recommend that you do it this way so the first thing is you should enable tree shaking which would you just know by adding this to our module section and installing the Veet plugin beautify package uh the next thing is to create the file that will hold the customize configuration or the scss file that will hold all the variables so we're gonna copy this thing right and head back to vs code let's stop it up from running close this and we're gonna come here and we're gonna create like so and paste it in no we don't have these file that's it settings.css but I'm going to put it in the assets folder so let me copy this save this and just create this file over here and in here we want to add listing from the documentation so let's copy this in back to vs code paste it in no I don't want these variables so let me just leave it like this for now and then if we restart or application we should be able to customize a few variables but let me go ahead and add the fonts so we don't get that warning um back to Chrome to the setup of the Google fonts module let me just copy this thing and back to vs code yesterday so I'm going to use let's go with pop-ins I like Poppins and bring in different font weights that we want for um the Poppins font family if you're not sure what the available weights are you can just visit the ones.google.com link and pick a phone from there pull in the required weights uh but I'm gonna go with all of them for this one so that's 100 200 good and we want to tell the module to not download the fonts we want to use the style sheet and this can be found in the documentation so if you see here this is an option we can set use style sheet to True our files um so that's what I'm gonna do here you start shade and what this will do is build itself explanatory instead of downloading the the font faces and adding them to the node manuals folder it's just going to inject the links in the head of the HTML page uh I'm going to show you that in a second um the first variable that I want to actually customize here is actually the font family so we're going to tell beautify to use pop-ins as the font family instead of Roberto so to find this variable you can actually check through the beautify documentation or you can go to the package in your node modules folder go to library or leave uh styles settings and then variables and here it is so by default it's using Roboto little sunserve so in my settings I'm going to actually create another variable called family you don't have to do it like this you can actually just put this string right here what I'm going to create this variable up here and pop pins and then Sans sir and then I'm gonna say use this family variable so we just save that you can close this and then let's see I don't think we have to do anything else let me just run the application again and see what happens there we go and we have the Poppins font loaded if we use this extension what font bring it on you can see that it's using pop-ins by 16 font weight 400 one formula pop-ins pop-ins good stuff uh let's say we want to edit a few more SAS variables uh we can actually come to the component um we have the text field on the screen now so we go to form inputs and controls text fields and then we can go to the API such variables and just add any of these SAS variables to the settings file that we just created just now um I realize that for the input most of the styles that I like to change are on the base component which is this V field V field is the base component for a lot of the input fields in beautify so like the Border radios I like to change my border radius I think the default one is four pixels um what I like to set it to about eight the remote so I usually just come here copy this let's jump back to vs code go back to the settings put the comma here add the variable name with the dollar sign in front of it and say 8 pixels now if I go back to Chrome and check on my input field no change I think this um water radius well no that's a lie it actually changed it's way more rounded let me put a ridiculous figure here and see if I'm just seeing things so let's go with 25 that should look crazy you know and yes we can see that it's very very round so the the the variables are actually working properly um there is an ongoing issue with customizing the variables within nox applications right now I don't think we have the issue oh we actually do um where this is the issue right um let me all right oh there we go so a few of the SAS files are not loaded server side so if you customize the variables meaning adding that settings the scss file um you will get a few of these warnings in your console um I think what happens is because a server rendering with Nooks it's not able to find these files hopefully they come up with a fix for its own but um there's there are a few GitHub issues um pointing to this issue that everyone is having with Knox 3 and 553 um like I said it doesn't stop bit from working but most developers don't like to see this in your console so that's a that's a whole another story but it works nonetheless so yeah I don't have a problem with it um next what do we want to look at next I want to look at um some other features like Global configuration um Global configuration is is a new thing in beautify it allows us to set the defaults for different components here it's telling you how you would go about and go about disabling the Ripple directive for all the components that support it so you just add it to the global um key under the default object inside your create good create beautify function here it's showing you how to set the elevation for all vsheet components to 4 by default so let's go ahead and do that with the input field that we have on the screen so we go back to the virtifier plugin and we add defaults right defaults okay I'm not getting typescript help I think it's because I disabled this thing let me enabled yes it is these are enabled hunting beta should be enabled that's the same with this reload all right one second let me let me try to fix this thing okay it was definitely um the Vita extension that was causing that uh all right good let me see what was I doing yes defaults so defaults Global if you want to but we're not doing Global we're actually changing this and when updating the default um values in the beautify configuration you have to use this casing so capital V text capital F this casing we can't use this um so let's go back here and we want to say that for the text fields let me see what property can we change let me change the variant yeah the variant and we want all our text fields to have the outline variant let me just take this off and just to show you if I if I take off the variant in Chrome this is what it looks like this rounded thing for this filled um shape text field but when I add the outline variant here hit save and go back to Chrome is taking on this shape oh let me just remove the ridiculous motor radius from this text field uh skip its uh it's about seven that should be fine so yeah defaults this is how you would set the default configuration for each component that you want to use if I want to set the Focus color for each text field to be the primary color if I hit save there automaker and focus you can see we're getting this purple looking color I think this is a default primary color for the theme configuration for light mode next theme in all right uh theming is very easy I think this this is one of the biggest improvements um for view to find the theme configuration it's easy to add custom themes um it's all here in the documentation pretty straightforward um so here they're telling you that beautiful comes with the light and dark Theme by default uh you can add your own theme just um create an object up here with this shape or you can use a theme definition type and add the type to this variable and then you will get the suggestions inside the object um yeah too much talking let me just show you how you go about doing this so in the beautify config team definition right my theme of type theme definition is equal to an object now if you press Ctrl space you get all the um properties that you can add here is it a dark theme this is a Boolean value let's say we want it to be true and the colors uh I think we can add all of these colors plus any other color that we want so SJ we just want to specify the primary color um let me grab a primary color real quick uh paste that in save now we can come here and say beam I think the default theme is gonna be the name which is gonna be this thing called my theme and then let's see all right then to the themes object we add this theme that we just created my theme so if I hit save let me see no errors in the console go back to Chrome you can see it's using the Dark theme that I just specified and this is a primary color that I just specified as well I got it from Tailwind shout out to Tailwind so this is the primary color now we're using a dark theme and this is how simple it is to customize your theme in the new filter file pretty straightforward very nice love the fact that I actually gave us the power to specify surface color and background color specifically background color I remember this being a pain in beautify too um but yeah that's it and it actually show us how we can go about toggling our theme so let me just copy this code go back to vs code and go here I think in my up bar I'm gonna add a spacer we don't have this function as yet so let's just add the script setup uh cons umer name from equal to a function that does something nothing just yet um so back to Chrome let me see this is the function so we're gonna get the use theme composable from beautify and we're gonna use it like this let me see copy this back to vs phone up here import beautify use theme and we're gonna say if the themes name is the Dark theme then we're going to change it wait what is this saying theme Dot global.name.value is equal to team.global.com then we change it to light and switch it back to Dart okay um so this is gonna essentially just toggle between light and dark mode let's see if it works we have this one Moment of Truth nope doesn't work okay let me see what's happening in the console theme is not defined ah of course of course theme is not defined uh we have to say on Steam is equal to use theme there we go there we go all right let's see if it will work now refresh toggle ah there we go just like that which between dark mode light mode I think you can actually pass the name of your theme and it will switch between the two [Music] so I'm just switching between the the built-in themes and not the theme that I just created I'm gonna try to switch between the theme that I just created and the light theme yeah let's see what's happening in Chrome I'm just testing this out so lightning Dark theme ah this is my theme the one with the blue so we're switching between the light this purple color and the blue which is my primary color the default primary color my primary color cool all right what's next what's next uh blueprint I think blueprint is worth checking out um there's some predefined material design Styles um this is mdi1 MDI 2 Styles and mdx3 I think this one is still being developed mdi3 and the way to add that is to go to the beautify config there's a blueprint key right here and you can just I think you import blueprints right so from beautify slash blueprints you can import any other blueprints in the one two and three let's select two and just put md2 right there save that no errors and go back to Chrome let me see up not much change oh MDI 2 actually changed the buttons default color to the primary color okay nice all right uh the last thing that I want to look at here is configuring icons now out of the box beautify supports material design icons material icons one awesome four and five I think this is the community of material icons and this one is the official one from Google and we all know Foundation but I don't like using any of these icons um I like using icons from this website it allows me to select the icon partner I want to use um the one that I actually like a lot is this one plus four icons I think they're cool um so I'm going to show you guys how to change out the icons to use these or any icon from this website cool so here it will show you on the documentation verify or you can go about change a note to material um fantasm the whole works go down here we get instructions on how to create our own custom icon set um I think we have three pretty easy steps that we have to follow um the first is we have to Define all of the internal icons that beautiful use and you can see them right here the Alias is we have to Define all of these this is not one I'm typing on each icon is not fun but it's worth it if you want to give your app a polished feel um the next thing is after defining the aliases we have to define the custom thing which is this thing um the icon set and this is just a component that receives the props and returns a render function or some component that will render the icon after defining the um aliases and the icon sets you can just go ahead and in your configuration object you will just under this icons object set the default set the addresses and bring in that um icon set that you created so I'm not going to type on holidays but I'm going to show you how to do it so we start by copying all of this oh then we go back to vs code um I'm going to create a folder called utils and this folder is actually all the functions or files created in this folder is auto imported by nox actually learned this the other day let me see if I can point you to the documentation or Auto Imports yes uh where is it yeah here it is um director based Auto Imports so knocks directly in Auto Imports files created in defined directories these directories are components composables and utils I did not know about utils so utils directory back to vs code in here I'm going to create a file called icons dot TS and paste in this thing I'm also going to bring in the um icon module that we installed I'll start so import and we're importing this from components icon or no like I said earlier I'm not going to type this out so let me just grab this from a repository that I have somewhere so GitHub this thing I created this um nox353 starter sometime about uh two months ago two months ago um when I learned that uh we can now add verify to unlocks project um so let me go in the helpers folder custom icons and I'm just gonna copy all of this back to vs code uh what did I copy copy the whole thing all right cool good and if you're wondering why I'm actually seeing the icons instead of just the word or the text is because of this plugin iconify intellisense yes this one from Anthony Foo so we have all the icons defined here so these are the internal icons you can tell um like this collapse is used on the expansion panel pencil is used inside the text field for the clearable button um we have the different messages for the different other types success info warning previous and next for like the um data tables sorting ascending and descending for the data tables as well um by the way data tables is actually on its way it's in the lab stage where they're testing out and trying to refine it um so I won't try to add it no or I might might let's see how it goes um what next we want to render we want to provide a function with a render function here we want to provide something that will actually render or icon on the screen so we're gonna pass in icon which is this icon component up here and then we're gonna say we want the name of the icon to be props dots icon you want the tag to be prop ER dot tag and disabled funny props dot disabled alright so the reason why we are passing in a name right here is because this module the icon module actually requires a name prop you can see here if you hover over it says name is required and the size uh it's a it's a prop mode it's not required so we save that go back to beautify and then we want to set the icons up right here so we open this icons object default sets we're going to name this one custom foreign assets we're gonna bring in the custom [Music] um variable that we created over here and then for the aliases we're gonna bring in aliases so let me save that let's see what happens restart in the servo go to Chrome nothing crazy just yet let's try adding an icon um icon here so it's a v icon and then we're gonna say pH of sun all right let's save that nothing crazy in the terminal let's see what's happening in Chrome ah there it is your icons are being rendered properly so the setup did work I don't know why typescript is showing that error but it works it's saying something's wrong I don't know how to fix this right now all right next let's look at the data table so beautify labs an introduction saying what labs is it's saying in this big red alert here components here are not production ready use at your own risk uh so I'm gonna test this one out let me just copy the code for importing the data table I think we can close this um and then here we import v data table from the labs and then we're gonna add it to the components object right here so we yeah table save that and then let me look at the rest of the configuration you can add it like that and we can set defaults okay nice so let's look at some of the examples basic example uh let me just copy the code so copy that back to vs code View and below our [Music] X field let me just add some margin wait R2 save and before saving this is going to throw a lot of Errors if I save it like this um because I don't have any of these things yet so let me just go and grab them over here uh we want these things wait where does this end gives here the entity sorry yep so we come to our script setup paste that in all right so paste all of the properties um in or script setup and format it properly it's save and see what it looks like what it looks like in Chrome and it works it actually works all right cool what's that some hydration mismatch warnings all right cool so you can see it's using the um the icons and these are the default icons I viewed if I use so like this thing for the drop down uh I don't think this is working as yet or is it I think this items per page thing because it's hard coded let me see I'm gonna remove it let's remove nuts save back to Chrome ah there we go so the items per page I think it wasn't working because it wasn't Direct on here so let's convert all of these to refs save that should be reactive now and go back to Chrome let me see 10 ah there we go there was once a property that allowed you to determine the numbers that show up in this list I wonder if it's already implemented hmm let me see where's the API v data table um another side um not seeing it I'm not seeing it maybe they'll add it in the future Maybe model value hmm well yeah um I think I think I'll stop here uh definitely check it out guys um it's it's a work in progress and I really like I really like beautify um I just want him to hurry up and get a lot of these core components out so we can start building amazing stuff on you know just customize the heck out of it um but yeah I I don't think I'll actually put up a repository on this because it's it's nothing it's really just walking you through you know the different um components and how to customize them and you know just how to add beautify your project so um until next time peace

Channel: Behon Baker

Views: 10,083

Keywords: Nuxt, Nuxt 3, Vuetify, Vuetify 3, Vuetify Guide, Vuetify Tutorial, Nuxt 3 and Vuetify 3

Id: 1yGof4OTDtY

Length: 53min 11sec (3191 seconds)

Published: Sat Jan 07 2023