Made withNuxtClip

Is Nuxt.js Content The Next Big Headless CMS? Nuxt.js Content Tutorial, Nuxt.js Auto-Import Tutorial

P

Program With Erik

Creator on the Nuxt channel

Watch on YouTube ↗

22K viewsMay 25, 202014:14 runtime

Explore two powerful new features in Nuxt.js: Nuxt Content and Nuxt Components. Learn how Nuxt Content provides a fast, Git-based headless CMS for your projects, allowing you to easily fetch content from Markdown, JSON, and YAML files. This tutorial walks through setting it up…

Chapters

#nuxt#clip#frameworks

Nuxt Components: Auto-Importing

What it is: A Nuxt.js feature that automatically imports components from your components/ directory, so you don't have to write import statements and register them in your script blocks.
Installation (for Nuxt < 2.13):
- Install as a dev dependency: npm install --save-dev @nuxt/components
- Add it to buildModules in nuxt.config.js:
```
export default {
  buildModules: [
    '@nuxt/components',
  ]
}
```
Usage:
- Simply create a .vue file in your components/ directory (e.g., SomeComponent.vue).
- Use it directly in your templates with its kebab-case name (e.g., <some-component />).

Note
For Nuxt.js versions 2.13 and later, this functionality is built-in. You just need to enable it in your nuxt.config.js with components: true.

Nuxt Content: Git-Based Headless CMS

What it is: A Nuxt.js module that fetches content from files in a content/ directory and injects them into your application, acting as a powerful, file-based headless CMS.
Supported Formats: Markdown, JSON, YAML, and CSV.
Key Features:
- Incredibly fast, with hot-reloading in development.
- Full-text search capabilities.
- Ability to use Vue components inside Markdown files.
Installation:
- Install the module: npm install @nuxt/content
- Add it to modules in nuxt.config.js:
```
export default {
  modules: [
    '@nuxt/content',
  ]
}
```

Fetching and Displaying Content

The primary way to fetch content is within a page component's asyncData method.
Use the injected **$content** helper function to query your content.

Example: Fetching a single document (content/index.md):

async asyncData({ $content }) {
  const doc = await $content('index').fetch();
  return { doc };
}

To render the fetched content, use the **<nuxt-content>** component:
```
<nuxt-content :document="doc" />
```

Tip
The $content helper doesn't require the file extension. It automatically resolves .md, .json, etc. based on the files in your content/ directory.

Dynamic Routing

To create dynamic pages from your content files, use a Nuxt page with a dynamic parameter, like pages/_slug.vue.
Access the slug from the params object in asyncData to fetch the corresponding content file.

Example (pages/_slug.vue):

async asyncData({ $content, params }) {
  // Falls back to 'index' if slug is not present
  const doc = await $content(params.slug || 'index').fetch();
  return { doc };
}

This setup allows URLs like /about to dynamically fetch content/about.md.

Using Vue Components in Markdown

You can embed Vue components directly in your Markdown content using their kebab-case tag name (e.g., <some-component />).

Important
A critical caveat: The Vue component must be manually imported and registered in the script of the page component (e.g., _slug.vue in the tutorial) that uses the <nuxt-content> tag. The global auto-import from Nuxt Components does not automatically apply to components being rendered via Nuxt Content's proccessor.

Introducing Nuxt Content & Nuxt Components

Hey developers, today we're looking at two really cool new features of Nuxt.js. The first one is called Content. So essentially it allows you to create Markdown files, JSON files, YAML files, and then easily import them into your Nuxt components. And so essentially it makes a Git-based headless CMS. So it's really neat. it's also really, really, really fast and you can even do searches. It has a lot of features.

Second, I want to talk to you guys about Nuxt components. So it's a new feature that is coming in the newer version of Nuxt that's not out yet, but you can try it right now by importing this in. And it allows you basically to auto-import components in Nuxt.js. And the cool thing about that is you no longer have to actually import them in yourself. You can use them basically throughout your app. So it's just a really neat feature that you can add to your Nuxt app.

Hey, and this video is sponsored by me. I actually have an amazing course that's going on right now. The cart is closing very soon. It's basically called View 360. It's aimed to take you from beginner level Vue to all the way to an expert. And we're going to touch a lot of different things. It's a very interactive class. I'm going to leave a link in the description below if you guys want to click on it and learn more about it. Let's let's jump in.

What is Nuxt.js & Project Setup

Okay, first, before we get too far, if you don't know what Nuxt is at all, I would suggest looking at nuxtjs.org. So it's basically a Vue framework that has a bunch of really neat things in built into it. Like, you can do server-side render, you can statically generate your site. It's basically a universal application, but it keeps on getting bigger and bigger all the time. They keep on adding newer and newer features. So it does a lot of things. It's just not SSR for Vue anymore. It does a lot of different things, so check out the nuxtjs.org website.

So let's first let's take a look at an app that I created. So if you're new to Next, it's really easy to start creating a Next app. You just type in npx create-nuxt-app and then the app name. And this is assuming that you have Node installed, at least version 10.

Preparing the Demo Project

And then you just type it in my-app and then it will ask you a series of questions and then basically your app will get installed. Now I went, this is an out-of-the-box Nuxt app that I just created. If you look at the package.json, we're using the latest version of 2.0, which I believe is 2.12 as of this recording. And I went and deleted a few things. I deleted everything in the components folder, and then I just have this hello from index. So if you look at the, you look at it, it says hello from index. That's it. That's all it does right now.

So let's go, and before we start it, I actually started it before and stopped it. Let's install, let's install the Nuxt components first because I think this is easier to demonstrate really quickly of what it does.

So as of this recording, it will be included in newer versions of Nuxt, but as of this recording, you have to install it. So to install it, you can see here, it has some features, tells you a little bit about the live demo. So if you're using 2.13, then you just need to put components: true and then that does the automatic import of your components. But as of this recording, we're on 2.12, so you have to do this npm or if you're a yarn person, and yarn install. By the way, I'm going to live with NPM. If you guys like NPM, leave a comment below, tell me why I'm wrong if you're a yarn person. I just, I don't know, I think NPM works, so I haven't changed. Okay, so I just typed this in here. This is my directory here. And I'm just doing an npm install --save-dev. So it's a dev dependency, @nuxt/components to install the Nuxt component set. Cool.

Then the only other thing you do is add this nuxt-components to the nuxt.config file. So where you can see right here, you just go to buildModules and there it is. Actually, I already had it in there, and I just commented it out, but this is because I just tried it right before we started just to make sure it worked.

Demo: Component Auto-Import in Action

All right, so now I have it installed, and now I'm going to go ahead and run dev. And I'm going to run it on port 4204. You see here it says 2.12.2. So okay, so the server is running. I'm going to go back to my file here. So no differences, but let's create a new component. So I'm going to create a component called... we'll call it SomeComponent.vue. And I'm just gonna, by the way I'm using an extension, a snippet extension, that's why I type v-base, I was able to create this file really quickly.

And I'm gonna create a span and just do a hello from some component just to make sure it works. And now I should be able to import this directly into my index file without any real issue. So I just do <some-component /> and I'll have it self-closing. Let's save it. Cool. You can see here, hello from index, hello from some component. Obviously, I don't have anything in here to keep it from not being on a different line. Let's see here... this is the index. All right, let's change this SomeComponent from a span to an h3. Let's see here... let's put an h3. Okay, so it's definitely working. It's on the same line. I'm sure I could get this into a different line. I don't know if I played around with it. Let's see here. Container display flex... let's do flex-direction: column. There we go. So now it's on a different line. Cool.

So we know definitely it's working. And now you see here I didn't do any import, didn't have to add it into components inside here. All I did is add it to the top here, some-component, and now it's working, which is exactly what I want to do, which is really neat.

Setting Up Nuxt Content

Alright, so we understand that now. That's pretty simple. Let's take a look at Content. So now we can create like Markdown files and have them being imported in.

Now, if you've listened to this YouTube channel, you probably know that there's something called VuePress. Now, VuePress is a way you can create like documentation sites. Some people have even created blogs from it, but it reads Markdown files, things like that. It's a very simplified, very quick approach, but I'm thinking like after seeing something like this, I mean, why not just create your blog in and documentation sites something with Nuxt and use Content? I think VuePress still has a few more features, I don't know the specifics, but this seems pretty powerful. Let's install it. So once again, I use npm, so I'll do npm install @nuxt/content. So I'm gonna stop it and I'm gonna install. This will take a moment. Okay, cool. So it went ahead and installed.

And the next thing we need to do is go into our nuxt.config file and make sure we add this line right here: @nuxt/content. Alright, so I'm going to restart my server here.

Fetching & Rendering Markdown Content

Okay, so now that we have everything installed, we should be able to grab any of the Markdown files and then display them in any of our Vue components. So let's take a look at an example of that. So now we have this really simple index file that says, "This is an index file markdown." And now we should be able to get it inside this export default and see it inside this component.

So to do that, we're going to use something called asyncData. And this is just normal for Nuxt.js. This is a way to grab information on the server that's in the server and inside the client. And we can destructure something called content, $content. And this $content is the way we're going to be able to retrieve data from our content folder that we just created. So I'm going to do const doc = await $content. And then it's a function. And then we actually pass it the file that we want. And we're actually passing the path name. So if this was in multiple directories we could do blah/markdown. And you don't have to put the actual extension, it'll do everything for you. So since we have a content folder and we added index.md, all we need to type is index here. And then fetch() and this will grab our index file. And then we just need to return { doc }. And now we can access it.

Now you're thinking, 'Oh cool, now I can just add doc in here.' But let's see what happens when we do that. So if we add it in here, I'll have it save, and you can see, oh look at this, this is essentially the whole file, right? It doesn't make much sense to us because it's just this big object. So that's where this next thing comes in, this thing called nuxt-content. So if we do add this <nuxt-content>, and then we have this document prop that we bind to, and then we just pass in the document which we know is doc. And so if we pass it in this way, it basically interprets it. And now you can see, "This is the index file from markdown." So it went ahead and added the markdown file to it.

Creating Dynamic Content Pages with Slugs

So that's neat. Now what happens if you want to do like some dynamic content? And this was actually an example they showed on the webpage. So I'll show you. So instead of having index.vue here, you can actually... anything inside this pages folder is a route on your Nuxt app. So you can put in folders and then have those folders act as different kind of places in the route that you want things to display. If you want to do dynamic content, you use an underscore.

So instead of using index.vue here, we can rename this to _slug. So the most important thing has an underscore in it. And then we could say, okay, if we want to retrieve different content here, we can pass params to it. So that's another thing here is params. So we could do something like this. We could have params.slug or if that's nothing, it'll retrieve index and that'll fetch it. So if we do something like this, and we refresh it, it still works. "This is the index file for markdown."

But what happens if we want to create like an about? So I can create a new file in our content called about.md. I'm going to call this, "This is about component" or actually, "markdown file." Make sure I save it. And then inside our file here, our route, if we do /about at the top... okay, says, "This is about markdown file." So you can see definitely it's working, right? It's still, if you look here, it's still obviously doing this as the index but now it's pulling the information out.

So what happens if we want to go back and forth between the two? So we know in Markdown we have something like this: [Go to about]. And then I can put this about in brackets and then the destination, I can do like this, so I can do (/about). So let's see if that works. So I'm gonna go back to the home folder. Go to about, you click on it, "This is about markdown file." If you go back, "This is the index file." So you can see this is working as we expect.

Embedding Vue Components in Markdown & Final Thoughts

So now we were able to go back and forth between the two. Awesome. So you can see you can pretty much create your whole site in Markdown and just have it continuously talk between the different components. It just works great. You can also use YAML and a bunch of other things.

Now the last thing I wanted to show you, so you can also, if you like, you can add in components into your Markdown itself. And the way you would do that... Now we do have this some-component here that's automatically being imported in, but I noticed that this doesn't work. Let's say I take this some-component and I put it in the about.md. And by the way, it recommends that you actually do it like this, kebab-casing, and you put in some-component and you save it. But if you look at my inspector here and look at the console, and when you click on the about folder... So you can see here, it works. You see, "Hello this is some component this is markdown file hello from some component." So if we go back... but let's say we take this some-component out of this slug folder and then click on the about, you can see now we get an error. It says, "some-component, did you register component correctly?"

So we just have to make sure... so even though it's inside this index, or I guess inside this about.md here, and we have that component, we still have to import it in. So this is kind of a bummer we have to do this, but we have to do import SomeComponent from '~/components/SomeComponent.vue' and then put it here. Now since it's in here, refresh it, we don't get any errors. It works as we expected. Cool. So no errors.

Alright, so that's all I wanted to show you guys. That was a quick example of adding in Content and Components. If you guys have any questions, leave a comment below. I really appreciate it. Thanks.