Content Wind

A lightweight Nuxt theme to build a Markdown driven website, based on Nuxt Content, TailwindCSS and Iconify


  • Write pages in Markdown
  • Use layouts in Markdown pages
  • Enjoy meta tag generation
  • Configurable prose components
  • Generated navigation from pages
  • Switch between light & dark mode
  • Access 100,000 icons from 100+ icon sets
  • Highlight code blocks with Shiki
  • Create Vue components and use them in Markdown
  • Deploy on any Node or Static hosting: GH Pages, Vercel, Netlify, Heroku, etc.
  • Live edit on Nuxt Studio


Play online on Stackblitz

Open a terminal and run the following command:

npx nuxi init -t themes/content-wind my-website

Follow the instructions in the terminal and you are ready to go 🚀


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


Create your Markdown pages in the content/ directory:

# My title

This first paragraph will be treated as the page meta description.

You can overwrite meta tags by using front-matter:

title: 'Custom title'
description: 'Custom meta description'
image: 'Custom image injected as `og:image`'

# My title

This first paragraph will be treated as the page meta description.

This is done thanks to Nuxt Content's document-driven mode 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 navigation.title property in the front-matter of your pages:

navigation.title: 'Home'

# Welcome to my site

With a beautiful description

Theme configuration

You can configure Content Wind global configuration in the app.config.ts file:

interface AppConfigInput {
  cover?: string, // default: '/cover.jpg'
  socials?: {
    twitter?: string
    github?: string

Example of settings Twitter and GitHub icons in the navbar:

export default defineAppConfig({
  socials: {
    twitter: 'Atinux',
    github: 'Atinux/content-wind'


Use any icon from with the <Icon> component:

<Icon name="ph:music-notes-fill" />

You can also use it in your Markdown:


Will result in

Learn more on nuxt-icon documentation.

Code Highlight

It supports code highlighting with Shiki and as well as different VS Code themes.

export default () => 'Hello Content Wind'

Will result in:

export default () => 'Hello Content Wind'

Updating the theme is as simple as editing your nuxt.config:

import { defineNuxtConfig } from 'nuxt'

export default defineNuxtConfig({
  content: {
    highlight: {
      theme: 'one-dark-pro',

Learn more in the Content Code Highlight section.

Vue Components

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

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

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


Deploy with Vercel Deploy to Netlify

Static Hosting

Pre-render the website to be deployed on any static hosting:

npm run generate

The dist/ directory is ready to be deployed (symlink to .output/public), learn more on Nuxt docs.

Node server

Build the application for production:

npm run build

Start the server in production:

node .output/server/index.mjs

Learn more on Nuxt docs for more information.

You are at the end of the page, you can checkout the about page or the GitHub repository and give a

Thanks for reading and happy writing, Atinux.