3. Nuxt Content Usage

NuxtContent Logo v3

Nuxt Content Doc

The Nuxt Content Doc is a Nuxt module that allows you to generate HTML content from markdown files. Used in combination with Tailwind Typography module to automatically 'up level the default style' Markdown documents to beautiful and readable HTML.

Installation

Install Content Doc

npx nuxi@latest module add content

NuxtContent Remark Plugin

Nuxt Content uses the MDC Remark plugins process Markdown text and to allow Markdown to support Vue components. One downside to this approach is that it will convert an image into a <p><img></p> structure. For example, an image specified in Markdown like this:

![Logo](/images/PPNDLogoSm.png)

It will get converted by the MDC Remark plugin into HTML like this:

<p>
  <img title="Logo" src="/images/PPNDLogoSm.png">
</p>

remark-unwrap-images

The outer <p></p> tags can cause formatting issues.

NuxtContent MDC uses remark plugins list to do the conversion to code blocks. A remark-unwrap-images plugin will unwrap images from the paragraph elements.

The Nuxt Configuration for remark plugins documents on how to enable them.

Unwrap Installation

npm install remark-unwrap-images

And then add this to your nuxt.config.js

content: {
  markdown: {
    remarkPlugins: ['remark-unwrap-images']
  },
},

Nuxt Color mode

This module helps your website support dark, light, sepia, and default color modes. Docs can be found here

npx nuxi module add color-mode

make sure it is added to nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    '@nuxtjs/color-mode'
  ]
})

Tailwind CSS

The Tailwind CSS module enables the use of Tailwind CSS classes and particularly the Typographic Prose class for NuxtContent Markdown files. Tailwind CSS has a CSS 'reset', which resets the basic default classes for common HTML elements like <p></p> and <h1></h1>. The Tailwind Typographic Prose class is an Uber class which will style its element and all of its children elements with carefully chosen defaults for consistency and readability.

Installation

I installed the Tailwind CSS module using the nuxt cli like this:

npx nuxi@latest module add tailwindcss

And the Tailwind Typographic prose module like this:

npm install @tailwindcss/typography

The typographic prose module is a plugin to the tailwind css nuxt module. To configure it, create a tailwind.config.js file and add the following configuration. The 100ch is the 100 character standard width for prose sections.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  plugins: [
    require('@tailwindcss/typography')
  ],
  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            maxWidth: '100ch', // add required value here
          }
        }
      }
    },
  },
}

Restarting the server will enable the new module.

Dev Tools

Auto Install You just need to go to your nuxt.config file and set dev tools to true:

nuxt.config.ts

export default defineNuxtConfig({
  devtools: { enabled: true },
})

Nuxt will automatically install the DevTools module for you.

You can check in the Vue dev tools under the modules section.

Using Tailwind Typographic Prose

A common way to add the Tailwind Typographic prose class is to add the class="prose" attribute to the parent element containing the NuxtContent <ContentRenderer /> element, for example the surrounding <div></div> or <article></article> element. Tailwind CSS, by default, will strip all the normal default HTML styling, i.e. the <h1></h1> element is not shown as large by default. When you use the Prose class it reasserts a clean and typography styling. The <h1></h1> elements are all set to this. You add the tailwind class prose for light mode and dark: prose-invert for dark mode.

<template>
  <article class="prose dark:prose-invert">
    <ContentRenderer />
  </article>
</template>

Using Tailwind CSS

In a .vue file you can use tailwind CSS classes directly in the elements within the <template></template> section, or you can create CSS rules in the <style></style> section. To add tailwind classes in the style section use the @apply line, for example, the class link has the tailwind CSS class p-1 and hover:bg-gray-200 applied to it.

@apply Tailwind in 

<style scoped>
.link {
  @apply p-1 hover:bg-gray-200
}
</style>

Tailwind in

or the same classes used in the <template></template> section

<template>
  <a class="p-1 hover:bg-gray-200" src="">Link</a>
</template>

Deep() Bind() selectors

Two useful vue functions I found helpful with tailwind css are the :deep() and v-bind() functions. :deep() is useful to select descendent HTML elements and even ones that are dynamically placed. v-bind() allows you to feed your style section with variables from the <script></script> section

For example:

<style>
.monk-inset :deep(p) {
  font-size: v-bind('pFontSizeClass');
  line-height: v-bind('pLineHeightClass');
  height: v-bind('pLineHeightClass');
  margin: -0.2ch 0 0 0;
  @apply p-0
}
</style>

This :deep(p) selects all p sections within the element of class .monk-inset. The v-bind({variable}) brings the variables pFontSizeClass, pLineHeightClass, pLineHeightClass to set those css styles programmatically. The @apply includes tailwind classes.

Social Share Buttons

Since each page has custom metadata, I also wanted convenience buttons to quickly share the page on social media. Stefano Bartoletti Nuxt Social Share module was a good and easy as following the instructions to add the module. Then add the component into the page template.

The terminal command I issued.

npx nuxi@latest module add nuxt-social-share

nuxt.config.ts entries required. You need to replace your public website instead of the placeholder website below.

  modules: [
    '@stefanobartoletti/nuxt-social-share'
  ],

  socialShare: {
    baseUrl: 'https://placeholder.jamstart.com'
  }

Here is the usage within the code.

<template>
/<!-- snip -->
  <SocialShare
    v-for="network in ['facebook', 'x', 'linkedin', 'email']"
    :key="network"
    :label="false"
    :network="network"
    :styled="true"
  />
<!-- snip -->
</template>

CloudFlare Analytics

Install

npm i nuxt-cloudflare-analytics

Update nuxt.config.js

{
  modules: [
    'nuxt-cloudflare-analytics'
  ],
  cloudflareAnalytics: {
    // See below for more options
    token: 'your-token', // Example 1a2b3v4a5er6ac7r8afd
  }
}