Vue CLIにQuasarをプラグインを入れた状態からマークダウンを表示させるところまでのメモ。
前提
|
1 |
vue add quasar |
でQuasarが導入されていること。
QMarkdown導入
Quasarの拡張機能として@quasar/quasar-ui-qmarkdownをインストールしてこれをVue CLIからプラグインとしてMarkdownの表示を実現します。
|
1 |
npm install --save @quasar/quasar-ui-qmarkdown |
QMarkdownの概要は公式から
Quasar公式ドキュメント
今回はVue CLIを使うのでGitHubにあるドキュメントの方が参考になります。
QMarkdown – Vue CLI project
quasar.jsに以下を追記
|
1 2 3 4 |
import '@quasar/quasar-ui-qmarkdown/dist/index.css' import Plugin from '@quasar/quasar-ui-qmarkdown' Vue.use(Plugin) |
マークダウンを表示させたいコンポーネントに以下を追記
〜.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<template> <q-page class="flex flex-center"> <img alt="Quasar logo" src="../assets/logo.png" > <q-markdown> ::: Put your markdown here Classic markup: :wink: :joy: :cry: :angel: :heart: :beers: :laughing: :yum: Shortcuts (emoticons): :-) :-( 8-) ;) ::: </q-markdown> </q-page> </template> <style src="@quasar/quasar-ui-qmarkdown/dist/index.css"></style> <script> import { QMarkdown } from '@quasar/quasar-ui-qmarkdown' export default { components: { QMarkdown } } </script> |
Leave a Reply