Nuxt Content Example

A quick and easy example of the new Nuxt Content and Components library

Check out the live demo at nuxt-content-example.surge.sh and the tutorial here.

Relevant documentation:

• Nuxt components
• Nuxt content

🚀 Features

• [x] Using Nuxt content
• [x] Using Nuxt components
• [x] Index and about pages
• [x] Posts page, which lists out posts
• [x] Separate page for each post
• [x] Custom components for page layouts
• [x] Style with normalize.css and custom styles
• [x] SEO with meta tags
• [ ] Include components in markdown

🛠 Build setup

Clone or fork this repository then download it, then run this command to start the development server:

npm run dev

Make changes in components and markdown files and see them reflected live in your website.

To generate a full static site, run

npm run generate

This will generate the static site in the dist/ directory

Pages

Any markdown file in the content/ folder directory will create a new page. For example, try creating the page privacy-policy.md with the following content:

---
title: Privacy policy
description: How our services value your privacy
---

This is the privacy policy for my company.

Save the file, and head over to localhost:3000/privacy-policy to view the page.

This page is being generated by pages/_slug.vue:

<template>
  <Default :title="doc.title">
    <!-- rendering markdown-->
    <nuxt-content :document="doc" />
  </Default>
</template>


<script>
export default {
  ...,
  async asyncData({$content, params}) {
    // getting document based on URL
    // if you're on localhost:300/abc, params.slug is "abc"
    const doc = await $content(params.slug).fetch();
    return { doc }
  }
}
</script>

View the tutorial for pages and posts here.

Hosting

Statically generate the site by running

npm run generate

This will create a dist/ folder with the site. I decided to host the site using Surge.sh. Install surge with

npm install --global surge

(Mac users may have to run sudo npm install --global surge)

To host the dist/ folder, run

surge dist

If you haven't yet created an account, the CLI will guide you through the steps. You can choose a custom *.surge.sh domain.

Check out the live demo for this site at nuxt-content-example.surge.sh.

♥️ Support

If you liked this project, consider supporting by

• ⭐️ Starring the repository
• 🎒 Checking out my other projects
• ☕️ Buying me coffee

📜 License

MIT