Transcript from the "Set Up Nuxt Config" Lesson
[00:00:00]
>> So we also have a resources folder for this exercise as well, we have some static images of food, we have a header image that's gonna be our cover image. We have the main.scss, that's the base css like we had before, we have our an empty cart icon that you're gonna use during an exercise.
[00:00:20] We have a foodlogo, so we have a logo for application and it's an svg file. And we have a thing called env, it's not called dotenv it will be called dotenv in our application, but it's not right now, so that it doesn't get ignored in GitHub so that you can access it.
[00:00:40] Here is the font that we're gonna be working with, so after this, what we said was we were gonna work through this list. The first thing that we're gonna do is we're gonna set up our nuxt config. And in that nuxt config, we're going to first set up our fonts and some of the assets that we're using.
[00:01:00] So I'm gonna grab this font. And inside of our nuxt config again I'm gonna use a snippet, so I'm gonna use and font and that will give me a default for how we set up fonts in next. So, link rel, stylesheet and then it has I'm pasting in what we're gonna use, we're gonna use Mulish at font weight 300 and Poppins at weight 600.
[00:01:29] Then in order to use that in our files, I'm gonna adjust change some of the defaults that are in default view. I'm gonna say Mulisch and I'm gonna say font weight 300, and then I'm gonna go below. I'm gonna take out all these button styles because we already have a global button style that will load in.
[00:01:55] And I'm gonna also add in h1, h2 h3, h4 and those will all have the font weight of Poppins that we just added. So we're gonna say Poppins. And we have 600 here, was what we were using and then inside pages, index.vuw. I'm gonna dump this out for the time being.
[00:02:25] And say main class container and I'm gonna remove these styles because we're not gonna need them. In order to use the styles that we do need, I'm gonna bring in our main dot css. But not before I just put in a little like Hi from home page so that we know that we're on the homepage when we visited next.
[00:02:48] So I'm gonna go over to my food app resources, and I'm gonna grab my main.css, and I'm gonna load it into the assets section. That's where I'm going to use it from, while I'm at it, I'm also gonna grab the header image and add it to the asset section.
[00:03:04] Now, in order for that to be registered properly, we go back into the next config. So we're go into the next config, we say assets main.scss, so whatever we've got the tilda to say go to the base directory. Then we say assets/main.scss, however, it's named, then the next thing that we need to do is.
[00:03:30] I'm gonna bring these photo images over, and I'm gonna put them in the static folder right here. It's really nice VS code allows you to drag and drop, now they didn't used to do that, that was that's really cool. So that's available to us, and I'm also going to bring over my food data.
[00:03:51] I'm gonna bring it statically at first and then we're gonna bring it in from an API. Now, I mentioned that we don't actually have to change the next config in order to register the store. Just like we registered the, in next config we're registering a lot of other things like plugins and assets, but we don't have to do that inside the store.
[00:04:10] I'm gonna make an index.js file, and I'm gonna go into the store and save this file. And remember from the other course you might remember that I said in my snippets. There are two different types of stores like store boiler plates that things are accustomed to use. Eli is gonna be accustomed to the V store which is kind of classic view x.
[00:04:33] Whereas next will assume this other type of format, and that's v store two in my snippet. So this boilerplate that it spits out is the kind of default store that next is expecting. I'm going to comment these out for now because we're not gonna use them quite yet.
[00:04:53] And I'm gonna put my food data inside that state, so now I have access to this food data in my application. One thing you will note that vuw Seelye, we just needed to refresh the page. Sometimes when we, kind of create something and nuxt config has figure things out like it has to sniff out something new.
[00:05:14] What we'll have to do is, turn the server on and off again, because it's going to need to understand, okay? Wait, I gotta find that file and register it, I need to, it's compiling everything on the server instead. So, now we have restarted the server all of those nuxt config options have now been registered.
[00:05:36] And you can see that we have this new font, we say Hi from homepage. And if we look in view, we should be able to see all of that food data coming in.