For Quasar CLI Vite apps, use the App Extension when possible:

quasar ext add @quasar/qmarkdown

The App Extension registers the boot file, adds the stylesheet, configures Vue template handling for markdown content, and can optionally enable importing raw markdown files.

Install the UI package directly only when you want to register QMarkdown manually or use it outside the App Extension flow.

No. QMarkdown v4 targets Quasar CLI Vite 3 and requires @quasar/app-vite >=3.0.0. If your app still uses @quasar/app-webpack, migrate the app to Quasar CLI Vite before installing QMarkdown v4.

The App Extension adds the stylesheet for you.

If you install the UI package directly, import the stylesheet in your boot file or app entry:

import "@quasar/quasar-ui-qmarkdown/dist/index.css";

Quasar CLI projects can also centralize the stylesheet in quasar.config.ts:

// Note: using ~ tells Quasar the file resides in node_modules
css: [
  "app.scss",
  "~@quasar/quasar-ui-qmarkdown/dist/index.css",
],

Keep runtime component registration in the App Extension and import only the component instance type in <script setup>:

import { useTemplateRef } from "vue";
import type { QMarkdown } from "@quasar/quasar-ui-qmarkdown";

const markdownRef = useTemplateRef<QMarkdown>("markdown");

A normal value import of QMarkdown creates a local component binding in <script setup> and takes precedence over the globally registered component. Use a normal import only when you intend to use the UI component directly, and follow the manual boot file installation path instead of registering it through both paths.

Because application source imports the type, add the UI package as a direct application dependency:

pnpm add @quasar/quasar-ui-qmarkdown

Applications that only use the globally registered component in templates do not need this extra direct dependency.

Use src when the markdown is already available as a string, such as markdown imported from a file or fetched from an API.

Use the default slot when the markdown lives inline in the Vue template:

<q-markdown>
  ## Hello QMarkdown

  This content is rendered from the default slot.
</q-markdown>

If both are supplied, the slot content takes precedence.

Markdown is whitespace-sensitive. The App Extension configures Vue template handling so q-markdown content is preserved correctly.

If you are registering QMarkdown manually, make sure your quasar.config.* preserves whitespace for QMarkdown:

build: {
  viteVuePluginOptions: {
    template: {
      compilerOptions: {
        whitespace: "preserve",
        isPreTag: (tag) => tag === "pre" || tag === "q-markdown" || tag === "QMarkdown",
      },
    },
  },
}

QMarkdown also removes common template indentation from slotted markdown so the content can be formatted naturally inside Vue files.

Use the inline prop when the markdown should participate in existing text flow:

<p>
  <q-markdown inline src="Render **inline markdown** without paragraph wrappers." />
</p>

Inline mode uses markdown-it.renderInline() and a span root, so it avoids generated block-level paragraph wrappers. Keep normal block mode for headings, lists, tables, blockquotes, and full markdown documents.

Install the App Extension and answer true when prompted to enable importing markdown files.

Then keep markdown files in your source tree, such as src/assets, not in public:

import content from "@/assets/my-page.md";

<q-markdown :src="content" />

The App Extension adds a Vite raw importer for *.md files when that prompt is enabled.

Markdown-it 15 does not linkify domains without a protocol by default. Enable fuzzyLink through QMarkdown’s linkify-options prop:

<q-markdown :linkify-options="{ fuzzyLink: true }" :src="markdown" />

Use useQMarkdownGlobalProps({ linkifyOptions: { fuzzyLink: true } }) when every QMarkdown instance should use this behavior.

Pass plugins directly to a QMarkdown instance or register them globally with useQMarkdownGlobalProps.

import { useQMarkdownGlobalProps } from "@quasar/quasar-ui-qmarkdown";
import { full as emoji } from "markdown-it-emoji";

useQMarkdownGlobalProps({
  plugins: [emoji],
});

Global props belong in a boot file when you want every QMarkdown instance to share the same defaults.

QMarkdown v2+ removed several optional markdown-it plugins from the default runtime to reduce payload size and improve performance.

If you need features such as abbreviations, definition lists, emoji, footnotes, insert, mark, subscript, superscript, or task lists, install and register the matching markdown-it plugin.

QMarkdown uses Prism for language highlighting. When Prism is available, you can access it through window.Prism and load additional Prism languages or plugins as needed.

For examples, see Using QMarkdown.

Yes. After the App Extension is installed, run:

quasar describe QMarkdown

The same generated API is shown on the Using QMarkdown page.

Use GitHub Issues for bugs and feature requests. Use GitHub Discussions for broader questions, RFCs, or implementation discussion.