{"id":21201851,"url":"https://github.com/sandros94/nuxt-markdown-render","last_synced_at":"2025-07-10T06:32:07.139Z","repository":{"id":217211980,"uuid":"743287456","full_name":"sandros94/nuxt-markdown-render","owner":"sandros94","description":"A Nuxt wrapper for the popular markdown-it.","archived":false,"fork":false,"pushed_at":"2024-09-01T11:08:23.000Z","size":640,"stargazers_count":7,"open_issues_count":4,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-16T16:32:59.404Z","etag":null,"topics":["markdown","markdown-it","nuxt","nuxt-module"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/nuxt-markdown-render","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sandros94.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["sandros94"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2024-01-14T21:56:59.000Z","updated_at":"2024-09-01T11:08:26.000Z","dependencies_parsed_at":"2024-01-15T03:01:50.047Z","dependency_job_id":"b7a85d9c-f0ce-4d13-a192-1f5c15aa0699","html_url":"https://github.com/sandros94/nuxt-markdown-render","commit_stats":null,"previous_names":["sandros94/nuxt-markdown-render"],"tags_count":23,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandros94%2Fnuxt-markdown-render","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandros94%2Fnuxt-markdown-render/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandros94%2Fnuxt-markdown-render/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sandros94%2Fnuxt-markdown-render/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sandros94","download_url":"https://codeload.github.com/sandros94/nuxt-markdown-render/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225470631,"owners_count":17479366,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["markdown","markdown-it","nuxt","nuxt-module"],"created_at":"2024-11-20T20:11:49.042Z","updated_at":"2024-11-20T20:11:49.881Z","avatar_url":"https://github.com/sandros94.png","language":"TypeScript","funding_links":["https://github.com/sponsors/sandros94"],"categories":[],"sub_categories":[],"readme":"![nuxt-markdown-render](https://raw.githubusercontent.com/sandros94/nuxt-markdown-render/main/docs/public/nuxt-markdown-render_cover.png)\n\n# nuxt-markdown-render\n\n[![npm version][npm-version-src]][npm-version-href]\n[![npm downloads][npm-downloads-src]][npm-downloads-href]\n[![License][license-src]][license-href]\n[![Nuxt][nuxt-src]][nuxt-href]\n\nMuch inspired by [vue-markdown-render](https://github.com/cloudacy/vue-markdown-render), this Nuxt module is a simple and lightweight wrapper for [markdown-it](https://markdown-it.github.io/) with full TypeScript support.\n\n- [✨ \u0026nbsp;Release Notes](/CHANGELOG.md)\n\u003c!-- TODO: following links --\u003e\n\u003c!-- - [🏀 Online playground](https://stackblitz.com/github/sandros94/nuxt-markdown-render?file=playground%2Fapp.vue) --\u003e\n\u003c!-- - [📖 \u0026nbsp;Documentation](https://example.com) --\u003e\n\n## Features\n\n\u003c!-- Highlight some of the features your module provide here --\u003e\n- ✨ \u0026nbsp;Ease of use\n- 🔋 \u0026nbsp;Battery included ([mdc](https://github.com/antfu/markdown-it-mdc), [shiki](https://github.com/shikijs/shiki), [anchor](https://github.com/valeriangalliat/markdown-it-anchor), [link-attrbs](https://github.com/crookedneighbor/markdown-it-link-attributes), [GitHub Alerts](https://github.com/antfu/markdown-it-github-alerts))\n- 🧩 \u0026nbsp;Extensible via `markdown-it` plugins\n- 🎨 \u0026nbsp;Customizable (both via `runtimeConfig` as well as via `props`)\n- 📘 \u0026nbsp;TypeScript support\n\n## How to use it\n\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cNuxtMarkdown :source=\"md\" :components=\"{ MyComponent }\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { MyComponent } from '#components'\n\nconst md = `\n# Hello Nuxt!\n\nWelcome to the example of [nuxt-markdown-render](https://github.com/sandros94/nuxt-markdown-render).\n\n:MyComponent`\n\u003c/script\u003e\n\n```\n\ncheckout the [MDC (Markdown Components)](https://content.nuxt.com/usage/markdown) documentation on how to use components within markdown files.\n\n## Quick Setup\n\n1. Add `nuxt-markdown-render` dependency to your project\n    ```bash\n    # Using pnpm\n    pnpm add -D nuxt-markdown-render\n    \n    # Using yarn\n    yarn add --dev nuxt-markdown-render\n    \n    # Using npm\n    npm install --save-dev nuxt-markdown-render\n    ```\n\n2. Add `nuxt-markdown-render` to the `modules` section of `nuxt.config.ts`\n    ```ts\n    export default defineNuxtConfig({\n      modules: [\n        'nuxt-markdown-render'\n      ]\n    })\n    ```\n\n3. (**OPTIONAL**) Customize your defaults via `nuxtMarkdownRender` inside your `nuxt.config.ts`\n    ```ts\n    export default defineNuxtConfig({\n      modules: [\n        'nuxt-markdown-render'\n      ],\n    \n      nuxtMarkdownRender: {\n        as: 'article', // default 'div'\n        component: 'NotNuxtMarkdown', // false to disable Nuxt's auto import\n        options: {\n          html: false // default true\n        },\n        plugins: {\n          mdc: false // default mdc options object\n          anchor: {\n            level: 2 // default 1\n          }\n        }\n        vueRuntimeCompiler: false // default true\n      }\n    })\n    ```\n    This will configure the following:\n    - render them as [`article`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article) HTML tags.\n    - change the component name to `NotNuxtMarkdown`.\n    - disable [HTML tags in source](https://markdown-it.github.io/markdown-it/#MarkdownIt.new).\n    - disable the builit-in [mdc](https://github.com/antfu/markdown-it-mdc) plugin.\n    - disable vue's [`runtimeCompiler`](https://nuxt.com/docs/api/nuxt-config#runtimecompiler).\n\n## Using Plugins\n\nThere are two main ways to use `markdown-it` plugins, the first is made for simple plugins, passed as an array to the `NuxtMarkdown` component's props. The second is to create your own `NuxtMarkdown` component of advanced use cases.\n\n### Basic plugins\nSimply import them and pass them as an array for the `plugins` prop.\n```vue\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cNuxtMarkdown :source=\"md\" :plugins=\"[emoji]\" /\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { full as emoji } from 'markdown-it-emoji'\n\nconst md = `my markdown content`\n\u003c/script\u003e\n```\n\n### Advanced Plugins\nSome plugins, such asynchronous ones, do require to be handled directly by `useNuxtMarkdown` composable. This requires you to completelly overriding the `NuxtMarkdown` component with your own custom one.\n\n1. start by disabling the builtin `NuxtMarkdown` component from `nuxt.config.ts`:\n    ```ts\n    export default defineNuxtConfig({\n      modules: [\n        'nuxt-markdown-render'\n      ],\n      nuxtMarkdownRender: {\n        component: false,\n        plugins: {\n          shiki: false,\n        },\n      },\n    })\n    ```\n\n2. Create your own `~/components/NuxtMarkdown.vue`, with the following structure (substitute plugins with the desired ones, since these come pre-installed):\n    ```vue\n    \u003ctemplate\u003e\n      \u003cNuxtMarkdownRenderer :as=\"props.as\" :components=\"{ Alert, Grid }\" :source=\"content\" /\u003e\n    \u003c/template\u003e\n\n    \u003cscript setup lang=\"ts\"\u003e\n    // import installed plugins\n    import shiki from '@shikijs/markdown-it'\n    import otherPlugin from 'markdown-it-otherPlugin'\n\n    // Import your other components\n    import { Alert, Grid } from '#components' // if you are using the `markdown-it-mdc` plugin\n\n    const props = defineProps\u003c\n      as?: string\n      source?: string\n    \u003e()\n\n    const { md, content } = useNuxtMarkdown(props.source, {\n      plugins: [\n        await shiki({\n          themes: {\n            light: 'vitesse-light',\n            dark: 'vitesse-dark'\n          }\n        }),\n      ],\n    })\n\n    md.value.use(otherPlugin, { setting: 'my pick' }) // plugin with options\n    \u003c/script\u003e\n    ```\n\n3. Use this new `NuxtMarkdown` component with all the plugins already configured.\n\nThat's it! You can now use `nuxt-markdown-render` module in your Nuxt app ✨\n\n### `useNuxtMarkdown` exports\n\nThe following are the available exports for `useNuxtMarkdown` composable.\n\n```ts\nconst {\n  blank,    // a computed boolean if a new markdown-it instance is being created\n  content,  // rendered content from markdown-it\n  md,       // the markdown-it instance\n} = useNuxtMarkdown(source, configs)\n```\n\n## Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Generate type stubs\npnpm run dev:prepare\n\n# Develop with the playground\npnpm run dev\n\n# Build the playground\npnpm run dev:build\n\n# Run ESLint\npnpm run lint\n\n# Run Vitest\npnpm run test\npnpm run test:watch\n\n# Release new version\npnpm run release\n```\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-markdown-render/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/nuxt-markdown-render\n\n[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-markdown-render.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/nuxt-markdown-render\n\n[license-src]: https://img.shields.io/npm/l/nuxt-markdown-render.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://npmjs.com/package/nuxt-markdown-render\n\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandros94%2Fnuxt-markdown-render","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsandros94%2Fnuxt-markdown-render","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsandros94%2Fnuxt-markdown-render/lists"}