Build a Movie App With Vue JS - A Vue 3 Beginners tutorial

what is going on everybody my name is tyler potts and in today's video we're going to be creating a few js movie applications so as you can see here we have a simple few movie sort of app built in few it's running on our local host and as you can see here we have a few things it shows a featured image with a featured title and description or plot line then we have a search bar and also we can click on this uh thing as you can see we get the description to named the year it was made the poster again and then um the full plot line so if we go back to few here you can see it takes us back home now we can search for anything here so let's say super man as an example we can either hit enter or hit search and as you can see here it searches for our um well whatever we search for so as you can see here we've got a few here it tells you if it's a movie or a series um i don't know if we've got any series here there we go a series there lower than clark tells you the year it looks really cool as well it's a nice smooth simple app so let's say superman returns as you can see it loads it gives us the title again the year it was made um the poster the full post not just part of poster and the full um plot line here as you can see so let's go back here so this is what we're going to be building today now this is going to be using fjs we're going to be using the open movie database api i'm going to show you how you can get this in a moment but please be aware i will not be showing my api key on screen as this will void or people if people start using it ruins my chance of making more videos on this uh api database so guys without further ado let's get started okay everyone as you can see we are now on the open movie databases website the link will be in the description below now over here you can set up your own account now to do that you'll need to click on api key or by account i mean you can there's two different accounts you can get from this movie database i say patreon which gives you unlimited i believe uh requests and stuff like that or there's the free account which only gives you a limit of 1 000 requests per day all you have to do is click free enter your email address your name your last name and the reason you're using it hit submit and within seconds you will have a api key inside of your email now save this somewhere and we will need this at a later date so let's move on so i'm now inside of my terminal here and i have the few cli already downloaded if you do not have this already downloaded you will need to go and download it i do this in many of my okay so to install the fuseli you need to run npm i hyphen g at few forward slash cli hit enter and that is going to install the few cli so you can run commands such as view create and now for you create what this does is create you a boiler plate or a templated view project you can work from so you don't have to set anything up from scratch so here we're going to few create and we're going to say view movie db youtube i'm going to hit enter and it's going to create our project it's going to ask us for a few options first now the option is going to ask us for is as you can see here do we want the default uh default a few free preview now i'm going to select manual features because there's a few extra features i want from just a few free and babel installations let's hit enter on manual selected features now it's going to ask us what we want so you can see it says choose version so we're going to need to choose the version we want we're going to need few free we want to use the latest version we're going to use babel and we're going to select the s css pre-processors we're also going to select um the router because the router or router because we're going to need to be able to set route such as the movie detail and the home page and there are only two routes but obviously you can add a lot more you can have an about the app and all that as well so this is what we've got here let's hit enter it's going to ask us which version we want so we're going to select number three so i'm just going to hit enter do we want to use history mode for it i'm just going to hit enter which will be yes and now it's going to ask us what we want to use it with now i'm going to choose node sas now if you want to use sash you can if you don't you don't have to um but if you do want to use sas then i would go with node sas unless you use dart sass if you don't know how to set up sas or node sas then i would suggest googling it first let's say enter you can then choose es lintz with uh error prevention only unless you know what you're doing and you can set up some of these configs i'm just gonna do lint on safe and then in dedicated config files hit enter i'm just gonna enter through the rest of this and now it's going to create our project so i will see you once this is done okay everyone so it's now finished running and we get left with these commands here so we can run both these commands but before we do i want to run cd view movie db youtube now once we've got that done i then want to do and and which means concatenate this next one so run this first command then run the second command and i'm going to run code dot this is going to open up in visual studio code if you don't have code installed then you may want to skip this step and open it up in whatever sublime or atom or whatever you use as your text editor once you've got that i'm going to do and and again and i'm just going to run mpm run surf as you can see it tells us down here the command to run to start our development server so if i hit enter this is going to run all of those it's going to open up in vs code and it's going to start our development server as you can see down here so first thing we're going to do is we're going to close this and we're going to put this in its own little window up here perfect let's go back so you can see it started so let's copy this here move over twice and let's open this up inside of here so there you go you can see we've got our app and we go to our about page and our home page just by clicking simply on the links here so let's just close this now what i need you to do is first i'm going to do is you're going to get your api key we're going to create a file for this i'm going to do source new file we're going to call it m which stands for environment.js and in here we're going to say export default and we're going to pass an object in here we're going to run api key and now with the key you were sent please put in here it should be saying like that maybe with a few numbers in it'll probably be quite short mine is quite short i don't know how they normally are but these is the one i got something like that i'm going to put my key in here save this file and then i'm going to come out of this file just so you can see okay so i have entered my my api key in here i can't show you what my api key is while we're doing it through a file root you can actually just paste your api key into place we use this later on but i'll explain that when we get there for now just copy it along if you're following along or just make sure you put your key in um quote quotation marks after the api key colon just like in an object so leave that there and that's good now we have our two few so we have fuse we have this router we have components we don't currently need components now you can keep components we're not going to use them so i'm just going to click delete and that's going to be gone i'm going to delete the assets we don't actually need any specific assets for this tutorial so i'm going to delete that too i'm going to head into app here and i'm going to remove everything but the router few so let's face that out delete all of this for now and we're left with just a round view i'm also going to delete all the styling inside of the style i'm going to also close this very annoying and then once we've done that let's head into home now we want to remove this import but take note that here it says use the at as an alias to forward slash source you're going to need this later on because you can't just use dot forward anymore you need to use the at when using the router don't ask me why i don't actually know i'm also going to remove this components and also the name we don't need any of this inside of our script right now let's add a bit let's remove both these and just leave the dot or the class home area here we'll just say home in there just so it's ready now in the about we don't actually need it so let's just right click and delete it that's gone but now we need to head into our router index.js now the router or router is where we define our paths our pages and stuff like that so if we go in here you can see we've got all this stuff for you router create router create web history you don't need to know that if you've set up correctly you'll see exactly what we see here now you can see it imports home from our fuse folder called home.view and this is where they're importing a component here so this is going to be our home page which is fine this is perfect this is what we want but you can see we've also got this about page now we no longer need this about page what i'm going to do it's going to highlight it delete it and leave it there and that's all we need to do to start off this app so now if we head over here you'll see we just see home now if we go to forward slash about you're going to see nothing because the page no longer exists so let's go back and get started so let's head back into app.view we need to set up our basic app here so in the top of the template we're going to create a header now in the header we're going to create a router hyphen link now this is a few router um html markup tag or dom tag and what we're gonna do or component tag i don't know how you say it and we're just gonna say two forward slash now this just me two is the exact same as writing sonic let's say as href but the way um view router handles it so this is just an anchor tag disguised so this is just a simple anchor tag with a href disguised um so yeah let's just write in here h1 with a span and in the span we're going to write view now after the span but before the closing h1 tag we're going to write movies and that is going to allow us to style this up what are going to put our router few inside of a main tag this is just for simple uh markup rules so if you've ever a lot of people skip accessibility but accessibility is very important so we have a header we have the main area of our website and then we could also have a footer for this example this app we're not going to create a footer but i just wanted to put some best practices out there um you can also there's a lot of semantic tags you should use as well but you should research those on a separate video so in here in our sas we're gonna or in our style we're gonna create a um some styles obviously so let's create our margin well i'm gonna create some padding i don't want a box sizing of border box i then want a font family and this font family will be a fire sans and sans serif now you can give it any font you want these just a font of my choice i'm also gonna do and selection and we're gonna say background transparentize this is a uh sass feature and we're just gonna say hashtag four two 883 which is a lovely green and the amount we're just going to say 0.5 so about 50 opacity and there you go that's the part for there what i'm gonna give the body a background color of three five four nine five e there we go let's also zoom in a little because this might be hard to see and let's close this side bit for now there you go so we've got our background code so let's go over here and as you can see it's looking beautiful already 10 out of 10 website let's add in an anchor tag styling of just text oh decoration none because that top bit there is annoying where i had the underline now it does not let's then go into header and in the header we'll just display this as a flex item because we just want to use flex to simply align things we're going to say align items set excuse me center justify content center we're going to give it a padding of about 10 pixels all the way around or 10 pixel 16 pixels we're going to give it a background color of a 2c 3d 4e we're then going to give a box shadow off zero pixels zero pixels six pixels rgba zero zero zero zero point one one just to give it a little bit of depth there you go we're then going to start our h1 we'll set the color to be white we're going to give it the font size and the font size could be 28 pixels we'll then give it a span of color and i have to color it it's 4 2 b 8 8 3. so again i'm not going to explain the css too much but this is just simple styling we're doing here so as you can see we get the cool looking few movies now obviously we want to make this more of a mobile app so we're not going to do a desktop view for now so i'm just going to open up our um let's fit to window we're just going to open up our what you call this responsive designed view um and we're gonna use the iphone plus you can choose any um it doesn't really matter i'm gonna use the plus because it looks slightly bigger and i just like it better uh the screen size so that's what we're gonna use for this uh tutorial and there we go so that is our whole app file done for now we don't actually have to do anything else in this file that's that done so let's close that and head into our home file now in our home file we want a few different components inside here we want a feature card which is going to be our main uh movie we're featuring so let's say a latest move your anime or whatever you want to put here for me it's going to be an anime and now we're just going to do another router link hyphen link tab and inside of here we're going to do another 2. now the 2 is actually going to be a forward slash movie forward slash tt04 tt0409591 now you might be wondering what's going on here and i'll explain this a bit later but all we're saying is this this card needs this naruto movie this naruto's imdb database id um meaning we can find uh naruto if we searched as an imdb um and obviously this is a prefix movie now all of our routes to get to a detailed page so the actual page when we click through to the movie is going to be past forward slash movie and then we're going to pass the id to each unique video it's which is then going to allow us to click on the video link which it will then request from the open movie database api and say hey we need the uh video or the movie or series or wherever it is with this id and i'll explain more of that later on so for now let's just do an image and in this image i've got a source over here because it's a very long source i had to go and copy it now you can use any source you want here any image any featured image you want we're going to give it an off let's say naruto poster because this is the naruto poster and we're going to effect the class of featured hyphen image there we go so now we've got the featured image we then need a detail and we're going to give this a h3 which is going to have its title which could be naruto we're going to have a p which is going to be um the description now i've got a description over here i'm just going to copy this over so we don't have to write it all out there we go so we've got naruto uzumaki we're not going to read it all out but that's there so now we've got a router link here now if we start styling this out if we go into our style here we'll say style and not lang stylus lang sass we can then write in here dot home and then we're gonna write dot feature card inside here we're gonna give a position of relative because we're gonna need to relative positioning and absolute positioning so we're going to create a feature image um it's what we set here right featured image correct and in here we're just going to say display block width 100 height we're only going to have it about 300 pixels um you can choose whatever you want for the height you can also style this however you want we're going to use an object fit of cuffer which it works the same as background position or background size um but instead for actual um images elements and then here we'll just say position relative and c index 0 because we want this to be behind everything else so i'm going to create detail but let's just quickly look what it looks like so as you can see it's now full screen it's looking right but our text is off screen slightly and it's a bit wrong so let's go into detail we're going to set this as position absolute that's not absolute absolute we're set to left zero right zero i'm clicking the wrong words bottom zero and then background color of it's going to be an rgb value so slightly transparent of 0 0.6 we're then going to give it a padding of about 16 pixels and a c index of one now we're going to do h3 here so make sure that c index is higher than the images it's your deck so it appears above let's give a white color and a margin bottom of 16 pixels we're then going to set the p color to just be white as well save and let's go across and as you can see we get this nice little background image here with also the title the text on a darker background or overlay on the page which is looking good so as you can see over here you can see we've got this warning no locations match with movie ttt so to fix that let's go over to our roots folder file over here and let's create a root for it so in the roots we're going to give it a path now this path is going to be forward slash movie forward slash and now we u to do a parameter we need to give it a name so we do colon and then we give it a name for example this one's going to be the id because we're looking for the url's id or the date the movie id and that's what we're going to pass through we'll then going to pass through the name which is going to be movie detail and then we'll need to pass through a component so we need to actually create the components let's call component and we're going to call it movie detail so let's go to the top here copy this paste this and replace home with movie detail save and let's just create a quick temporary file inside a fuse called movie detail dot view hit enter run for you create a template uh just put a diff dot movie movie detail sorry and just say detail there we go so now if we go back you can see that warning is now gone so but if we click on here you can see it says detail because that is the detail page and as you can see it's giving us here doesn't matter what we put here it will still always say detail nothing will change um but we could print this out so if we go to movie detail and then here in safety we could put next to detail we could do that's perfect english there by the way if anyone didn't know and in here what we need to write is dollar root dot params dot id so whatever the name of the param we put in here so where for it is here after the colon we put here after params and as you can see it gives us that if we say tyler in here you can see it gives us tyler so now we can use this right this parameter here what we put through in our script to actually call a api we're not going to do that yet we just want to set this up ready so we've got that we're now it's back in our home application and we've got our router link now we need to setup our search box so underneath our diff here we're going to put in a oh that was the wrong thing let's put in a form with the class of search hyphen box and in our action well we're going to remove the action and we're going to create it at submit dot preference and now this is a this is a modifier here prevent which this is a um an event listener so this listens for the submit the form submit event and then this dot here this dot profane is a modifier that basically says e dot prevent default so if you've ever done javascript you'll know what e dot prevent default is and that is basically what happens here and then here we just pass nothing because we don't actually want anything to happen just yet so we've got our form we've got our we'll go think sword so now let's do our input we need a text input the name and the id is not important we can completely remove those and then write placeholder and we say what are you looking for question mark then once we've got that we can save and have a look what that looks like oh go back to our homepage of course so you see we've got our little box let's create another item in here we're just going to say input which is going to be a type of submit to help us submit and we're just going to put in here search and there you go so we've got our text and our search button all in there you can see they're both there now we're going to create the rest of the markup quickly just simple which can have a diff called movies hyphen list um and we're just going to say movies in here save go across as shit's there so that's all set up let's style up our search box here so i'm just going to copy that come down to the bottom it's off here and just say search box now for our search box we want to display it as a flex item we then want to flex direction column and justify content center we're then going to give it a padding of 16 pixels and we actually want an align items of center here too we then want to say input so we want to create a generic input styling stuff here we're going to display them as block we're going to give them an appearance of none uh a border of none outline of none and finally a background of none no none there we go now we want to get the type that is equal to text so we want to get the text one and we want to sell that up individually so we're going to give this a width of 100 a color of white a background color off four nine six five eight three we then want to give a font size of about maybe 20 pixels um a padding of 10 pixels 16 pixels a border radius of around 8 pixels and finally a margin bottom of about 15 pixels with a transition of 0.4 seconds we don't want to set the placeholder equal to color f3 f3 f3 so a slightly duller white and then we're going to set so when you focus on it we have a box shadow well that didn't work box shadow of zero pixels three pixels six pixels rgba zero zero zero zero point two so when you have fray for it it looks a bit nicer as you can see that's already looking nice if we click it you get this box shadow underneath simple styling here and now under the type text we're going to have a type submit now inside the type submit we're just going to give a simple width of 100 a max width of 300 pixels a background color of 4 2 b8 83 what i'm going to give it a padding of 16 pixels a border radius of 8 pixels a color of white a font size of 20 pixels a text transform of uppercase because you know we want it to be looking cool and transition off 0.4 now we want an and active approach here which just says background color and it's going to be 3b8070 just a dollar green knight so let's have a look what this looks like i see when you click it it goes dark and we can just type stuff in here there you go so that's what that's looking like so far okay so we've done the uh search box but now we need to actually search for movies so we need this to actually work so let's set up the functionality back inside of our view file here we need to go into the script and inside the script we need to well above the export function we need to import and we're going to say ref from view now this is a part of the composition api where we're pulling ref which is kind of like react hooks if you have to use react and what we'll just going to say here is const and we're going to say search now it's going to be our search query so we're just going to say reference and we're going to sell it equal to this oh sorry my bad i've just realized i'm missing the setup file here where we go search and then we need to return search within our return function inside sep so this auto part the composition api in few free where we can grab setup and it's basically replace this like components data and all that what we use so in here we can actually pass through props if we wanted to and stuff like that but we don't actually have any so we're just going to leave it as setup so we've got our reference to search now search is going to be whatever we type into our search box here we're then going to have a constant called movies which could be equal to another reference which default and array so actually we're setting it as an array by default um and we're also going to pass this back down here as movies now we need to create a function what we call when we submit our files see we create the submit here we need to actually give it a function or some sort of uh method so we're going to say constant search move fees is equal to an arrow function and inside the arrow function we're going to say if search dot value it's not equal to nothing we'll just go log search dot value oh i've actually scrolled to the bottom there we go so we're going to search for search of value now we need to pass search movies also in our return function here so we can call it inside of our template here so over here on our form we're just going to run search movies oh i've missed a bracket there there we go or parentheses shall i say um so search movies so anytime we submit this form we're going to search movies we're just going to find the search value and uh console log it to our terminal now search is going to do nothing we need to actually set this bind this using fee model which is a view directive just like the at submits directive we'll do equals and we're just going to say search so all we're doing here saying fee model is equal to search now you might be wondering why do we use search.value here but we only use search here that's an attribute of ref now ref allows you to reference any um value so we've got here a constant of search now we can do here search dot value to modify because you can't add it is a constant you can't just say search is equal to you need to have something in it so search dot value which would be here so this is the value we can call inside of our setup function but once we export it view js knows that search is equal to search of value and that's kind of why that's like that so let's go to our app here let's type sync in let's just say hello hit enter or search and nothing happens i'm wondering why so let's have a look so we've got search dot value is equal to nothing if it's not equal to nothing should i say sorry uh then we call saying um search dot value and also we've got up here what are you looking for free model search that looks all correct is search movies right so search movies it's looking right and we've passed it back correctly let's go back let's refresh this let's search for sync again oh there you go it actually worked it was working we just had it wrong for some reason every time i highlight sank it goes weird um let's just say tyler just to make sure and actually it works let's hit search well it calls twice perfect so that is now working let's head back to our app here and start working inside here so let's remove this now this is going to be where we need to use the api now to use the open movie database we need to run a fetch command so if search is not empty we're going to run fetch and we're going to say we need to use backticks so if you can see here i'm using the backticks inside of our fetch we're going to say http forward slash www dot open movie database so omd api oopsie db api dot com forward slash question mark and now we need to pass through our api key so if you remember before we created an amp file with our api key in now we set this up so we can now run this we can do dollar um curvy parentheses uh brackets and now we can run nth dot api key now this isn't going to work just yet because we need to actually import our ap our environmental value here so we're going to say import m from forward slash at forward slash nth dot js and hit save now we can actually use this and if i'm correct and saying it should allow us to run api key so that's going to do that which is perfect we then need to do and s is equal to and we're doing another dollar sign parentheses and we're going to say search dot value we're then going to go dot then and we're going to get a response back from the server now this response we're just going to return as json so we're going to say response dot json which we then need to catch it again and enough of then and this is gonna return data this time now i'm just going to console.log our data which we search for so we're just going to log whatever we search for so let's go back so you can see here we have this let's refresh in here let's type in something let's say naruto hit search as you can see it's run our search and the api has returned us a bunch 10 different um search items now you can see we've got a title um in these we get a title a poster a type a year and a id now the id and obviously these bits are the most important bits the id is going to be what we use to open the details so let's actually um run this so if we go back we now need to say movies dot value is equal to data and it's actually under dot search with a capital f so we're going to say dub search and that's where our array of movies are stored we then want to say search dot value is equal to an empty string because we want to reset what we type inside of this box so let's search boruto and hit search we completely removed the console lock my bad let's just do log movies dot value let's type in here again burrito hit search and as you can see we get something back now our moves are in here this looks a bit weird in here because there's how ref handles everything but we don't need to worry about this because it's handled in a different way so let's go back and remove this console log here so perfect so we're getting our movies now now we need to actually loop through our movies and display them on screen so inside of our movies list we're gonna need to create a dot movie so we're gonna say diff dot movie and we're just going to put in here movie dot title with capital t but we actually need to run a v4 directive so we need to loop through our movies so we're going to say movie in movies and we need to pass a key here so we're going to say key not lay key is equal to using the colon there to say we're going to bind it and we say key is equal to movie dot i m db id just like that now if we hit save and we go back we refresh you can see we get nothing but if we type in let's say superman hit enter you can see it lists out all the names of the superman um items we get returned movie slash series so that's perfect we don't want it to start like this though so now inside of here i want to say router hyphen link so we're going to set up another oh that's not a link there you go router link and now we're going to set the 2 equal to we need to bind this so we could either do fee high from bind or we can just use a codon like that and put in here movie or sorry single quotes which are going to say forward slash movie forward slash and then we're just going to press plus and we're going to say movie dot imdb id so we'll go past 3d id so remember up here we did movie forward slash and then nasty naruto id we're doing the exact same here but actually passing through a value from the api we also need to give this a class of movie hyphen link i actually don't think that's necessary but i did anyway let's create a product hyphen image um and in here we're gonna have obviously an image uh which is gonna be bound to a movie dot poster with capital p and then we're going to have an alt here which is just going to say movie poster for now we're then going to say underneath here we're going to say enough of diff and it's going to be a class of type again that's not what we wanted and the type is going to be passed through again using the same thing as everything we're going to say movie dot and we're going to say type and this way we can now get the movie type now we use these double curly braces i know i've done it before and i haven't actually explained it yet but double curly braces allow you to print a variable or something on screen or run other commands in here such as ternary operators and stuff like that so we've got a type let's go back and as you can see everything is there you've got a movie you've got this we need to actually get our title in here so underneath the product image we need the product or just the detail and in here we're just going to say a uh p dot year which is going to be movie dot year and then we're going to have a h3 which is going to have movie dot title save and as you can see we have everything in there now we need to style this up so let's head to our um oh my bad go back let's head to our css and let's style this up so at the bottom just before the last curly brace we're going to say dot movies hyphen list inside of here we're just going to say display flex we're going to say flex wrap wrap and we're going to say margin 0 pixels 8 pixels we're going to do a dot movie now each movie is going to have a max width of 50 um it's going to have a flex of 1 150 and it's going to have a padding of 16 pixels 8 pixels and then in here we're going to say movie hyphen link is going to have a display a flex a flex direction of column it's going to have a height off a hundred percent and a well we don't need text saturations we said that earlier we then need the product image which actually in here dot product image which is gonna be position of relative and then we need to display it as block um once you've displayed it as block we don't need to set the image to be display block also we then need a width of 100 uh a height of 275 pixels um and an object fit off cover um we're going to give it a dot type and the type is going to be position absolute because we want to position this on top of the image we then need to give it a padding off around 8 pixels uh 16 pixels we then want to say background color is going to be equal to 4 2 b8 8 0 or 83 sorry we then want our color to actually be a white um bottom of 16 pixels so it's slightly above and the left of zero pixels we want touching the edge we don't want a text transform of capitalize not um uppercase because the api returns a whole lowercase um sentence and we want it to be capitalized so let's go along let's search for saying let's say daemon slayer and as you can see we get the demon slayer here we get the movie the image poster and the movie or the type on top which looks really cool there you go so that's the hovering button there now let's fix this text because it looks absolutely ugly as hell so underneath a product image we need to go down and say detail and in the detail we want to give it a background color the background color is going to be a 4 nine six five eight three we then want a padding of 16 pixels and eight pixels um we want a flex of one one one hundred percent to stretch out and a border radius of zero pixels zero pixels eight pixels eight pixels um hit save go back and as you can see it's now styled i think the color is wrong it's four nine six five eight three no that's right uh it just looks weird um let's do d dot yeah which is going to be color off aaa and a font size off about 14 pixels um let's then do the h3 which again going to be a color off white a font weight of 600 and a font size of about 18 picks 18 pixels hit save and there you go oh wait what happened to my year why is my year looking weird uh let's scroll up i did call it i put y yeah there we go go back let's search for something else now let's go um dragon ball search and there you go so now it's looking really cool we've got the title today and everything in between now if we click on one of these it takes us through and you can see the id is being printed uh dragon ball um and let's say we just go for normal dragon ball uh there you go so we now need to this page is now done this is done you can actually use this and it's your movie database to search for things but let's say we actually want to display stuff so let's just click on super let's go back we know longer needs the home dot view um so what we need to do is just close this we actually don't need the index.jsefer we just need the movie detail template now inside of here let's just delete what we have here delete that and we're gonna have a h2 um and in here well we're just gonna say movie title um because that's what it's gonna be so let's go into our script here and we're just gonna import again we're going to use ref but what's going on before mount now what on b4 mount does is a life cycle method from few and it happens anytime before we mount the components anytime this component movie detail is mounted we call on before mount now we can call the setup here and inside here we want a constant movie which is equal to ref which could be an object so we're going to get an object back from our movie and then we need a constant root which is equal to use route now to get this to work this won't work by default we actually need to import it so we need to say import use route from and this is few hyphen router so we can get it straight through we also need to import our environment again from and we need to say at forward slash m.js like we did in the previous one so this is going to be where our api key is stored now underneath route we're going to need an on we need to call the on before mount which is actually going to call an arrow function here there we go so if we log in here say uh before mount save and go back uh what's saying here emphasize but we just need to comment out a few things and also we need to just return our movie and our oh we don't need to return around let's just comment out for a second just while we use that i think we're going to return that as well cool there we go so you can see it's called three times but i think that's just because we refreshed the page three times there you go so we've got before mount uh every time we refresh we just get it once uh which uh pulls it through awesome so let's just uncomment those uncommon that oh i zoomed all the way out there jesus um and now in console log let's run a fetch like we did before now we'll use backticks again and we're just gonna http forward slash ww dot open movie database api dot com forward slash question mark api key and now we're going to pass through our api key again so it's m dot api key so this is where we stored our api key when nt and i now this i in the date uh open movie database stands for um the id which we're gonna set equal to now we need to see here so we use route so you know inside of here we was doing we did sync along the lines of dollar route dot params uh dot id to print the id um oh we need to finish let's just comment this out we're gonna have errors we need to finish it but basically what that did was print the id we passed through our route right now to get that to work inside of our setup we can't actually just call dollar out we actually have to call it from the use route so that's where we get route use route from so now in here we're going to say route dot params dot id and then we're going to say and plot is equal to full now the reason we're calling plot is equal to full is because it only gives you back a par or a small plot um whereas we want the full plot for this page we don't want to run dot then and the same as the last page again we're gonna say response is equal to response.json which will return that and then we need to say dot then and we need to say data arrow function and let's just log our data for now save let's move back and as you can see we've got our dragon ball here because that's what this um uh ttt stands for this movie and as you can see here we get everything here the uh plot and everything and we actually get a lot more things if we get a rating we get rated director awards actors run time we get every single thing on here total seasons which is really cool and all these different things um so we get a lot more by calling it directly from the id now that's great so now we can get more things and you can display all of this just like how we displayed everything else but let me show you how to get the basics through so when we need to say movie dot value is equal to data just like that that is all we need to do for that so this is saying this movie reference we set up to the data we get back from the database now we need to go up here and you can see where we get movie title we're going to replace this with movie dot title and there you go we get the dragon ball super we can then put a paragraph here which will be movie dot year for example you can pull anything here you can pull the ratings you can pull the year you can pull whatever you want through you can see it all on the right here you can put all of this through and style it however you want obviously i'm just doing a simple version of what we want so let's get the source and this is going to be movie.poster and alt will be we're just gonna say movie poster you could give it the actual name dragon ball movie poster uh but for now we won't um and then we'll give this a class a featured image we're gonna give one last p which will be a which will be the movie dot plot there you go so this all will pull through for now but you can pull through any one of these uh you want meta score the imdb rating so it's got an 8.4 imdb folks anything like that you want to pull through you can um but yeah that's all we're pulling through for now so we've got that let's actually style it up so inside of the style we need to say lang is equal to sass we're going to say movie hyphen detail and then we want to give it a padding of 16 pixels we want to give it a h2 uh of color white let's slide this up a little gives it some spacing a font size of 20 pixels 28 pixels sorry um font weight of about 600 um margin bottom of 16 pixels and then let's do featured image which will be a display block a max width of about 200 pixels we don't want it to be too big and then a margin bottom of 16 pixels again and then we want to do a b tag with the color of white a font size of about 18 pixels and finally a line height of 1.4 hit save go back and as you can see it's now styled now you can solo this a lot better and i have this was more just a quick way of styling it to see now if we turn this to full screen you see it doesn't look that good so challenge to you from me would be to style this up to look good on desktop and mobile so if we go here you can see it looks terrible on desktop here i'd love to see what you guys do to make this look a lot cooler so sell up crayon github and send me the link on twitter links in the description below so you can actually show that let's actually click on this let's put it back into the mobile view and there you go so you can see naruto we're pulling everything through and that is how you get we can probably remove that console log as well let me just remove that wait where am i console logging it i'm actually console logging i think that's just yeah it's gone now cool so as you can see here this is what we get so this is it for this video guys i hope you enjoyed it i hope you learned a lot it's been a fun project to do it's quite a big project quite a long tutorial it's actually if i'm talking correctly almost a whole hour of recording obviously this will be edited so it'll be probably like 45 minutes maybe slightly less hopefully less but i hope you enjoyed this video regardless guys it's been awesome to record it welcome to 2021 you're all amazing and just before we go i just want to say if you want to support the channel even further you can head over to my cofi link down in the uh below and just donate the simple prize for coffee to help me buy more equipment such a green screen and other things to make videos more entertaining and also not just that but also allow me to buy better equipment like better machinery desktop pc so we can run some windows tests and stuff like that as well so thank you guys for watching this video you've all been awesome thank you very much and peace out [Music] you

Channel: Tyler Potts

Views: 24,371

Rating: 4.9494381 out of 5

Keywords: webdev, javascript, javascript wizard, css, sass, scss, js, vuejs, vue, website development, website design, app dev, app, app design, app development, mobile app, native, web developer, app developer, developer, programmer

Id: UHewcsv6uJY

Length: 53min 18sec (3198 seconds)

Published: Fri Jan 01 2021

Reddit Comments

[u/Darkfire01]

I really wish that he called the app “Vuevies”