Strapi Nuxt UI Typography

A Strapi 5 plugin that replaces the admin input for every built-in Rich text (Markdown) field with an editor for Markdown and official Nuxt UI typography MDC.

The content schema remains type: "richtext" and the field still stores plain text. No custom field or proprietary JSON format is introduced, so existing content types and values keep working.

Included editor features

• Familiar Markdown toolbar for bold, italic, strike, code, lists, quote, and links.
• Complete Nuxt UI Typography menu: Accordion, Badge, Callout shortcuts, Card, Card Group, Code Collapse, Code Group, Code Preview, Code Tree, Collapsible, Field, Field Group, Icon, Kbd, Prompt, Steps, and Tabs.
• Markdown typography helpers for headings, images with zoom/size metadata, iframe embeds, highlighted code blocks with filenames, tables, separators, and styled inline code. Standard Markdown covers headers, text, lists, tables, blockquotes, links, and images.
• Iconify picker with local presets, collection filtering, debounced online search, SVG previews, and manual i-collection-icon input.
• Edit, Split, and Preview modes.
• Interactive previews for Accordion, Tabs, Collapsible, Code Collapse, Code Group, Code Tree, Code Preview, Prompt copy, Card Group, and Field Group.
• Visual section editor that writes changes back to MDC.
• Native Strapi form state, validation message, disabled state, and field focus support.

The admin preview is intentionally an approximation. Final colors, typography, spacing, and responsive behavior follow the Nuxt application's theme.

Icon search sends the entered keyword and selected collection to the public https://api.iconify.design endpoint. If the Strapi admin Content Security Policy blocks that origin, manual values and local presets remain usable, while remote search/SVG previews show a fallback. Allow connect-src and img-src for https://api.iconify.design if online search is desired.

Install from npm in Strapi 5

npm install strapi-nuxt-ui-typography

Or with Bun:

bun add strapi-nuxt-ui-typography

Enable the installed package without resolve:

// config/plugins.ts
export default {
  'nuxt-ui-typography': {
    enabled: true
  }
}

Clear the generated admin cache and rebuild:

rm -rf .cache dist
npm run build
npm run develop

Every existing and future Rich text (Markdown) field will use the Nuxt UI editor. Do not add a custom field and do not change content-type schemas.

Local plugin development

During local development, link the package using the Strapi Plugin SDK:

npm install
npm run watch:link

Then, from the Strapi application:

npx yalc add --link strapi-nuxt-ui-typography
npm install
npm run develop

For an app-local plugin, copy this repository into src/plugins/nuxt-ui-typography, build it with npm run watch, and enable it:

// config/plugins.ts
export default {
  'nuxt-ui-typography': {
    enabled: true,
    resolve: './src/plugins/nuxt-ui-typography'
  }
}

The plugin uses Strapi 5's app.addFields({ type: 'richtext' }) admin extension point. This replaces the default input component while preserving the built-in field type. It does not patch Strapi files or mutate the server schema.

Render in Nuxt

Install Nuxt UI, the MDC runtime, and the icon collections your editors may select:

npm install @nuxt/ui @nuxtjs/mdc \
  @iconify-json/lucide \
  @iconify-json/simple-icons \
  @iconify-json/heroicons \
  @iconify-json/material-symbols \
  @iconify-json/ph \
  @iconify-json/tabler \
  @iconify-json/vscode-icons

Register the modules:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/ui',
    '@nuxtjs/mdc'
  ],
  css: ['~/assets/css/main.css']
})

/* app/assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

Render the string returned by Strapi:

<script setup lang="ts">
defineProps<{ value?: string | null }>()
</script>

<template>
  <MDC :value="value || ''" />
</template>

A production-ready example with loading, empty, and error states is available at examples/nuxt/components/StrapiMdc.vue.

Nuxt UI supplies all prose components used by the generated syntax. Icon values use Nuxt's i-{collection}-{name} convention. The frontend must install each selected Iconify collection or configure a remote/custom icon provider.

@nuxtjs/mdc currently remains supported by Nuxt UI, though its maintainers recommend Comark for new rendering integrations. The Markdown and MDC stored by this plugin remain compatible, so the renderer can be migrated without changing Strapi content.

Example stored value

::accordion
---
defaultValue:
  - '1'
---

::accordion-item{label="Sebelum memulai" icon="i-lucide-circle-help"}
Pastikan akun dan akses sudah tersedia.
::

::accordion-item{label="Hubungkan layanan" icon="i-lucide-link"}
Ikuti petunjuk integrasi di dashboard.
::

::

Security boundary

MDC can instantiate registered Vue components and pass props such as links. Treat editor access as trusted author access, restrict Content Manager permissions, and validate external URLs according to the frontend's allowlist policy. Do not register sensitive frontend components as globally available MDC components.

Development

npm test
npm run check
npm run build
npm run verify