Setup and configure Nuxt Content

Instructor: [0:00] What is Nuxt Content? It's a powerful module that allows you to use your code base as a Git-based headless CMS to access Markdown, JSON, YAML, XML, and even CSV files through an API-like interface. If you're working on a project that doesn't have Nuxt Content yet, or you didn't add it in the setup earlier, no problem. Let's step through it right now.

[0:22] All we need to do is open up our terminal and run the command npm install @nuxt/content. Once it's installed, you'll see that inside of our package.json, we see our Nuxt Content module. Next, to finalize the setup, let's go ahead and open up our nuxt.config.js, and let's go ahead and scroll down to the section that's labeled Modules.

[0:44] Inside of here, let's go ahead and tell Nuxt that we're going to use our Nuxt Content module. Then I'll go ahead and add an additional field here for the content so that, in case you want to configure things regarding Nuxt Content, you can do so inside of this particular block.

[0:58] I'll leave a comment here for where the Nuxt Content option goes. Then, to keep consistent with the rest of the configuration, I'll go ahead and just add the docs for Nuxt Content in here. With that, let's go and test to make sure that everything works.

[1:11] Let's go and open up the terminal, and let's run Yarn dev to start up our local dev server. Once that's running, let's go and open up localhost:3000. To make sure everything works, instead of our home page, let's go and open up a mounted lifecycle hook.

[1:25] Then we're going to log out this .$ content, which allows us to check whether or not the content module exists in the Nuxt build. As we can see here, there it is. With that, we've learned how to install and setup Nuxt Content inside of our project.