Why Use Nuxt JS 3 Beta?! (Vue.js 3 With Nuxt Tutorial!!)

hey developers today we're going to look at next 3 beta we're going to run through some of the new features that it has and why you may want to use it in your next project and as always if you're new to this channel my name is eric i'm a full stack software developer i'm a big fan of react vue.js if you guys like those type of technologies want to learn more make sure you click that subscribe button i'm actually trying to hit 100 000 subscribers i'm really close yeah so make sure you click subscribe and yeah let's just jump into the video all right so here is next three beta so if you go to v3.nuxjs.org you can check it out they're calling it the hybrid view framework essentially next three allows you to create server-side rendered apps using vue.js and more importantly using vue.js three and you can see right here they list a whole bunch of features it's lighter faster hybrid suspense you can use obviously the composition api since we're using vue three has a nuxili it uses veet which is that super fast hmr so super fast reloading of course use the view three and it has typescript and it has typescript support out of the box it's using veed and view three so it's a good solution if you're wanting to use typescript now if you want to read the announcement can go ahead and click to read the announcement but if you want to just jump in and click get started by the way it has a big warning right here that nux 3 is currently in beta it is not production ready so let's take a look at what it is ready so by the way there is two ways you can create your next three app you can use next three or bridge so bridge is a way to take your existing next two application and basically upgrade it in the meantime until next three is production ready gives you some some cool features so you can see right here they give you an idea of like the differences between next two next bridge and next three you see next three right now is unstable so obviously you wouldn't want to use it in production but if you want to use nux bridge it's semi-stable so it's better you can see the performance is faster if you use nexbridge you'll get some cool things that you would normally get if you use v3 like the script setup syntax if you haven't seen i've done a few videos on that you can do compo component auto imports options api it allows you to do static sites one thing that's interesting is if using nux3 out of the box you actually can't do static site generation right now it's not available it's in being as of this video they are working on it but you could still create a knuck site and use uh server side rendered or ssr so you can get some of these things with nux bridge if you want to take your next 2 app and upgrade it and add in next bridge and you can also get rid of nuxbridge if you didn't like it so that might be a good middle ground while next three is being worked on there's also a few things you probably should be aware of if you go to the community and look at the github discussions there is has been a lot of talk about modules and different things that need to work on next three so if you click on this module support status they have a nice big uh of table of things so if you're looking to use like next image it's not quite working on next three yet if you're looking use nux content it's not quite working yet but if you're using next windy css it works but like viewify not working really or hasn't even been tested strappy cloudnary century so a lot of things right now have not been tested and probably do not work with nux3 so just be aware that if you are using some of the cool things in the next ecosystem like nux image or nux content you're probably not going to be able to get it working with next three right now it is in beta and they are working on it so i assume that you know in the next few months these things will start turning into green check mark mark boxes so i still think it's worth checking out and using just for fun in your own projects we're a little early just to keep in mind there let's take a look at creating an app they have a nice getting started and i already created the app but essentially if you want to create a next three app we won't look at nux the nux bridge yet because i think it'll be easier to understand if we just look at nux3 here and it's really easy all you need to do is run mpx nuxi and knit nux through app and then there you go so here is our next app it's empty but what we're going to do is we're going to go ahead and create uh an app like this so we're going to have a really quick tv show shirt search so if i put in friends in here it does a search and it shows me the images from an api that i'm using called tv maze so i can then you know take a look at it it's really simple i also added a couple of different routes here which i'll show you guys but let's see if we can create something similar to this so i'm going to start my server npm run dev by the way i'm using vs code and the only extension i'm using right now is one called volar so you just need to kind of search for volar this one right here view language feature support by jonathan chu johnsonchu yes i would check that out make sure you install it i think it's well worth it so after you get installed you'll get this pretty nux.js starter page you can look inside here it's actually a lot different than what you may have imagined with nux 2 and x2 you have a whole bunch of directories with the next three beta they don't add any directories they just give you one app view and it has this this internal nux welcome so this isn't very interesting but so i thought what we can do first is let's create a simple count app just to prove that you know this is indeed a view 3 app i've been kind of having fun putting the script at the top instead of after the template i kind of go back and forth on it and obviously we can use script setup now i could do it language equals typescript if i want uh maybe i'll leave that on we'll see what happens here so i'm going to do i'm going to import in ref from view and of course we'll do cons count equals ref and we'll start at zero and we'll have a way to increment it so i think i can just delete this and then i'll put in an h1 counter and we'll show the count and then we'll have a button that says press me and it'll have a click handler and i'll just do count plus plus so if we do this all right it should work so here it is and we don't have the count showing up so let me save it there it is so now we have the seven eight so it's being incremented as we expect and it seems to be working uh so that isn't very useful i mean this is essentially just a view three app at this point but let's see some things that happen primarily because we're using uh because we're primarily using uh next so let's let's just keep going let's one really cool thing they did is you can actually create a server now you could create a server next to i was a little bit more configuration in next three they make it really easy and it feels really similar to next so what you do is you just create a folder we'll call it server and then you create another folder called api and then inside this api we can create a some sort of api route and this will be run completely on the server side and not on the on the client side so i'll create a new file called hello and i can create a typescript if i want so i guess i'll create typescript and now from here i can essentially just create whatever i want here so let's see here i'm going to create export default and i have a request and a response and now i just need to and i'm going to just just to see if this works i'm going to return some data i'm going to return hello world and by the way you see here the yellow squiggly lines because i'm using typescript i guess i can put in type any just see if it works and now if i go to my app and one thing i'll need to do is off to stop and restart it real quickly and it'll just reload it does take a few seconds and feel like v super fast reload but it finally does and then i just need to go to slash api and then hello and here it is my here's my hello world now this is running on the server side which is really cool uh so i thought maybe first what we can do is create a really simple app that goes to this tv maze which is this website that allows you to they have an api to grab like cover art and information about tv shows so let's create that real quickly i might do a little bit of copy and pasting but let's see here so i have a a request and response first i want to have these typed because you know we're using typescript so i'm import type and it's going to be incoming message and server response and it's going to come from http if i can type it right and this is going to this request right here is going to be of type incoming message and this is going to be a type server response all right now we can have types which is nice and now we can know like what's happening and also i want to import one more i'm going to import in star as url from url because we're going to assume we're going to grab information from the quest request object coming in so i'm going to call this query object i'm going to do a url.parse i'm going to do rec url as string true and the dot query so what this is saying is anytime we have like something coming in like uh so be like hello and you do blah equals one two three it's going to return that as an object so i'm going to have blah colon123 and this query object which would be perfect in this case we want to create something called server uh we'll call it yeah we'll call it search search and so this way i can return back what i want to search here so cool so now i have a query object and let's do uh let's have a data and and i already know this data object is supposed to be this way so you're just gonna have to take my word for it but it's basically gonna have this sort of format to it and so i want to do some destructuring we're going to assume that this query object is going to return back this and if the search is actually there they actually sent it over then i want to do a fetch now by the way i can make this async so i'm going to export default async and so i can do async await and i'm not going to do any try catches obviously if you're in production you want to like check to see if this actually worked but we're just assuming everything works we're gonna do it wait and there's a cool thing called dollar sign fetch so instead of having to import axios in or import in uh node fetch inside your node server you actually have this built-in kind of fetching thing through uh through through next so it's dollar sign fetch and it has a few options and i'll show you how that works but for right now we can assume that's just doing a git and we just need to put in a url which i am going to copy from the other page here cool and actually um we'll go ahead and grab the search from here so we'll assume that the search is there it's going to do this api call and it's going to return some json and then i'm just going to do this right head and this right head is i'm going to do a 200 response once again if this is production i probably want to check the data being sent and send like a four or four if it's wrong but we're going to be lazy here and we're gonna send a content type application json and i'm gonna write it i'm going to do a json json.stringify on the data that's returned and i'll do an end by the way i'm using a plugin called tab9 so that's why i'm able to kind of tap through some of these things and that's why it looks like magically working cool so i'm going to save it here and once again i'm going to stop the server and restart it because it sometimes needs me to do that and i am going to take a look to see if this works now okay it's empty so but if i put in question mark search equals mash cool so we got all this information from search now let's see if we can access it and it looks like we click the links and it goes to tv maze but let's see if we can um do something with it so and you see we have this server folder and i have this app view but what happens if i want to like create multiple pages and have multiple information in here so that should be easy so i'm going to create uh just like in in nux2 you can create pages and this is kind of how you do your routing so you don't have to create a router file so the easiest thing you can do here is create a new file called index.view and once again i'm just going to put a template in here and just make sure it works hello world and once again i always stop restart the server seems like it needs it and if i go back to my uh here i'll just go ahead and just delete this out of the url here's my counter so it still hasn't updated and what it's doing actually is it's still grabbing the data from app.view so if i wanted to not use this i'm just going to rename it to a.v just the heck of it it's reloading and now it shows the hello world for my pages folder so now i'm good here i have uh pages now you can create multiple layers so let's say i wanted to create a new folder called eric and in the eric i'm going to create a new file called test.view and i'm going to put in another template tag at the top and put in h3 test route and if i go to slash test and once again it's giving me an error so i'm gonna have to restart it and it's supposed to be eric slash test i believe cool so there's the test route that i just created and you can do some other neat things here too what happens if you wanted to have uh something like dynamic routes in here now in nux2 you use this underscore but in next three you actually it's a little bit different so instead of doing this underscore it looks more like a next.js where you put these brackets around it so i can put in bracket id dot view and that means anything that's kind of starting with this id will be put in here so if i put an eric slash you know one two three four still goes to test round you can kind of check this out too i can put in dollar sign route dot params i believe so you see here id one two three four so you can see it came right through this uh params and i could go ahead and grab it you can even do like multiple routes uh multiply that more kind of crazy dynamic routes so instead of eric here i can create a let's say some info and then group dot view and then if i go into here template again and by the way it was giving me a red squiggly line here if you want to fix that you can just put in an empty script setup tag and then it kind of understands that this is a view file and that's that's what's happening so in the sum info group i can do same thing here some info and then dollar sign here route dot params and then it would be group and then once again i'll just put an empty script setup tag and now if i save it and by the way don't worry about this marketplace there and if i put in some dash uh i guess i called it some dash one two three four actually let me go and delete this because i think what it's it's everything's being caught by this id so if i delete this route and then i refresh it here it is here's my group as i expected it with the grid with the information uh the dynamic information so that's kind of neat you can also create you can even create new files here and like destructure values out of it and do something like this i want to show you that but it's just you can do more kind of dynamic routing stuff with your pages folder which is kind of neat let me show you before we display the information here i want to show you one other thing layouts so i can create a new layout here and this is similar to view to nux 2. i'm going to create a folder called layouts and then the layouts i can create a new file called default.view and this will show up at the beginning and the top of every file in our app so we can do div here and i'll say um welcome to the tv app and also i kind of want to just make this just for the heck of it i'm going to make this a a route so i can put inside of this next link and then i'll put this text in it and then i can put in where it goes so i'll put in two and one thing you definitely want to do don't forget to do this and i've done this a few times so if you save this and you refresh it nothing changes so i'm going to run npm run dev again and let it resync and long as its name by the way default inside the layouts folder it'll be occluded for everyone you can do custom ones too so here it is but you see i don't see the rest of my app like everything disappeared here so you're like what happened you actually have to add in a slot just one default slot in here and then you'll see the information uh that you need it so don't forget to add the slot in here so if you want to create a custom layout it's pretty easy just create new file custom.view and then once again i'll do template here i'll do div and inside here i'll put in custom layout once again i'll make sure add my slot and then inside let's say our index file here index.view i'm going to come back up here and put a script and close the script and i'm going to do setup and by the way you can you can do two things here if you have a script set up you can actually add just a normal script too um in case you want to use both and i can put an export default in here and put layout and then put in the name of the layout in this case it's custom what's the case once again i have to stop and restart the server and if this works it should use my custom layout cool so you can see here it says custom layout now if i wanted to change this back i can either delete this or put this at default and now it's back to the default layout which is really nice to have so i can create a bunch of different layouts here and i can add in this export default and then choose which layout i want to use or if i don't use it all it'll just default to the default one the one named default.view so that's really easy oh one caveat two if you have language equals ts here it's going to give you a big ol it might give you an error let's see console so it doesn't give you an error if you ever have a problems and you add languages just add them to both because you can have both in here and uh it should work fine but looks like luckily everything's working here so if i go slash eric and i got rid of the id so i got some info here i press here now you're back now it does give you this weird error right here in this view warning i think you could see it that says that renders non-element root notes that cannot be animated if you see that error i noticed it too myself it's because if you go inside your route here you don't have any root elements now view three you don't have to necessarily have a root element but with nux because with the transitions it recommends that you put it in there so i just surround everything by inside my template inside of root div and then that way i don't get those warnings you can ignore those warnings but it's usually not great so let's try this again so if i go slash eric in here and then i do my some info cool i click here now i'm not getting any errors anymore so it's working as expected all right so we've looked over how to add layouts we've looked at how to add pages so you can add pages to your to your app let's look real quickly of adding a a public folder so i'm going to copy and paste this from my other uh my other computer here so i'm going to copy paste so now i have a public folder right here with just a taco so if we wanted to this hello world to actually show an image i'm going to put in public slash taco.jpg if i did this right it should show up cool so there's my big taco jpeg image you can see that's that's as easy it is you just create a public folder and you just copy your files into it and you can refer to public anywhere in your app and that's how you get your public information out of there okay so let's let's see uh two other really important options in next that i haven't covered yet and that's if you look at the docs there's this use fetch and use async data which can make it really easy to grab basically anytime your app loads you can get access to the server and then do things on there so i have a couple of just real simple examples of of doing that so let's say in here we just wanted to grab the data from this endpoint that we created remember we have this slash api hello um we can add in a search and then it returns back data so let's see if we can just show the json representation on the main page right here just right underneath hello world it's gonna be really simple so i'm gonna i'm gonna in this language ts i'm gonna import actually you don't even import it in it's just there you don't have to import in this use fetch so let's just use use this use fetch so i'm going to do const data and since we're using typescript i have to put a type here so i'm going to type any it's not very good but obviously i'd want to create the types for it i'm not gonna do it for this one i'm gonna do a wait and then use fetch and once again i actually don't need to um at all import this in it just automatically is done for me which is really cool and we don't need to put in the zac url because we're just grabbing it from the local server so it's the slash api hello and then we're gonna search and we're just gonna hard code in like um girls in there and now data should be available for us so if i did this right it should work okay cool once i write again it's giving me an error that i should surround everything in a div which will uh cool so now i just have this big ugly json blob right here but you can see definitely it's working uh this nice thing you can do too which i'm not gonna get too much into but there's a second parameter here called pick um pick and then you can pick like which options you want out of this now this is coming back as an array of objects so it this pick isn't going to work but let's say i had one array so i can change it real quickly i suppose if we go to hello here and since instead of returning back the whole array i just returned back let's say just one of them it's gonna give me an error there but let's see here and then i come back over here and i'm gonna pick we know this array has a show i don't care about the score let's say we just want the score right now and we'll put in a score right here and i save it cool so now it just returned back this score instead of all that information we don't need so you kind of use this pick as a way to just grab information you need out of it i'm going to put it back the way it was because i honestly do not need i need all the information in an array so if i refresh this i'm back to all the information which is good and now i need to kind of parse this data and do stuff with it but i just want to show you one more thing you can do i just forgot there's also another one called async data so i can kind of do the same thing here i can grab a data out of here and it's gonna be a wait it's gonna be use async data and then i can actually give it a name of the data that i want to call it so i don't know search data and then i have a call back here of what i want to do oops so inside here i can do a dollar sign fetch just like i did in the other one and i can do api slash hello and i can just search i don't know this time let's just hard code in mash okay so this data this is just a unique key that you want to use so don't worry about that and we can use and if we do that this data now will show information from mash so if i did this right refresh it cool so you can see now this is mash this is mash now instead of girls so this is another way and then you can also get access to the request and response objects this will run every time on the server anytime this route loads so you can do stuff with it um you can also like i said just do like server side requests in it as well instead of doing it a client side so or this this instead of using like fetch in the client side you can do it on server side through here so there's also a bunch of other things you can do with use async data because you're dealing with server data maybe you want to double check to see if someone's logged in or not and then route them somewhere else so there's a whole bunch of things you can do cool so uh let's let's try to finish this app off i'm gonna copy and paste some stuff in here to see if we can make our nice little app so first i want to i'm going to copy and paste for my other screen a styles that we want and then we're going to create some information in here so uh i don't care about this hello hello here but i do want to div and first i want to create is a form and we're not going to have an action here but we're going to put a class equals form and then we want to do submit and we're going to prevent it from doing anything we're going to go to a new search for stuff which i haven't created yet and then this one's going to have input i'm going to add a v model which is going to have a search text i haven't created yet either and then we're going to have a button that's going to have basically search for tv shows cool and now i'm going to have another div in this case we're going to have stuff and stuff is going to be our our class and we're going to have another div and this one is going to have a v4 on it and we're going to show in we're going to create something called my data and we want to iterate basically we're going to iterate through all the data we got returned from our server and grab all the images and display them so i have an image and the source will be show dot show dot image dot medium and uh yeah i think i think that'll be it so let me let's add in all this code here to do this and we're gonna do a few things so we're gonna import in ref from view and we're going to uh we're going to const search text and that's going to be ref and we're going to do an async function here so i'm going to async and we also need this my data i guess too so we'll do const my data equals ref and we'll just as any because we're using typescript now we should be able to create our function we gonna call this search for stuff and we're gonna have we're just gonna use normal fetch here because it's just client-side and we'll do api hello search and that's going to equal i kind of want to do like this that's going to be search text dot value make sure you always use that value when using refs otherwise you're gonna have problems json equals weight data dot json should be data.json and then we're gonna console.log json json and then finally we're gonna do mydata.value equals json so if i did that right we should have something working here okay so let's type in let's see if this works oops i went back one okay we're gonna do friends okay so we got uh we did have one error here and this source i need a colon there so it's biome to it so let's try this again friends cool so here they all are here's all our friends artwork after searching of friends we can a show i've been liking like lately is called evil on cbs it's pretty good uh cool uh i know what you did last summer just came out i think there it is awesome so we have now been able to create a really simple app using uh both the client side in next and being able to access stuff on the server side uh it seems to work pretty well and now i basically created a full stack app using this this and using uh dollar sign fetch using the server side i hope you guys learned a lot if you guys have any questions leave a comment below i also do mentoring so if you guys need help on your careers or view or react yeah look at the click on the link in the description i'll help you out thanks

Channel: Program With Erik

Views: 30,433

Keywords: Program, With, Erik

Id: pIrL2Nnjvbk

Length: 32min 32sec (1952 seconds)

Published: Mon Oct 18 2021