Content Wind

A lightweight Nuxt template to build a Markdown driven website, based on the Content Wind project by Atinux.

Built with @nuxt/content, @iconify/vue, @typehaus/metropolis, and windicss

Setup

Open a terminal and run the following command:

npx nuxi init my-website -t plugwind/nuxt-content-starter

Or start by clicking on Use this template on github.com/plugwind/nuxt-content-starter.

Usage

This template has some built-in features to make it as easy as possible to create a content-driven website.

Pages

Create your Markdown pages in the content/ directory:

# My titleThis first paragraph will be treated as the page meta description.

Frontmatter

You can overwrite meta tags right from your frontmatter:

---head.title: 'Custom <title>'head.description: 'Custom meta description'head.image: 'Custom image injected as `og:image`'---# My titleThis first paragraph will be treated as the page meta description.

This is done thanks to the <ContentDoc> component of Nuxt Content.

The navigation is generated from your pages, you can take a look at the <Navbar> component to see how it works.

It uses the <ContentNavigation> component from Nuxt Content to fetch the navigation object.

To customize the title displayed in the navigation, you can set the navTitle property in the front-matter of your pages:

---navTitle: 'Home'---# Welcome to my siteWith a beautiful description

Vue Components

Add Vue components into the components/content/ directory and start using them in Markdown.

See the <Alert> component in components/content/Alert.vue.

By leveraging the <Markdown> component from Nuxt Content, you can use both slots and props in Markdown thanks to the MDC syntax.

::alert{icon="ph:circle-wavy-warning-duotone"}#titleThis is an alert#defaultThis is the default content of my alert!::

Will result in:

If you want to go deeper, take a look at the <List> component to see some useUnwrap() magic 🪄

You are at the end of the page, you can checkout the about page, features page, or the GitHub repository and give a ! Thanks for reading and happy writing!

— Nicholas Berlette and Atinux