diff --git a/docs/src/components/page-parts/apis/QMarkdownJsonApi.vue b/docs/src/components/page-parts/apis/QMarkdownJsonApi.vue
index bdd5b42..4122868 100644
--- a/docs/src/components/page-parts/apis/QMarkdownJsonApi.vue
+++ b/docs/src/components/page-parts/apis/QMarkdownJsonApi.vue
@@ -10,6 +10,23 @@
 import { defineComponent } from 'vue'
 import Api from '@quasar/quasar-ui-qmarkdown/dist/api/QMarkdown.json'
 
+// For Global Settings testing purposes
+// import { useQMarkdownGlobalProps } from "@quasar/quasar-ui-qmarkdown"
+// useQMarkdownGlobalProps({
+//   lineNumberAlt: "$",
+//   noBlockquote: false,
+//   noBreaks: true,
+//   noContainer: true,
+//   noHeadingAnchorLinks: true,
+//   noHighlight: true,
+//   noHtml: true,
+//   noImage: true,
+//   noLineNumbers: true,
+//   noLink: true,
+//   noLinkify: true,
+//   noTypographer: true,
+// })
+
 export default defineComponent({
   name: 'QMarkdownJsonApi',
   setup () {
diff --git a/docs/src/examples/Abbreviations.vue b/docs/src/examples/Abbreviations.vue
index dde4ccf..f1ec711 100644
--- a/docs/src/examples/Abbreviations.vue
+++ b/docs/src/examples/Abbreviations.vue
@@ -16,8 +16,8 @@ It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
 
 <script>
 import { defineComponent, ref } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 import abbreviation from 'markdown-it-abbr'
 
 export default defineComponent({
diff --git a/docs/src/examples/Blockquotes.vue b/docs/src/examples/Blockquotes.vue
index 1c213e9..56cd0f4 100644
--- a/docs/src/examples/Blockquotes.vue
+++ b/docs/src/examples/Blockquotes.vue
@@ -21,8 +21,8 @@
 
 <script>
 import { defineComponent, ref } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 
 export default defineComponent({
   name: 'Blockquotes',
diff --git a/docs/src/examples/Code.vue b/docs/src/examples/Code.vue
index d54e116..eff5d1f 100644
--- a/docs/src/examples/Code.vue
+++ b/docs/src/examples/Code.vue
@@ -49,8 +49,8 @@ console.log(foo(5));
 
 <script>
 import { defineComponent, ref } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 
 export default defineComponent({
   name: 'Code',
diff --git a/docs/src/examples/Containers.vue b/docs/src/examples/Containers.vue
index 3e0fcea..ded9b8e 100644
--- a/docs/src/examples/Containers.vue
+++ b/docs/src/examples/Containers.vue
@@ -57,8 +57,8 @@ with a `token` and a [link](https://quasar.dev)
 
 <script>
 import { defineComponent, ref } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 
 export default defineComponent({
   name: 'Containers',
diff --git a/docs/src/examples/CopyToClipboard.vue b/docs/src/examples/CopyToClipboard.vue
index 192a081..0e67e60 100644
--- a/docs/src/examples/CopyToClipboard.vue
+++ b/docs/src/examples/CopyToClipboard.vue
@@ -41,8 +41,8 @@ console.log(foo(5));
 
 <script>
 import { defineComponent, ref } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 
 export default defineComponent({
   name: 'CopyToClipboard',
diff --git a/docs/src/examples/DefinitionLists.vue b/docs/src/examples/DefinitionLists.vue
index 71382b0..2c67ac7 100644
--- a/docs/src/examples/DefinitionLists.vue
+++ b/docs/src/examples/DefinitionLists.vue
@@ -32,8 +32,8 @@ Term 2
 
 <script>
 import { defineComponent, ref } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 import deflist from 'markdown-it-deflist'
 
 export default defineComponent({
diff --git a/docs/src/examples/Editor.vue b/docs/src/examples/Editor.vue
index bcf52f4..e13f28e 100644
--- a/docs/src/examples/Editor.vue
+++ b/docs/src/examples/Editor.vue
@@ -131,8 +131,9 @@ Add Markdown to the window on the left and the output will appear on the right.
 
 <script>
 import { defineComponent, ref, watch, onMounted, getCurrentInstance } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
+
 import abbreviation from 'markdown-it-abbr'
 import deflist from 'markdown-it-deflist'
 import emoji from 'markdown-it-emoji'
diff --git a/docs/src/examples/Emojies.vue b/docs/src/examples/Emojies.vue
index 1fe91cc..518bf34 100644
--- a/docs/src/examples/Emojies.vue
+++ b/docs/src/examples/Emojies.vue
@@ -14,8 +14,8 @@ Shortcuts (emoticons): :-) :-( 8-) ;)
 
 <script>
 import { defineComponent, ref } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 import emoji from 'markdown-it-emoji'
 
 export default defineComponent({
diff --git a/docs/src/examples/Emphasis.vue b/docs/src/examples/Emphasis.vue
index 8a3b5bc..2fab75d 100644
--- a/docs/src/examples/Emphasis.vue
+++ b/docs/src/examples/Emphasis.vue
@@ -22,8 +22,8 @@ ___This is bold italic text, second way___
 
 <script>
 import { defineComponent, ref } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 
 export default defineComponent({
   name: 'Emphasis',
diff --git a/docs/src/examples/Footnotes.vue b/docs/src/examples/Footnotes.vue
index 19d546d..67c34ef 100644
--- a/docs/src/examples/Footnotes.vue
+++ b/docs/src/examples/Footnotes.vue
@@ -23,8 +23,8 @@ Duplicated footnote reference[^second].
 
 <script>
 import { defineComponent, ref } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 import footnote from 'markdown-it-footnote'
 
 export default defineComponent({
diff --git a/docs/src/examples/Heading.vue b/docs/src/examples/Heading.vue
index 3aedf79..8b573e8 100644
--- a/docs/src/examples/Heading.vue
+++ b/docs/src/examples/Heading.vue
@@ -39,8 +39,8 @@
 
 <script>
 import { defineComponent, ref } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 
 export default defineComponent({
   name: 'Heading',
diff --git a/docs/src/examples/HorizontalRules.vue b/docs/src/examples/HorizontalRules.vue
index afc4243..32d3ab8 100644
--- a/docs/src/examples/HorizontalRules.vue
+++ b/docs/src/examples/HorizontalRules.vue
@@ -31,8 +31,8 @@ ___
 
 <script>
 import { defineComponent } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 
 export default defineComponent({
   name: 'HorizontalRules',
diff --git a/docs/src/examples/Images.vue b/docs/src/examples/Images.vue
index 3744f78..112901a 100644
--- a/docs/src/examples/Images.vue
+++ b/docs/src/examples/Images.vue
@@ -41,8 +41,8 @@ With a reference later in the document defining the URL location (see code for m
 
 <script>
 import { defineComponent, ref } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 
 export default defineComponent({
   name: 'Images',
diff --git a/docs/src/examples/Insert.vue b/docs/src/examples/Insert.vue
index 73a39af..fe007c0 100644
--- a/docs/src/examples/Insert.vue
+++ b/docs/src/examples/Insert.vue
@@ -14,8 +14,8 @@ This is ++inserted++ in the middle of a sentence.
 
 <script>
 import { defineComponent, ref } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 import insert from 'markdown-it-ins'
 
 export default defineComponent({
diff --git a/docs/src/examples/Links.vue b/docs/src/examples/Links.vue
index 50854e6..1cc2d75 100644
--- a/docs/src/examples/Links.vue
+++ b/docs/src/examples/Links.vue
@@ -29,8 +29,8 @@ Auto-converted link: https://github.com/quasarframework/quasar
 
 <script>
 import { defineComponent, ref } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 
 export default defineComponent({
   name: 'Links',
diff --git a/docs/src/examples/Lists.vue b/docs/src/examples/Lists.vue
index b4f1e83..cb3a013 100644
--- a/docs/src/examples/Lists.vue
+++ b/docs/src/examples/Lists.vue
@@ -57,8 +57,8 @@ Start numbering with offset:
 
 <script>
 import { defineComponent } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 
 export default defineComponent({
   name: 'Lists',
diff --git a/docs/src/examples/Mark.vue b/docs/src/examples/Mark.vue
index 9f7d860..a40c866 100644
--- a/docs/src/examples/Mark.vue
+++ b/docs/src/examples/Mark.vue
@@ -12,8 +12,8 @@ This is ==marked== in the middle of a sentence.
 
 <script>
 import { defineComponent, ref } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 import mark from 'markdown-it-mark'
 
 export default defineComponent({
diff --git a/docs/src/examples/Mermaid.vue b/docs/src/examples/Mermaid.vue
index 58f3a76..5f54167 100644
--- a/docs/src/examples/Mermaid.vue
+++ b/docs/src/examples/Mermaid.vue
@@ -19,8 +19,8 @@ C -->|Three| F[Car]
 
 <script>
 import { defineComponent, ref } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 import markdownItMermaid from '@datatraccorporation/markdown-it-mermaid'
 
 export default defineComponent({
diff --git a/docs/src/examples/SubscriptSuperscript.vue b/docs/src/examples/SubscriptSuperscript.vue
index 4a53989..98afdb5 100644
--- a/docs/src/examples/SubscriptSuperscript.vue
+++ b/docs/src/examples/SubscriptSuperscript.vue
@@ -13,8 +13,8 @@
 
 <script>
 import { defineComponent, ref } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 import subscript from 'markdown-it-sub'
 import superscript from 'markdown-it-sup'
 
diff --git a/docs/src/examples/Tables.vue b/docs/src/examples/Tables.vue
index cd71101..8d9451e 100644
--- a/docs/src/examples/Tables.vue
+++ b/docs/src/examples/Tables.vue
@@ -40,8 +40,8 @@ Left aligned columns
 
 <script>
 import { defineComponent } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 
 export default defineComponent({
   name: 'Tables',
diff --git a/docs/src/examples/TaskLists.vue b/docs/src/examples/TaskLists.vue
index 893ad07..b47d0ae 100644
--- a/docs/src/examples/TaskLists.vue
+++ b/docs/src/examples/TaskLists.vue
@@ -22,8 +22,8 @@
 
 <script>
 import { defineComponent, ref, watch } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 import taskLists from 'markdown-it-task-lists'
 
 export default defineComponent({
diff --git a/docs/src/examples/Titles.vue b/docs/src/examples/Titles.vue
index 2c382ed..fa594a7 100644
--- a/docs/src/examples/Titles.vue
+++ b/docs/src/examples/Titles.vue
@@ -16,8 +16,8 @@ Second-Level Title
 
 <script>
 import { defineComponent } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 
 export default defineComponent({
   name: 'Titles',
diff --git a/docs/src/examples/Typography.vue b/docs/src/examples/Typography.vue
index 07166b5..3cc5655 100644
--- a/docs/src/examples/Typography.vue
+++ b/docs/src/examples/Typography.vue
@@ -22,8 +22,8 @@ Smartypants: "double quotes" and 'single quotes'
 
 <script>
 import { defineComponent, ref } from 'vue'
-import { QMarkdown } from '@quasar/quasar-ui-qmarkdown/src/QMarkdown.js'
-import '@quasar/quasar-ui-qmarkdown/src/QMarkdown.sass'
+import { QMarkdown } from '@quasar/quasar-ui-qmarkdown'
+import '@quasar/quasar-ui-qmarkdown/dist/index.css'
 
 export default defineComponent({
   name: 'Typography',