Skip to content

Latest commit

 

History

History
132 lines (92 loc) · 3.09 KB

README.md

File metadata and controls

132 lines (92 loc) · 3.09 KB

QMarkdown

Display inline markdown in your Quasar App

npm npm

Discord Discord

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-qmarkdown

and 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 dev

Donate

If you appreciate the work that went into this project, please consider donating to Quasar or Jeff.

License

MIT (c) Jeff Galbraith jeff@quasar.dev