QMarkdown not rendering during SSR (hydration mismatch)

[f3k-freek]

Describe the bug

When using @quasar/quasar-ui-qmarkdown in an SSR + SPA Quasar project, hydration fails because the component renders nothing on the server, but a <div> on the client. This results in Vue’s hydration mismatch warning:

[Vue warn]: Hydration node mismatch:
- rendered on server: 
- expected on client: div
  at <QMarkdown src="# hello world" >

This effectively means the markdown is not being rendered at SSR time.

---

To Reproduce

Steps to reproduce the behavior:

1. Create a new Quasar project in SSR mode (quasar create ... --mode ssr)

2. Install extension:

   quasar ext add @quasar/qmarkdown

3. Use QMarkdown inside a page/component:

4. Run in SSR mode (quasar dev -m ssr)

5. Open the page and check browser console → hydration warning.

6. Check raw server-rendered HTML (view-source:) → the q-markdown output is missing.

---

Expected behavior

The markdown should be parsed and rendered to HTML on the server, so that server-rendered HTML and client-rendered HTML match. No hydration errors should occur.

---

Screenshots

N/A

---

Desktop (please complete the following information)

• OS: macOS 15.6.1
• Browser: Chromium: 138.0.7204.157
• Quasar: 2.16.0
• Quasar/cli: 2.5.0
• @quasar/quasar-ui-qmarkdown: 2.0.5 (installed via quasar ext add @quasar/qmarkdown)

---

Smartphone (please complete the following information)

(not tested, SSR hydration issue is reproducible on desktop)

---

Additional context

• When hardcoding <q-markdown src="# hello world" />, the issue still occurs, so it’s not related to dynamic content.

[hawkeye64]

That's because behind the scenes, it uses the equivalent of Vue's v-html. Wrap your usage with the q-no-ssr tag.

[f3k-freek]

That's because behind the scenes, it uses the equivalent of Vue's v-html. Wrap your usage with the q-no-ssr tag.

Thanks a lot for the reply 🙏

Wrapping with q-no-ssr does indeed fix the hydration warning.
That said, in some cases this limits the usefulness of QMarkdown in SSR setups — for example, I rely on SSR specifically so that my textual content is rendered server-side for SEO. Since QMarkdown often contains this kind of text, it would be very helpful if it could render during SSR rather than being skipped.

Would it be possible to support SSR rendering in a future update?

[hawkeye64]

That's because behind the scenes, it uses the equivalent of Vue's v-html. Wrap your usage with the q-no-ssr tag.

Thanks a lot for the reply 🙏

Wrapping with q-no-ssr does indeed fix the hydration warning.
That said, in some cases this limits the usefulness of QMarkdown in SSR setups — for example, I rely on SSR specifically so that my textual content is rendered server-side for SEO. Since QMarkdown often contains this kind of text, it would be very helpful if it could render during SSR rather than being skipped.

Would it be possible to support SSR rendering in a future update?

Tbh, I don't know what that entails. Do you have dynamic markdown or static? If it's static, you could try md-plugins.

[f3k-freek]

Thanks for the tip! I'm using static markdown files. To clarify/summarize my previous message: When wrapping it in q-no-ssr, it might not be available to search engines, as they might not wait long enough for the text to be rendered client-side

…

On Thu, 11 Sept 2025, 01:17 Jeff Galbraith, ***@***.***> wrote: *hawkeye64* left a comment (quasarframework/quasar-ui-qmarkdown#410) <#410 (comment)> That's because behind the scenes, it uses the equivalent of Vue's v-html. Wrap your usage with the q-no-ssr tag. Thanks a lot for the reply 🙏 Wrapping with q-no-ssr does indeed fix the hydration warning. That said, in some cases this limits the usefulness of QMarkdown in SSR setups — for example, I rely on SSR specifically so that my textual content is rendered server-side for SEO. Since QMarkdown often contains this kind of text, it would be very helpful if it could render during SSR rather than being skipped. Would it be possible to support SSR rendering in a future update? Tbh, I don't know what that entails. Do you have dynamic markdown or static? If it's static, you could try md-plugins <https://md-plugins.netlify.app/>. — Reply to this email directly, view it on GitHub <#410 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AOUBNW2H6ED2MIKBWGL7LF33SCPRDAVCNFSM6AAAAACEVS2QTOVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTENZWG4YTOMJYGU> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[hawkeye64]

If it's static, then use https://md-plugins.netlify.app/