The Frontend | Nuxt.js & Storyblok - Building a Complete Blog

welcome to this video on this channel I have content on next chairs and also a little bit on story block a content management system which we use on our page behind the scenes and I thought why don't we build a project with both this is what we'll have by the end of this video but this video is only the first in a mini series of videos where we will build an entire block with knacks chairs and view chairs for our front-end with this awesome about us page but see a little bit better looking post page here and where a story block the content management system will also be set up from scratch so that you will learn how you can create posts there and load them into your front-end like this so let's get started with the first steps in this video now to get started we need a next project I will use create next app which is like a CLI a command-line interface which makes the creation of Munich's projects very easy you can simply Google for create next app and you will find this github page here of their project basically now there you all defined setup instructions and if you got npm version 5.2 or a higher installed you can use that useful npx command you get that npm version simply by visiting node.js org and by downloading and installing the latest version there which you'll need anyways to develop a next application so this is the command you want to run to create a new project and I will run it in my terminal navigated into the folder where I want to create my project folder so I'll run npx create - next - up here and then the name of the project and I'll name it story block - block because we're going to build a blog with well story block as a bagand story block is a content management system so let's hit enter here and now we're asked a couple of questions the name of the project the the description if you want to use a server framework but I don't because I won't write any server-side code we will use these server side rendering capabilities of next but I won't add any other server-side code so I'll pick non here then if we want to use a UI framework I'll also pick non here though you could of course implement or add bootstrap beautify whatever you want here if you want to build a universal or a single page application and you can always change that you can change that from within the next config file later on but I will go with universal right from the start because hey that's one of the coolest features of next then if you want to include the Axios module now Axios is JavaScript Ajax library and I want to use it I want to send Ajax requests so let's say yes linting why not let's add it my name that's correct and which package manager I want to use and I will go with NPM now this will creates the prod checked and automatically install all the dependencies and once it's done I'll open it with Visual Studio code which is the IDE I'm going to use it's free it's great why wouldn't we use it so let's wait for it to finish and here we are inside of the ID I'll open the terminal that's simply the terminal which ships with Visual Studio code it's the normal system terminal though and it's already navigated into that project folder now in there we can run npm run dev to start the development server to preview our application now this development server will automatically reload whenever we change something in a code so that's really awesome it does a lot of work for us it opens this page there after a localhost 3000 is the default address and here we just got some starting page which well it's given to us out of the box and a new project created with create NOC step now also use get so let me quickly open a new tab in this terminal keep the other process running though you want to keep that development server running as long as you work on it and then I'll quickly do my initial commit so that I later can also share my code with you so this is the default structure and new next project ships with and if this is all brand new to you check out the next resources I already got of course the most important one my udemy course but also the articles the video here on YouTube got a lot of resources on that so to have to check that out links in the video description and next works a lot with so called pages now in my blog here I'm gonna have three page that's essentially the starting page which we already got here then and about as page which just holds some dummy content but every blog has one so let's add one and a page to load a single blog post so if we click on a post from the list of posts then this single blog post should open to create more pages we need to add files or folders in the pages folder and I liked an approach of creating a subfolder for every path segment which then holds an index but view faul so let's create 140 about page it's simply an about folder in the pages folder and in that about folder I'll add an index dot view file and this is the file holding the content which we will see once we wizard the about page I'll also add another folder in the pages folder and this is the folder which holds the page that should get loaded if we click on a blog post now such a blog post of course will have some ID some identifier and this identifier should be encoded in the URL so that we essentially can get this blog post we want to load from the URL and dynamically load it into this page because I certainly don't want to hard code a page for every blog post will eventually have this is impossible to do during development so here I expect to get a post ID and I'll name the folder post id therefore and in that folder I'll again at my index dot view fall this will later hold the content for a single post now let's go back to the about page though that is very easy to finish let's work on that first and in there we create a normal view component because it's a dot view file a single component file in that template I want to create a section so the normal HTML section element and I'll give that section an ID which is about - page and on this about page I want to have some title where we say hey that's us welcome to this page so maybe h1 tag hi that's us we can always treat this later and some text so here we could say we're a bunch of highly motivated and talented people blogging about tech stuff so that's my awesome about page and we can already see it in action if we go to our page and there if we enter slash about after the 3000 from localhost 3000 there we see our content in the top left corner I would agree that we can't improve this from our styling perspective no probably also from a Content perspective but let's stick to that for now but I want to focus on the blog part on the back end on the dynamic part I guess that's more interesting so here we got our about page not finished but it's it's good for now we'll revisit it later let's now work on the front page and the general styling of our application I want to control the general styling in my main layout which we can find in the layouts folder there you find a default view file and in that default dot view file you find well the starting code this new project gave you out-of-the-box I will actually get rid of all of that because I want to write it for myself and first of all I'll add the CSS universal selector to select all elements and I'll set box sizing to border box because I hate that behavior of content box where we end up with where's sizes because the size is calculated based on the content and so on so let's use that to reset this CSS behavior and let's also maybe add a nice font to this application now of course we can add a font with font family and please note that I set up my body style here in the style text of a default of you file and I'm not using this style scoping feature so this will really be applied anywhere on the page because in case you didn't know the pages we load from the pages folder will get rendered in the place of the next hook here so this default layout here wraps all the pages so the style setup here are applied to every page and as I said I want to use a font family and we could just use cents serif here for example to use the browser defaults and serif font if I reload this page doesn't look too bad but we can improve this I want to use a custom font for that I'll wizard google fonts simply Google for it and the font I want use is called lotto Leto I don't know so this one if we click the plus we get this feature here at the bottom which allows us to easily implement this font on our page and I'll also grab the Baldwin just in case we need it and now we would normally take that link here go back to our code and paste that into our index.html file or in whichever HTML file we want to use it in the little problem we have with the snacks project is that we got no HTML file to paste this in we got a bunch of dot view files but no HTML file well we got that next config file though in here we see a bunch of interesting stuff and we get this head sections of this head property in the exported object this essentially allows us to define which content should be rendered in the head area of our page actually we also can add some content here which is rendered at the end of body scripts and so on because this uses view meta behind the scenes a third party package that makes the addition of meta tags and so on very easy and it doesn't just focus on meta text of which we also render some as you can see here it also helps us with the rendering of links here we're having a link to the favicon but now I can and add a new link with by adding a JavaScript object here in this array in this link array to be precise and I'll give this a real property of stylesheet and then if you go back we need to set the hyper reference attribute to this link which all go back and simply add an H ref property and set it to a string which holds this link if I save this now it imports Lotto so let's go back to the default of you file in the layouts folder and let's use dead and then fall back to send Seraph so now if we use that maybe put it between double quotation marks though would work otherwise - but this is cleaner now we can go back to our page and reload and we see that font changed and if we inspect it and open in the browser tools here the developer tools we can see that our text here indeed receives the lotta font-family and it does so because if we open the head section here we see that this link tag here was added and of course this happens because we added this link entry in the next config file so this is then handled by next end by the view meta package I mentioned this is then handled and basically turned into such a HTML element which is injected automatically for us now whilst we're here we can also change the title here from package name maybe to story block plus next equals love and you could also enter any description you want here this is the meta tag to this description meta tag which will define the description you see on the Google search when finding this page so here we can simply add an awesome blog about tech stuff built with next and story block so this is my description which I want to enter here maybe I shouldn't have deleted the content property or though so content and the values and the description here and now if we save this it should still work this is just a tiny update affecting the title we can see up here and also of course having an effect on this content meta tag this one here with that we're still on the styling side but this was important this is important to understand how it works now I'm back in my default dot view file and now I just want you wrap my next part here so this next tag with the main element text so this is a default HTML element main and I'll give it a class of main - content and down there in my style tags all give main content a style of margin top 4.5 Ram so that we have some spacing to the top until we will later add a header that being said let's add such a head because it would be nice if we could go back to the starting page so we want to add a header and a header is also a view component but not a page we don't load it standalone to occupy the entire page instead it goes into the components folder because it'll be a reusable component will actually only use it once but it will affect all the pages of our app and anything which isn't a page simply goes into the components folder so let's add the header there and for that I'll add a subfolder which I named the header this name might look strange to you but it actually follows the official views style guide which basically tells us that if we build a component that we will only use once and we will only use the header once we should name it there and then the component name so here it's the header and it holds the the header dot view file which is the actual component I guess now in the their header file I'll add my template I'll add a header HTML element here which I'll give CSS class of main header and which will also give a nav element as a child which will also receive a class and here the class's main - Neph now in that navigation element here I'll add an unordered list which will give a class of nav links and in that unordered list I'll now add a cup of next link objects now next link is a new element when you don't know from vanilla beauteous because next link allows you to link to a different next page it's essentially the same as a router link in a normal view arm project in here I'll add a link to all posts you could also name this home I guess and one link to the about page now you might say there's one thing missing here the list item right we should wrap this next link in a list item because we're in the unordered list and you'd be right semantically we should add a list item but I'll not wrap the next link with one I'll instead take advantage of the tech property which I can set on it and there I will set tag to Li this means the link will actually be a list item object or element but this also means that we need to nest a anchor tag without any attributes inside of it so just an empty anchor tag and this will then be handled by by next door by view behind the scenes to be precise and it will give us a anchor tag wrapped with a link wrapped with a list item where we can click the entire list item so here tag is also Li now we got this set up one thing that's missing of course is the two property which defines where this should lead to and for all posts I want to go to the start page for about I wanna go to the about page so here it's just slash about now we got our basic header set up we can probably still improve this a bit but let's take this for now and let's add a style tag here now we can also add scoped here to ensure that whichever Styles we set up here are only applied to the header and this is a fine solution to ensure that we don't accidentally overwrite our Styles somewhere else in the application though you could of course also use a CSS technique like ve m block element modifier to ensure the same but here I will use my my style like this and I'll add main header now main header is fixed or should be fixed to the top will therefore receive top and left off 0 should span the entire width of the page and should also maybe have a background color and for that I picked a nice color which is 0 to 2 D 30 this is a dark bluish color now if we save that in order to see it we need to use that header and I want to use it in my default layout because of course it should be visible on every page so I need to include it on every page and what is included on every page the layout it holds the part which is rendered why are the pages folder in the end so in the default of you fault I want you use the header and for that I'll add a script section in which I can import my header component so I'll import the header from and now in an ax project we can use it as an alias for the root folder so it's add slash components slash the header slash the header you can omit that view you should emit DW because it will be added automatically and then in this view JavaScript object here I'll simply add the components property and registered the header like this this is taking advantage of es6 I think feature which will basically automatically expand this property to their header the header so if the value has the same name as the property you can omit the value and the colon and it will automatically expand this so now we make the header component available locally in this component it's not a global component we can't use it anywhere but I only want to use it here so inside this div above my main section I'll now add the header like this a self closing tag and yes you can use it like this with capital characters because this is a template parsed by next or by view to be precise and view of course is case-sensitive so you can use case sensitive tags there and actually this is a recommended best practice though you can also use the header like this but since we got the possible that you've using it like this why don't we do so so now the header is included let's now go back and reload and yeah we can see the header there it is not super beautiful but we can get there now let's work on the look of the header of course it's not entirely looking the way I wanted to look so in that header we got our nav element and in the nav element we got the math links so maybe we should stall these nav links a bit so let's add a selector to nath links let's first of all set the list style to non to remove the bullet points let's remove any margin and padding we have we by default have one because it's a unordered list element and I want to use flexbox here to distribute the list items next to each other so I'll set the display here to flex and justify content will then be lets say Center to Center them in the middle of the navigation bar and align items will all be Center two also Center them vertically in the navigation bar or in the entire header actually I'll also give my nav legs a height of 100% and that means I'll also give my main nav a height of 100% because this in turn allows me to give my header a clearly defined height so that everything is well adjusting itself inside of that header and here I'll set a height of 4.5 rim which happens to be exactly the size I added as a margin top on my main content this ensures that the my main content doesn't go beneath the header which is in a fixed position and therefore taking out of the document flow so now I added my height to the header and to the main nav and to the links and the links are now using flexbox to position them next to each other let's have a quick look at how this looks like right now doesn't look too bad the links of course need some styling so I want to give my individual link items some nice stars and for that I'll actually add a CSS class to my next links and I'll name it nav link here so the nav link class is added to both directly on the next link object this is possible because it will be replaced by a list item in the end so now we can go down nav link was the class so let's select nav link here like that and the naff link itself doesn't really need a style right now but the anchor tag I want to style the anchor tag I want to set it to display:block so that it takes the full width of the list item I want to remove the underline so text decoration should beam on and I'll give it a white color so that we can see it a bit better in front of the dark blue background now I also want to target the naff link itself so this list item element it should receive a height of 100 percent so it should take to full height off my of my header I'll also set the display to Flex here so that I can Center the text in there vertically and I achieved this centering by using justified content and setting it to center and align items and setting it to Center this will Center the link text vertically and horizontally in this linked list item I'll add a margin of let's say 1 R M to the left and right so that there is some spacing between my linked items and I want to add a padding of let's say 0.3 REM in all directions with that if we save this this doesn't look too bad actually we got no hover effect or anything like that but the links could look worse I believe so let's now work on hover effects for that I'll add another link and now will ya nav link and then the anchor tag select it if it's inside of such an Earthling which of course is the case and that'll add the hover pseudo selector and the same with the active pseudo selector so here I got a group rule with two selectors for which the same rule should apply and in that rule I'll simply set the color to a lighter blue for that I will use the hex code 0-6 C for D 1 now this should look nice if we reload we can see does not choose shabby now we're on the about page wouldn't it be great if this would kind of be visible here by well highlighting this all the time the about part if we inspect that about link we can actually see that it get a couple of classes our nav link class but all the very short class name next link except active and another class next link active sounds like if we the next link activeclass a style we could always see that style whenever this is active so let's give that a try let's go back and let's now give our nav link a different style I want to essentially use the same style a half for hovering and active so I'll add nav link a and now only anchor tags which have the next link active style if I do that and I save and we reload nothing changed so let's see yeah obviously this is incorrect I want to select all anchor tags that are nested in the nav link where the nav link has the next link active style sorry about that so if we change the next link active selector to the nav link itself and we reload hmm both is blue the reason for this is that if we watch closely in the developer tools we can see that the aveline also got the next link active style the reason for this is that this other link leads to just slash and actually the question wherever this link is active or not is answered based on whether the current path in our URL starts with dead link and obviously every path starts with just nothing essentially so just a slash therefore this is always active the reason why this behavior works like this or why we got it like this is of course that this allows us to also mark a certain link in the navigation is active if we are on a child page and here we aren't though and I want to have exact matching thankfully there is this next link exact active class this is only applied to the link which is exactly active so where the full path matches this link and that's only the case for the second link on the about page so we just need to tweak that and say that we want to apply this color to any anchor tag that's in an aflink which has the next link exact active class if we change it like this and we go back now just the about page is active if we go to all posts just all post is active so this is looking much better now the last but not least I want to also tweet the style of my Nath link so add another style where I say Neff link with a class of next link exact active should also get its special style there I want to set a border bottom of let's say 3 pixels solid and also this bluish color here so 0-6 C 41 with that if we save and reload now we can see that slight blue border at the bottom for the active page now this is the look I want to have for now this is the look with which we can work now let's see which next steps we can take I think one next step we can take is that we work on our index page right now we still got the dummy content here with which we started now I want to render some posts there and then it's also time to connect our back end because we haven't done that at all so here I'll actually get rid of all the content in the page I'll get rid of that logo component import and of the logo component declaration in my script here I'll also get rid of all the styles which are set up here so that this is completely empty and now we can also delete that logo component in the components folder so now we essentially got an empty starting page no content at all but also no error as you can see if we reload so now let's work on that and let's render a poster or a list of posts actually for this the question of course is how should a post look like now let's create one let's maybe create an article here an article element and that should represent a single post so I'll give it a class of post preview because actually this will not be the entire post it's just an excerpt to preview we can click on this to reach the entire post and if we can click on this we maybe should also wrap this with a next link which leads to the post page then in the end now we created that single post page already don't forget that we got that indexed of you file and you post a new folder and therefore here to that next link I'll also add the two property but that of course should be populated dynamically the exact link differs depending on which post preview we're rendering here so I'll expect you kind of loop through a bunch of posts to then output them here so maybe we need a data source first let's go to our JavaScript object for that and let's add the data method and simply return an object in there so this is standard view has nothing to do with next or story block this is standard view we can add data to this component and never forget a page is just a component and in there I now want to set up a post property which is an array where we could have multiple posts a post is simply a JavaScript object which has let's say a title a new beginning to start very dramatically which get a preview text let's say this will be awesome don't miss it something like that and also a thumbnail URL so a URL leading to a thumbnail we stored on some server now you can simply Google any image you want with Google images here I prepared a simple link will of course add our own images once you got a back-end and then I'll add an ID - new beginning and ID doesn't have to be a number after all it can be text it just should be unique and let's say that our back-end creates this uniquely now I'll copy that and add a second object in that array and here all named as a second beginning which makes a lot of sense I guess and give it an idea of second beginning and leave the rest of the content this is really just to play around with it so now we got that posts array and that could be posts as we fetch them from a server I guess so now let's loop through our posts on this next link with v4 there I will loop through my posts with the normal v4 syntax post in posts referring to that posts property of course and if we use v4 we should also use the key property bind it to a dynamic value namely - post ID now we can use that same ID as a link because we expect to get the post ID as part of the link anyways so why don't we bind to dynamically and also bind that to post ID I guess it makes a lot of sense so now we're rendering a list of posts which will be clickable which will lead us to our single post page in the end now on the page there's no content yet but we'll get there step by step we also get this well a little bit boring article here because doesn't hold too much content so in that article let's add some content let's add a div with a class of post preview thumbnail for example and you can of course again use different class names whatever you like and that will actually hold my background image now the background image of course is also loaded dynamically we got that URL here in our object so we should access the thumbnail URL and set it as a background image and for this I'll simply bind style dynamically and in case you're relatively new to view this : dusty dynamic binding this : ensures that whatever we pass between the quotation marks here is interpreted as a dynamic value which has to be parsed by view and the value I want to parse here is post dot thumbnail URL so this will return a string which in the end is then bound to my style and that makes no sense we should use a JavaScript object here instead that's a syntax view we'll understand for this style property and the property in that object should be the CSS property we want to set so here this will be background image in camel case notation just as you access Styles in JavaScript - because background image with a - like this would be an invalid JavaScript property name and since this is a dynamic value this is treated as JavaScript it is executed as JavaScript so background image should hold post thumbnail URL as a value and this javascript object is first and understood by view which will then set the background image style on this element so that was a lot of talking for our background image here let's also add a second death here which will receive the class post preview content and in here I want to have a h1 tag where I render my post title so now I'm referring to this property here and of course I also want to render my my preview text so here I will also add a paragraph where I render post preview like that so now I'm referring to sorry to this preview text should it be there for so now I'm referring to preview text here now we got our post let's save all of that and reload and the styling is missing but we can clearly see our post here we got two posts and if we click one we get an error because it does navigate us to slash a second beginning which is right but on that page we got no content in our view components so therefore it breaks additionally to the page breaking this is not the most beautiful layout I have ever seen so let's work on this too and before we work on this what could we do with this HTML code in our page here well we could put it into its own component view is all about components so creating new components to encapsulate certain features is always a good idea so let's go to the components folder here and let's add a new subfolder there which I'll name block and in that subfolder I'll add a component which shall named post preview dot view will receive the template tags here and there I now want to render my next link with the blog when note though we have to remove the we for loop and the key property we will still loop through our newly created component later not inside of that component so this just holds a single post preview and we will later replicate the post preview component therefore now of course the post preview also needs some additional meat to live to be precise all the data we're rendering is now not available because the post is not available here we have to get that data from outside instead and we do get it from outside with the help of props of course props is a view feature which allows us to set our own attributes so to say on our own elements so here prop is what I add to define which props this component will receive and I want to receive a title and I'll use the more complex props definition here where I then turn title into an object so that I can define which type this prop will be it'll be a string and if it's required or not and it is required and we will get an error if we use this component incorrectly this makes testing it and playing around with it a bit easier during development so we get the title I also want to have my let's name it excerpt so that's my preview text so my excerpt will also be of type string and I also do require this and I also want to have my thumbnail image here so that will be of type string cue it's a URL after all and this will also be required so that required true cue and last but not least I get the ID of that post this will hold to be a string as it turns out and this will also be required so not the most exciting props but hey it is what it is now with these props being available we know that they will be available because we set them all to required we can use them so instead of post ID it's not just ID referring to that ID property which we can access from the template instead of post from nail URL it's now just thumbnail URL because no it's fun tail image excuse me because that's what we set up here so fun nail image instead of post title it's just title because that's the name of our prop here and instead of post preview text it's now excerpt so now this component would work once we pass data from outside now let's all the work on this styling whilst we're here first of all I'll add my style text for this and I'll scope my stylings here again so that they can't leave this file and I want to stall my anchor tag so I wrapped this entire article with an anchor tag in the end do two next link I want to style this to remove any text decoration that it would add and to set the color to black so that our text color isn't just blue I don't want to have too blue color in my post here the post preview itself remember post preview this refers to the article element here the post preview itself should maybe get a border radius of 3 R M let three pixels let's say I also want to add a little box shadow of one pixel one pixel maybe five pixels and one pixels so this is XY blur and spread and then give it a box shadow of rgba 0 0 0.5 this will be a black shadow with 50% transparency and I'll give it a width of 90% so that the surrounding container will have to decide how much space this receives and a margin of auto to Center it horizontally and a height of let's say 20 REM next I want to stall my post preview thumbnail so let's grab this class here and add a CSS selector for it like that and the post preview thumbnail will receive the actual image through that dynamic binding we got here but of course the positioning of the image dad is something I want to define down here so I'll set background position and set it to center so that the image is always nicely centered and I'll add background size and set it to covered I also will give it a width of 100% so it did it has the full width of the surrounding container and a height of let's say 10 R M so that we can see something now I also get my content so the post preview content here let's also grab that and let's add a selector for that down here too and now the post preview content should be well styling the text I have in there so there I will add text-align:center to make sure all the text is nicely centered horizontally and maybe a padding of when R M so that unlike the image which should stretch to the edges of the surrounding box this doesn't I think this looks a bit nicer since the surrounding box will have a box shadow so I believe this doesn't look too pretty if our content touches the edges then so this is my layout for now now this is actually written mu L mobile first for bigger screens I'll add a media query here standard CSS feature and set a min width of let's say 35 REM which by default equals 560 pixels and for this layout so for screens that are bigger than that so for tablets and bigger I'll set my post previous style to a width of 25 REM instead of these 90 % which I defined up here so that it's not as broad on bigger screens and I'll add a margin of 1 REM with that if we save we see no content on the starting page because we're not using the post preview component so let's start using it for this I'll go back to my index to view file in the pages folder and first of all I'll import it so I'll import post preview from add components blog post review like this now with that added I have to register it so in this javascript object of that view component I'll add the components key and I'll register post review like this year now we can start using it and now I want to use it together with a for loop of course because we still got that post data here so let's add v4 on our component and still loop through all posts with the same loop we used before so nothing new here but of course I now want to bind all the props post preview receives so I want to bind title excerpt thumbnail image and ID so let's do that let's go back to the index page let's bind title and they're all bound dynamically because obviously the value is dynamic I can't hard code it I don't know it in advance so here I'll bind post title then I'll bind my second value which is the excerpt that will now be this preview text I believe so here it's preview text to be precise it's post preview text then we got the thumbnail image and thereafter D I D so let's bind thumbnail image to post thumbnail URL that's the property name in the data here and let's now also add our our last thing the ID and it's bonded to post ID now with that if we save we see our posts here now one thing I also see is that I don't see the image background image so there's an error yeah there is a dump error in my post preview dead image URL can't be added as a value for background image like this instead we want to use URL here so we want to wrap this with URL in a string and then with a closing parenthesis because URL as a CSS function that accepts a string URL and which then converts this basically into a value CA can use for the background image so let's add URL and wrap thumbnail image with it now with that if we save it we see our deliciously looking images so this looks much better now one thing that doesn't look as good is of course the thing that if we increase the the width they stay on the left and also that here we got no no place no space to the top for example so let's fix that let's start with the space to the top for this I'll go to my index to view file in the pages folder and I'll simply work on that container class which I got here anyways I'll instead give it an ID of posts because this is what I have here and then I'll take this posts selector and maybe add a scope styles here too and I'll add a padding top of let's say it um so now if I save this now we got more space now regarding the positioning I will go back to the code and I will turn this to be Flex container so that section is a Flex container and all the post elements in there should be positioned in that Flex container they will be positioned in the center both horizontally and also with a line items vertically though that doesn't really matter because I don't assign a height to posts but still now they're aligned like this and on smaller green screens they now shrink which of course is not optimal so on bigger screens this is actually a nice look but I believe on smaller screens we should do something the problem is that they are aligned next to each other in a row on smaller screens we should simply set Flex direction here to column whoops to column if we save that there beneath each other and now we maybe add some margin to our post preview so on smaller screens we also want to add that margin of one REM so let's remove it from that media query in the post preview component and let's instead add it to post preview and so margin:1em top and bottom and otto left and right here like this well let's just use one ram we need don't need auto it should have one ram into all directions we don't need auto because we use flexbox for positioning anyways so now this looks good on mobile but on bigger screens we could fit to next to each other so for bigger screens I'll add a media query again add media min-width now let's maybe try these 35 Ram again we used before in the post preview component so that same media query we had down there let's use that and for such a screen I want to set my Flex direction to roll like this so now it looks good on bigger screens and on smaller screens I think we can work with this now of course we want to get posts from the back and anyone ensure that we can click them and actually reach a page where we see something so these are in the next two big things we want to work on the back end is what I want to work on first though so that we can fetch some data and there after we'll work on the detail page now let's dive into that back-end and then starting with it will use story block a content management system in the next video of this series

Channel: Academind

Views: 59,488

Keywords: nuxt, nuxtjs, nuxt.js, vue, vuejs, vue.js, storyblok, headless cms, cms, build a blog, tutorial, full course, blog, nuxt tutorial, nuxt course

Id: Dc_5BpIB4X4

Length: 49min 3sec (2943 seconds)

Published: Mon Mar 19 2018