how to get unplugin-vue-markdown working in quasar

[s-light]

hello commuinty,
has anybody tried to get
https://github.com/unplugin/unplugin-vue-markdown/
to work in a quasar setup?

i just tried with a quick fresh quasar project and the documentation but failed with

file:///home/stefan/my-test-setup/node_modules/@quasar/app-vite/lib/utils/encode-for-diff.js:2
  return JSON.stringify(obj, (_, value) => {
              ^

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'config' -> object with constructor 'Object'
    |     property 'plugins' -> object with constructor 'Array'
    |     ...
    |     property 'options' -> object with constructor 'Object'
    --- property 'devServer' closes the circle
    at JSON.stringify (<anonymous>)
    at encodeForDiff (file:///home/stefan/my-test-setup/node_modules/@quasar/app-vite/lib/utils/encode-for-diff.js:2:15)
    at file:///home/stefan/my-test-setup/node_modules/@quasar/app-vite/lib/app-devserver.js:8:70
    at Array.map (<anonymous>)
    at getConfSnapshot (file:///home/stefan/my-test-setup/node_modules/@quasar/app-vite/lib/app-devserver.js:8:50)
    at #diff (file:///home/stefan/my-test-setup/node_modules/@quasar/app-vite/lib/app-devserver.js:114:25)
    at diff (file:///home/stefan/my-test-setup/node_modules/@quasar/app-vite/lib/app-devserver.js:84:45)
    at QuasarModeDevserver.run (file:///home/stefan/my-test-setup/node_modules/@quasar/app-vite/lib/modes/spa/spa-devserver.js:13:9)
    at file:///home/stefan/my-test-setup/node_modules/@quasar/app-vite/lib/app-devserver.js:94:14
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Node.js v20.11.0

i followed the info for vite at
https://github.com/unplugin/unplugin-vue-markdown?tab=readme-ov-file#install

i understand that this error has to to with quasar already setting up Vue...
and there is a config option at
https://quasar.dev/quasar-cli-vite/quasar-config-file#framework
autoImportVueExtensions
i set it to

framework: {
      config: {},

      // ...

      autoImportVueExtensions: ['vue', 'md'],

      // Quasar plugins
      plugins: [],
    },

but that does not change anything -
if i use this or ignore the setup for the file-type (meaning leaving it as default ['vue'])
i get

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .md file format, or if it's an asset, add "**/*.md" to `assetsInclude` in your configuration.

/home/stefan/my-test-setup/src/pages/md_content/readme.md:1:59

1  |  <template><div class="markdown-body"><h1>Hello World!</h1>

for me that means: the main part of the plugin has done its work -
as the md file is already converted to a vue component (visible at the <template> syntax..
but then quasar does not know that vue should import/parse it...

i am open to any tips on this!

sunny greetings
stefan

[s-light]

anybody any idea or tips in this direction?

[s-light]

got it working with:

viteVuePluginOptions: {
  // allows Vue to compile Markdown files
  include: [/\.vue$/, /\.md$/],
},

will see if this helps me :-)

---

as reference more of the config file:

// Configuration for your app
// https://v2.quasar.dev/quasar-cli-vite/quasar-config-file

import { defineConfig } from '#q-app/wrappers'

import Vue from '@vitejs/plugin-vue'
import Markdown from 'unplugin-vue-markdown/vite'

export default defineConfig((/* ctx */) => {
  return {
      // extendViteConf (viteConf) {},
      viteVuePluginOptions: {
        include: [/\.vue$/, /\.md$/], // <-- allows Vue to compile Markdown files
      },

      vitePlugins: [
        [
          'vite-plugin-checker',
          {
            eslint: {
              lintCommand: 'eslint -c ./eslint.config.js "./src*/**/*.{js,mjs,cjs,vue}"',
              useFlatConfig: true,
            },
          },
          { server: false },
        ],
        Markdown({
          /* options */
        }),
      ],
    },
  }
})