Q-Press has two advanced content workflows that turn Markdown pages into richer documentation:

• Live examples render Vue files from src/examples.
• API cards render Quasar-style JSON metadata through MarkdownApi.

Here are both workflows on the same page using Quasar’s QAvatar component:

Live Examples

Live examples are resolved through the examples frontmatter key and MarkdownExample.

The folder contract is:

src/markdown/quasar-components/avatar.md
src/examples/QAvatar/BasicExample.vue
src/examples/QAvatar/DenseExample.vue

In the frontmatter of your Markdown file, specify the matching topic folder:

examples: QAvatar

Then add an example card in Markdown:

<MarkdownExample title="Title for example card" file="BasicExample" no-edit no-github/>

The file="BasicExample" value is the Vue filename without the .vue extension. Because the page frontmatter says examples: QAvatar, Q-Press resolves the file from src/examples/QAvatar/BasicExample.vue.

Common Example Mistakes

API Cards

Q-Press API cards use the same general JSON shape as Quasar component API files. Import the JSON in a <script import> block, then pass it to MarkdownApi:

<script import >
import AvatarApi from 'quasar/dist/api/QAvatar.json'
</script>

<MarkdownApi :api="AvatarApi" name="QAvatar"/>

Q-Press ships API JSON for its own generated components under src/.q-press/api/components. You can use those files as a reference when creating API JSON for your own documentation components.

<MarkdownApi :api="MarkdownExampleApi" name="MarkdownExample"/>

API cards are most useful when a component has enough props, slots, or events that prose would become hard to scan.

viteExamplesPlugin

Installation

You can install the Vite Examples plugin using npm, yarn, pnpm, or bun. Choose your preferred method below:

pnpm add @md-plugins/vite-examples-plugin

Quasar Configuration

To use the Vite Examples plugin with Quasar, you can extend the Vite configuration as follows:

import { viteExamplesPlugin, viteManualChunks } from '@md-plugins/vite-examples-plugin'

extendViteConf(viteConf, { isClient }) {
  if (ctx.prod && isClient) {
    viteConf.build = viteConf.build || {}
    viteConf.build.chunkSizeWarningLimit = 650
    viteConf.build.rolldownOptions = viteConf.build.rolldownOptions || {}
    viteConf.build.rolldownOptions.output = viteConf.build.rolldownOptions.output || {}
    viteConf.build.rolldownOptions.output.codeSplitting = {
      groups: [
        {
          name: (moduleId) => viteManualChunks(moduleId) ?? null,
        },
      ],
    }
  }
}

vitePlugins: [
  viteExamplesPlugin({
    isProd: ctx.prod,
    path: ctx.appPaths.srcDir + '/examples',
  }),
  // other plugins...
]

Static Site Generation

Q-Press includes a first-class static generation workflow for docs sites that need route-specific HTML, crawler-friendly metadata, and static-host deployment without requiring a runtime SSR server.

See Q-Press SSG for the full runner workflow, CLI flags, output behavior, optional Quasar SSR renderer, reports, and browser-only content guidance.

Where To Go Next

Use the viteExamplesPlugin docs when you need deeper example-source behavior, use Q-Press SSG for docs-site prerendering, and use the viteSsgPlugin docs when you need lower-level SSG control outside the generated Q-Press runner.