@quasar/quasar-ui-qmarkdown
v2.0.1
Published
Display inline markdown in your Quasar App
Downloads
14,242
Readme
QMarkdown
Display inline markdown in your Quasar App
Notes
It is important to note that you cannot use header or hash links or a TOC with the vue-router mode of hash. It must be set tyo history in your quasar.config.(*js|ts)
Usage
Quasar CLI project
Install the App Extension.
OR:
Install
yarn add @quasar/quasar-ui-qmarkdown
# or
npm install @quasar/quasar-ui-qmarkdownand create and register a boot file:
import { defineBoot } from 'quasar/wrappers'
import VuePlugin from '@quasar/quasar-ui-qmarkdown'
import '@quasar/quasar-ui-qmarkdown/dist/index.css'
export default defineBoot(({ app }) => {
app.use(VuePlugin)
})OR:
<style src="@quasar/quasar-ui-qmarkdown/dist/index.css"></style>
<script>
import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
export default {
components: {
QMarkdown
}
}
</script>Vue CLI project
import VuePlugin from '@quasar/quasar-ui-qmarkdown'
import '@quasar/quasar-ui-qmarkdown/dist/index.css'
import { createApp } from "vue";
const app = createApp({
// root instance definition
});
app.use(VuePlugin)
app.mount("#q-app");OR:
<style src="@quasar/quasar-ui-qmarkdown/dist/index.css"></style>
<script>
import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
export default {
components: {
QMarkdown
}
}
</script>UMD variant
Exports window.QMarkdown.
Add the following tag(s) after the Quasar ones:
<head>
<!-- AFTER the Quasar stylesheet tags: -->
<link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qmarkdown/dist/index.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- at end of body, AFTER Quasar script(s): -->
<script src="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qmarkdown/dist/index.umd.min.js"></script>
</body>If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):
<link href="https://cdn.jsdelivr.net/npm/@quasar/quasar-ui-qmarkdown/dist/index.rtl.min.css" rel="stylesheet" type="text/css">Test UMD version on CodePen.
Setup
This project is a yarn workspace mono-repo.
$ yarn
$ yarn build:all
$ cd docs
$ quasar devDonate
If you appreciate the work that went into this project, please consider donating to Quasar or Jeff.
License
MIT (c) Jeff Galbraith [email protected]