Migrate an app from Vue to Nuxt

didn't and we are live at least i think we're live says we're live i'm going to refresh youtube and see if it actually worked so for those of you who are watching um yeah we're live today on debbie codes and i don't see it let's see we'll reshare it takes a couple of seconds i think to get there but sometimes yes i see it that means it's working that's great i'm just gonna open it so i can see the comments perfect cool we are here now we are fully live so my voice is still not perfect for those of you who don't know i lost my voice in january three three weeks i couldn't speak like seriously can you imagine losing your voice or me losing my voice so it kind of comes and goes a little bit i can't do any of the high notes so there's no karaoke it's a bit of a pity um but yeah you'll probably hear that it's not exactly perfect but i will do my best stay hydrated and keep going so what are we gonna do today my plan today is to basically migrate an application um from vue to nooks and show you how to do that and what problems you might have etc uh that's the plan and uh we hope it works hey eduard uh nice to see you and welcome everyone else that's watching so let me show you a little bit about um what i built earlier so here we go right it's a little game right um basically um to test you out if you know the knowledge between server and static so do you know the difference between server and static and when to use one over the other let's test your knowledge so you can choose static static as my favorite for example so too static let's get started and we have this game are you considered jam stack on the static where it goes yes i am do you need to set the target in nuxconfig yes you need to set it which command do you use to build your app for production in static we use nooks generate are you production ready files in the disk folder yes they are and do you have access to rec and res from context no you don't can you be deployed to nullify if you're static yes you can and there you go you won and let's play again right so that's the game um it's live on next dash game.netlife.app and you're probably thinking like i'm gonna answer these just really quickly and see and you can see like the zombie comes over the head and everything it's really really cool now you're probably thinking debbie you are amazing but no i'm not amazing this is actually stolen from sarah drasner she actually made this game i just changed the questions and nuxtified it a little bit um but the actual original game can be found here on sarah drasner's building web absolute view and i think it's her game solution in this repo here and this is taken from her front-end masters course where she's building applications with vue and nooks amazing amazing workshop i highly recommend it if anyone um has access to front-end masters or would like to uh definitely worth checking that out and that's how she'll explain actually how to build a game i'm not gonna explain how to build a game but yeah if you want to build a game in view just go on here and basically um i think this is her one here so pretty much the same um she just has different kind of crazier questions and um and it's a little bit different but uh other than that as you can see i pretty much stole all her work and i just looks to fight it but yes um that's what we're gonna do right so again um all from sarah drasner so thank you sarah and let's see how we can get this into our application right so what have we got in the chat we have nico hi nico um and bt cruiser the bell works excellent and charles uh welcome so welcome all of you thank you for joining this is very cool to have you all here um so we have a view application on one side and we have a nooks application on the other side now the next app i've literally just created and it's just great next up and very very very simple oh i'm going to say this name wrong way you hello are you um if you have any questions along the way i am going to read the chat as i go along there's about a 20 second delay so just remember that when you ask the question it might take me a little bit of seconds to get it and then i answer you back you'll receive it 20 seconds later it's a bit annoying but that's life in the virtual world um okay miguel alcala is live as well yes noah great yay okay so here we go and lucas here oh my god so many people seriously putting me under pressure now okay so we've got the view up on one side and we've got the next one on the other side right and i've literally created the next stop which is crate next up nothing more there's nothing in it it's just just what you get out of the box when you use crate next up um the only thing i added was prettier and eslint because i love prettier neslin um i've often said before if you're new to coding or you don't like linters then don't choose those and other than that i haven't chosen anything else uh frederick and hello luke hello okay so we have um over here sarah drastner's app and yves is in the house nice to see you um so sarah drasner's app is a view application i'm going to nuxtify her application so what do we do basically in view you've got a source folder and in here you've got assets okay so we need a background and we also have assets and nooks so this is as simple as literally copying the background and just putting it into the assets folder right so simple enough that's first thing done um so we now have a background now you're not going to see much like literally i've got the application running here sarah's is running and this is all i've got here in next right there's nothing there okay so then we have to basically have a look at components right so we have the artist the baker the friend so all these characters here and if we look at the application that sarah created um they're the characters here when you go to the baker if you were to choose a different character a mechanic you get a different character and you've got this guy here and the artist so she has three characters and you see they're different right so that's what we're basically going to copy over hey joel the artist the baker the friend and then we have these uh game start finish game start um state game state start and the mechanic the score and the zombie the zombie is what comes and kills you if you're not getting the things right so i'm just literally going to copy all these and i don't have a jts config okay no problem ps code i don't need that so in my components folder and again i'm just copying it over simple as that components in view components and nuts they're still components they're view components so that's easily done right so pretty much we have copied that over the only thing now we need to do is this door so we've got an index.js file here and we have an empty store in here an empty folder now remember nooks will only activate the store um if you actually take the file and put it in it so if i put this file in here now my store is going to be activated but if i don't put a file in there that folder there's nothing activated and the ux store is not added so now i've added the store just by putting that index.js file in there um hello juan david from the mallorca and we have ian um first time catching a live stream as i'm normally knee deep in a next viewer larval application great to have you here ian okay cool so we've added the store um and now what we need to do is add the application right now i know you're kind of seeing too much going on here so let's just get rid of the menu here so we can see what's going on so this is my application and um what we're going to do is basically copy all of this pretty much as simple as that right it's we don't need to worry about what's going on here um and we need to copy this into our index file so in next we have the pages folder and we have the index file and i'll just get rid of the menu for a second and this is our basic next index file right so we can copy everything i hope and literally copy it and we're gonna copy and paste it in here i'm gonna save it and that's basically in there cool what else do we have to do in view you have a main.js and this is literally importing view importing the store we don't need to do that that's all okay it's done by nooks and that's it so literally now um i should be able to work with my application let's have a look and see if it's true so i'm going to get rid of uh this one here and we can uh we can come back to it later yeah we'll just delete it gone oh no now i'm on my own now i'm like oh my god what's gonna happen now right so um if we look at our next live stream oh my god we have like so many errors right so this is what happens when you just copy and paste something over and now you've like oh errors everywhere what am i gonna do so let's kind of um fix them you see what i mean with prettier errors you don't want prettier you can like just turn formatting off or not install prettier but i'm gonna fix those because i like i like my code to be all the same so we are ready we have nuxtified our view application and we're basically now going to have to fix it so let's open um the terminal oh that's not what i wanted to do done my fingers are in the wrong position there we go so let me just throw that in the bin and we have here so now we can kind of see what we're going what's going on and what we need to find what we need to fix so first of all like reading errors is really important because if you can understand the errors you'll be able to fix things now at first you look and go oh my god there's so many errors what do i do what do i do when you freak out and then you kind of just go oh my god i don't know what to do so um this is a telling me like the dependency was not found g's up so g sub is not found and sarah uses gzap in her application that's um for the animation i think it's for the zombie that he comes down um so we need to use g's app so that's fine we can just install it so let's just um go here and we're going to say i'm going to use yarn you can use npm and yarn add jeez up okay so that's going to install that package for me and that should get rid of one of my errors so that's cool let's just bring that down and have a look okay so we have um a load of errors let's have a look one by one so let's go to the index file so we have our index file here and i could save it and it's going to tell me the attribute id should go before the v model okay so these are like stupid errors right and sometimes you go seriously like eslint is is this like you're gonna make my life difficult for this but it kind of is so remember if you're gonna add lynches and prettiers you're gonna have to fix these things right um it's also telling me online 161 so see how it tells you exactly what it wants to be done right so line 161 it's basically telling me that watch should be above um methods so let's just put it above methods and then i'll be happy right uh christopher yay good to see you good to see you too okay so that's done now we've got an unexpected console statement okay yeah we do we have a console log in here and uh we don't need that so we can get rid of that and now i should get less error so let's have a look i mean um it's not compiling like oh seriously what's going on here right so this is when you kind of um i should actually just uh let me just get rid of that one down a little bit more and i didn't want to split that let me oh let me just turn the bit and try a bit go away go away there we go that's better so we got one here so we've got errors failed to compile the relative module was not found okay so how do we fix that one relative module what relative module okay so if we look at the error and we read it it says type equal style and index and lang equals scss so if we scroll down to our styles we will see that we are um looking for scss and if we look in our package json we do not have um scss installed right so we can either do two things we can install sas or we can just get rid of this and we can just use um post css or we can just use normal css and to be honest if you look through the code there's nothing there's no like kind of real sas things here except for look just these little things here right so these ones are in the zombie.talk and you could just install sass right but i'm just i'm not going to install sas just for these two things so i'm going to like paste this here and this one's zombie talk then paragraph so we'll just put that there and put that there press save i've got my formatter set up so it's going to fix that so that's great um more errors gone yes okay what else do we need to do to fix this it's now telling me the assets background.svg in node modules css loader disk and now you're going oh my god it's giving me node modules errors right um but if you kind of read it a little bit you can really see what's going on so um it's telling me that there's some problem with the background svg okay cool so let's have a look at where this background svg is so it's called background um dot svg and here in the index so let's open that file oh take away the menu there we go so it's basically saying background url and as you can see here i've got this right so remember that in next we need to use the tilde now normally you would use this right normally you'd use tilde and assets right if you're going to add an image but in this particular case we need uh no slash because it just works that way it's web packaging so remember remember if you're doing background url of using it css no slash if you're using it in a normal template then you'd use the slash tilde assets cool we're still broken so let's have a look we now have the error game start finish stop view type equals style and lang another scss right we've got another scss um thing going on so remember if you have any questions just uh try them in the chat and i will try and answer them um so we have another scss issue so let's have a look and see if we can find it now it's actually telling me that it's in games and we can actually just click that and open it i mean just vs code makes your life easy so um it's saying here so let's just get rid of that we don't need that and if we break some styles we can fix them later it's not really a big thing okay cool now i'm getting less errors i've just got 27 problems 27 errors so again like prettier errors pretty errors can be so annoying but if you set up your prettier right you're just going to press save and it's just going to fix it all for me yes don't you love that so make sure you have installed the right tools uh you can also just turn off formatting here i've installed a thing to be able to turn off formatting um so you can do that as well and i'm just going to like literally open these files and save them and and it will just kind of like fix those little things and you can also run like the yarn lint and lint fix and that will kind of fix them because these are just spacings um nothing wrong with sarah drastic code of course just imi settings are different hers and that's what you're going to find across projects sometimes you may have different settings and that will cause you problems so are we getting there no we're not getting there yet we're still kind of broken on something let's have a look score is broken okay cool and oh we're nearly there when nearly there the mechanic the mechanic is broken okay cool and come on one more one more what do you reckon is this the last one do you think so as you can see i'm just saving the file because i've set up my my prettier to to set up um and i know this is like the most boring thing you could ever watch but you're all gonna have pretty errors in your life so get used to fixing them okay we have client and server ticks so we are compiled successfully let's see if we actually have it up and running and working did we do it right oh my gosh hang on a second now i'm getting errors oh my god the nook store index.is should export a method that returns a ux instance what are you telling me here like seriously what am i gonna do with this so relax what we need to do is have a look and i'm gonna actually just turn that off there so i can see a bit more so we need to look at the index um the index in the store right so this is the store we got from view and as you can see the first thing you can see here we're importing view from view now we don't need to do that in next right so we can get rid of that and we don't need to import the view x because nux is doing that for you so we can get rid of that and then obviously we don't need to use it we can get rid of that so i can save the file and i'm still getting errors here because now i don't have ux and now it's i'm actually like starting a new store because i was importing the store and now i don't have access to that so now i'm kind of stuck right now i'm like oh my gosh what do i do thanks alba um so the best thing to do in these situations i know you'll all go no seriously read the docs who reads the docs i wrote the docs you need to read the docs right so let's have a look at the next docs and let's have a look at the store because if you actually use the docs you'll figure things out um do i have plans to release videos nooks with firebase in a series i i have no experience with firebase well i actually do but like three years ago at react but i will check out firebase i think we have some cool things coming with firebase so i will i will look into it but give me give me time on that one okay so the store the store in uh nooks activated by putting um a file in and as you can see this is how you create a store in nooks you export a const of state with an arrow function and then with whatever your state is so i'm just going to copy that you're allowed to copy copying in life is very good and i'm going to paste in here and then if you look at what's going on here in the view one i'm basically like starting the store and then i'm basically stating what the state is right but it looks my state is up here so i just need to put um my actual state so i just need to copy this i'm just going to copy it all like so i'm just going to cut it actually so you can see it's just the state and i'm going to get rid of that counter because that was the example and i'm going to paste it in here but um okay that is pretty cool that is my state now if you look it also says mutations it's export constitutions right so uh i'm going to copy that because copying from the docs is a great thing to do thank you um yusniel i'm going to say all your names wrong so i'm really sorry i apologize in advance uh one day when we meet and have beers you can correct me and laugh at my pronunciations of names now this is how you build the mutations in um in nooks and if you compare it to vue again i'm starting this door and i don't have need to do that because like i already have the store and you can see my mutations are here so here's my mutations so like i just need to delete the example one that i got from the docs and literally take the mutations that i got from sarah's um application and paste it in here and now i can delete this dead end press save and now let's see if we have any errors oh my god who knows who knows who knows what tomorrow brings so let's go back to my local host and let's refresh and yes i have a game woohoo so we just migrated a view application into next in just a matter of minutes which back end would you recommend to use with next um laravel is probably a really great choice but i don't have a specific um i haven't specifically used any ones but laravel and view go very good together a great place to start and we have a couple of courses actually on um i think laravel stuff let me just show you quickly on the video uh where am i going debbie on the video courses um get started with next and build a job board with laravel graphql nooks and apollo um this of course looks really cool i haven't done it but i was really interested to do it so that's what i'd recommend as a place to start at least so we have our application let's see if it works i'm going to choose to be a baker i'm going to pick my character um what's your dog's name so this is sarah's one right as you can see some crazy questions i'm getting them all right really seriously yay i won oh my god without even looking do you see that artist uh pick your character bom bom like the zombies coming at me did you see that and i lost okay so that's the game and that's it already um done over to next easy now as you can see uh this is the one i made and what's the difference i literally like changed the the main uh the background image that's the first thing i did was i got rid of that background image that sarah had and i put my own background image in and i added into here the text and i basically um instead of using the baker and the mechanic i chose server and static how did i do that so as you can see in here baker a mechanic so i just got rid of like i got rid of these and i chose two and i chose server on static and and then i was able to like get those if i go here uh localhost refresh i get server and static right so that's where that's coming from and i changed obviously now you see this is not gonna work right because this when you when you change one thing you break something else that's life um so if you're gonna change this here you're gonna also have to change the response so the question is and now you're gonna have to put server and you have to put static and the question can be um are you good with the gym stick and the server is going to be like no i don't like the job's deck so you can put the server no and the static is going to be like yes i am so jump stack and then you can get rid of the artist because like we're only having two in this case um but like you know you could just play around and you can put more in of course if you wanted to so now we have i have to refresh it each time so it gets the new uh stuff so let's go we want to talk about the server and are you good with the jam stack and here we are with a server and we're like no and then yeah i need to fix the rest of the questions right we can see here i've lost my little my little guy is gone oh no so my server is there my guy is gone now that's because the svgs um actually have a id and i have basically now called my character a server and static and that's not really the character so i'm gonna have to actually go into the baker for example i think the baker's not being used i'm not sure let's have a look um and i'm just going to call him static and the mechanic i'm going to call him um server right so now i should get a character if i refresh and answer that first question pick your character and it doesn't work oh my god um it should work why does it not work seriously let's have a look i haven't got a server let's see if i get a static because i have three characters here and i'm not no none of them are there so they should work um under server under static but i might have to refresh the server so let's do that in a second let me show you something else um that is really cool is i'm gonna clean up a little bit of the components right so as you can see here um we are importing the score importing baker importing a friend importing artist importing zombie mechanic gamestar etc and then we have all our components and that's what you need to do in view right so we're fully aware of that and then we can use our components okay but in nooks we don't need any of this so we can actually just delete it yes get rid of all that and we can actually just delete the components yes get rid of all that and now my app's a little bit cleaner and and it should work we will uh find out soon if it does work uh what i'm gonna do is i'm going to uh open the terminal and i'm gonna just restart it just so that um just so i can make sure my characters are actually coming in because otherwise like it would be a bit um of a problem sometimes when you change like the names and ids of something it doesn't fully um show up so let's see another question in the chat um check out laravel sanctum it might cover what you need if you only need the larval application to serve as an api great advice there in thank you um eric i'm wonderful oh thank you i love being wonderful uh yes this is a view to cersei um i can't really take uh vue 3 and put it into nooks yet i'll have to wait for nooks 3 to come out so that's coming soon until then we have to like still work with vue 2 in next um but yeah okay so let's see what's going on here let's have a look in our local host i'm just going to refresh it and i'm going to choose server and i'm not getting my characters here at all so this is a bit of an issue now one of the reasons why it's an issue is if i look at my application um i'm basically saying let me see if i can find it in the index i'm basically using an is character right i'm basically using a component is character and this is a dynamic um yay danny's in the house um so this because this is dynamic um and we didn't install it we removed all the installs it's actually not going to show uh let's have a look if i rem if i put these back let's see if i can get these characters because they weren't there before let's see if they actually come back because i really need them to be there so i can fix him because you know and he's still broken seriously you should not be broken so the character has gone completely and i have to figure out why he's gone so if i look at my artist i've done the id equals artist let me put in i shouldn't have an artist because i got rid of the artist i have a mechanic mechanic is now a server and the baker is now static so they should actually work and where else do i have the word baker importing baker okay index baker so the only other things are here and these we can literally like we can just copy these over that means we get rid of our baker their questions are a bit stupid but that's fine but at least then um it won't break and won't be looking for the baker and the on the um artist etc [Music] okay so now my my code is correct in this sense i'm using server as my character and static as my character which is a terrible character but can you see the mistake here right i'm not getting my my baker my my mechanic and you know it's just not showing up it's like come on um the reason is is because the file name is used right it's actually it's loading the component based on the file name and i've called my component um mechanic and baker so i actually need to change this um so let's just do it here to change this to be the name i want to it to be so this one is going to be server right and the other one is the baker we're going to change the baker to be static so i'm renaming this now i should get it i should get it i should get it micho nice to see you line 20 um yeah yeah line 20 no just because uh you have to rename them that's that's pretty much it so now i've got errors okay let's just refresh that and it's like oh my god it failed right because i've just renamed the components next is gonna have a little hissy fit and it's gonna say i don't know what component you want um but also it's not just that it's gonna i'm importing a mechanic and there's no mechanic right so we'll leave that there open so we can see what's going on and let's go back to our index and we can basically um well we can change this if we wanted to right we can just say import the baker we're not using the artist let's get rid of the artist right i'm going to get rid of this in a second i just want to show you it works first so we're going to say what is he um server import server from server and we call it server on import i probably doing the wrong one because i didn't even look they were static i i never do import statements i'm so like you know used to nooks where we don't need to do this so i'm like oh my god this is too much work and if we look up here we don't have um a mechanic or anything like this because it's using the is it's a dynamic component so it's loading the component based on the character that's where that's coming from so there's no you won't find a baker component or anything like that so that should work let's have a look if next does that i'm getting my lovely arrows and refresh and let's have a look is my character there is my character there yes i've got my character okay so now like i said the character is working and i'll just what am i on this server let's just make sure the static one is there as well that i've got them both great two beautiful characters excellent so now i can show you um again let me get rid of that i can show you how in nooks we don't need to import all these um all these components right you can see we're importing all these so let's get rid of it and i'm going to show you that it still works don't need that either get rid of it goodbye and nooks just does it all for me and it's um so much nicer isn't it and let's have a look and does it work refresh click the game server pick your character oh my gosh he's gone seriously why is he gone okay so now this is a little kind of thing that you have to look out for when um when you're working with dynamic um components so is dynamic is here yeah there is this component is dynamic so nux doesn't know which one you want to import because there's no reference to it so it's kind of like going i don't know what you want so we can manually import them if we wanted to now there is another way to do it and let me see if i can copy this over so i can show you from the docs and this is the documentation for the dynamic components and it basically says um that what you need to do is in the next config file we need to put the path global true right we need to put the path global true and we need to put whatever dynamic com components we want into a dynamic folder or whatever we want to call it right so i need to copy this over um and let me see and we need to go back to our application here we go and we need to go to the next config so next config and we need to look for our components true so all components true is basically saying we want to auto import the components because we don't want to write all the import statements and let me just paste it underneath to show you so basically and there we go and save so basically now we've got two components right this is going to say we got components twice duplicate key so we don't need components true because you know if you're putting this here you're putting in the path etc then that's all you need to do so now um i have this dynamic folder and what i need to do is in components i need to create that here dynamic and i need to put in my where are my lovely characters my server and static character now i could have actually left them as baker and whatever um and change things but i'm going to put them in here into my dynamic move it in there there we go and now if i save my next config it will probably be better idea and now it should work now remember sometimes when you change the next config breaks no no no it doesn't break let's go server let's see do we have our character do we have our character what do you think one two three bob yay we got our character so there we have our server character and you know let's just change it to the static character and there we go so hi justine uh aaron as we go on we remember all the times we spent together as our lives change from whatever we still be we will still friends forever oh aaron that's so beautiful um okay and that's pretty much um that's pretty much how you transfer or migrate your view up to next and like literally as i said you can just find the text and and change it and um the text is pretty much in the component so you can let it go in here and you can change your one you lost you can change the text to whatever you want so you can just kind of change and say i just did this and it's cool right and you can save that and then you'll just get that in your game when you refresh no that's the that's the real game um there we go this one here and i just did this and it's cool right so you can see here um this is how to do it and this is it live this is the next one let's just play the next one once and let's go with server and let's get started in server are you considered jam stack and the server says what's the server say the server says no the server is not jumpstack right okay do you need to set the target in the next config no it's the default value or yes you need to set it this is an interesting question if i am server if i want to do server side rendering do i need to set the target um in the next config no it's the default value yes which command do you use to build an app for production that's my bad spelling that should be your app not you up but there you go um so you need to use next build if you're using the server and are you production ready files in the disk folder and the answer is no and as you can see like i've got something highlighting the right answer so i should fix that um do you have access to rec and res from context yes you do so if you want to cheat you can actually do that i might fix that and then deploy it um but yes can you be deployed to netlify no and yes i won the game so again uh nuxt-game.netlife.app if you want to play the game if you want to build the game um just go to debut.code so you can get myrepo you can download it and then you can um and then you can justify it and if you want to do this exercise yourself which i highly recommend you do just go to sarah drasner's building web apps with you go to her repo and download it it's called game solution take that repo and then try it yourself and migrate it um to nooks and you know see all the problems that you're coming across and fix them and uh and it's good fun it's good fun to migrate from view to next and kind of understand how nooks works and yeah remember i recommend um building applications viewing next from sarah drosner and that will teach you actually how to build and how the the store works and how the actual game um is built and that's it that's pretty cool we're not going to play again we have finished oh so uh yeah i really hope you liked it um do a video on next page transitions and loading bar kind of subtle things yeah i can do that i'll put that into my uh to-do list uh i hope you like that thank you steph thank you abdesjali uh thank you venky thank you you sneel um and everyone else that's been here and watching i really appreciate you being here and it's so glad to be back i'll try and come up with more fun and cool things over the next couple of weeks and see what we come up with and that is it have a great day have a great afternoon have a great evening have a great morning depending on what part of the world you are in and yeah keep building cool fun things with nooks thank you very much everyone bye you

Channel: Debbie O'Brien

Views: 1,880

Rating: 5 out of 5

Keywords: nuxt js, nuxt.js tutorial, vue js

Id: _eyGtBjNS4c

Length: 38min 20sec (2300 seconds)

Published: Fri Feb 05 2021