Input:

<button @click></button>

Result:

<template><div class="markdown-body"><p>&lt;button @click&gt;</button></p>
</div></template>
<script setup>
const frontmatter = {}
defineExpose({ frontmatter })
</script>

Expected result:

<template><div class="markdown-body"><button @click></button></p>
</div></template>
<script setup>
const frontmatter = {}
defineExpose({ frontmatter })
</script>

lang="ts" is not supported currently, it can reproduce in below reproduction code:

<script setup lang="ts">
let str: string;
</script>

Problem

When using this plugin in conjunction with vite-plugin-pages, creating a markdown page with a specific name can cause component resolution issues with unplugin-vue-components.

For example, if I create a projects.md, behind the scenes, this plugin transforms it a component named "Projects". So when trying to auto-import the ~/components/Projects.vue component via <Projects /> using unplugin-vue-components, it doesn't work because Vue.js thinks I'm self-referencing the current page-component.

Feature request

To avoid this problem, I suggest implementing one of the following solutions:

• Add a "Md" or "Markdown" suffix to the component name to differentiate it from other components. For example, the component generated from projects.md would be named "ProjectsMd" or "ProjectsMarkdown".
  Add an option to configure the component name during transformation, so that users can customize the component name to suit their needs.

• I believe that implementing one of these solutions would resolve the issue and improve the user experience for those using these plugins together.

Describe the bug

Code ljke this：

But has a error when dev：

Could you mind give me a example to show how to config when use rspack。

Reproduction

~

System Info

"@rspack/cli": "0.5.7"
"@rspack/core": "0.5.7"

yarn 1.22.19
node v16.14.0

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Describe the bug

The documentation states this package offers the same transformations as VitePress, which supports style blocks in Markdown. However, when I use style block in Markdown with unplugin-vue-markdown, a Vite error is triggered.

Reproduction

https://stackblitz.com/edit/vitejs-vite-qsh7dm

System Info

System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
Binaries:
    Node: 18.18.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.4.2 - /usr/local/bin/npm
    pnpm: 8.6.12 - /usr/local/bin/pnpm

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Clear and concise description of the problem

When building with sourcemaps enabled, a message is displayed from vite.

Sourcemap is likely to be incorrect: a plugin (vite-plugin-vue-markdown) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help

Suggested solution

The return type in createMarkdown should return an object of {code, map}

Sourcemap Transform Reference

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Problem

There ist an error when setting moduleResolution to the new bundler option.

Could not find a declaration file for module 'vite-plugin-vue-markdown'. '/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite-plugin-vue-markdown/dist/index.mjs' implicitly has an 'any' type. There are types at '/node_modules/vite-plugin-vue-markdown/dist/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'vite-plugin-vue-markdown' library may need to update its package.json or typings.

Peer dependency is fair enough

Clear and concise description of the problem

I want to be able to dynamically pass a value to markdown. What should I do? is there any way to let vue manipulate the frontmatter property?
我想要能够动态地传一个值进去给到markdown，请问我该怎么做，有什么方法能让vue操作frontmatter属性吗？

Suggested solution

It would be great to provide an entry to manipulate frontmatter attributes in vue3. If you already have it, can you write it in readme? thank you very much.
如果能提供一个在vue3里面操作frontmatter属性的入口就非常棒了，如果已经有了能麻烦写进readme吗，非常感谢

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Describe the bug

I am working on a vite-ssr project according vite-plugin-ssr vue guide and encountered the bug.

[Vue warn]: Failed to resolve component: mi
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Index id="index" > 
  at <Index.page id="index" > 
  at <GlobalPageShell > 
  at <App>
[Vue warn]: Failed to resolve component: mo
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Index id="index" > 
  at <Index.page id="index" > 
  at <GlobalPageShell > 
  at <App>
...
[Vue warn]: Hydration node mismatch:
- Client vnode: math 
- Server rendered DOM: <!---->  
  at <Index id="index" > 
  at <Index.page id="index" > 
  at <GlobalPageShell > 
  at <App>
[Vue warn]: Hydration node mismatch:
- Client vnode: math 
- Server rendered DOM: <!---->  
  at <Index id="index" > 
  at <Index.page id="index" > 
  at <GlobalPageShell > 
  at <App>
...
Hydration completed but contains mismatches.

Is there any way to avoid resolve katex tags?

My inplemetation is here

The server render and client render using the same function importMd.

import { PageContextServer } from '../types'
import { h } from 'vue'

export { importMd }

async function importMd(url: string, pageContext: PageContextServer) {
  let component = await import(`../../assets/${url}.md`);
  const { pageProps } = pageContext
  return h(component.default, pageProps || {})
}

// index.page.client.ts render()
export { render }

import type { PageContextClient } from '@/types'
import { createApp } from '@/app'

import type { PageContextBuiltIn } from 'vite-plugin-ssr/types'
import { importMd } from '@/utils/renderMarkdown'

async function render(pageContext: PageContextClient) {
  const { Page, pageProps } = pageContext
  const { id } = pageProps
  const html = await importMd(id, pageContext)
  pageContext.markdownHTML = html
  const app = createApp(Page, pageProps, pageContext)
  app.mount('#app')
}

// index.page.server.ts render()
import type { PageContextBuiltIn } from 'vite-plugin-ssr/types'
import { importMd } from '@/utils/renderMarkdown'

export { onBeforeRender }

async function onBeforeRender(pageContext: PageContextBuiltIn) {
  const { id } = pageContext.routeParams
  const html = await importMd(id, pageContext)
  return {
    pageContext: {
      markdownHTML: html,
      pageProps: {
        id
      }
    }
  }
}

For Reproduction:

The repository is saved on gitlab instance in my school and may have unstable network access. I could upload it to github if needed

Reproduction

https://git.halzi.one:8929/Etavioxy/wiki-web

System Info

System:
    OS: Linux 6.5 Arch Linux
    CPU: (16) x64 AMD Ryzen 7 4800U with Radeon Graphics
    Memory: 5.29 GB / 14.99 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.8.1 - /usr/bin/node
    npm: 10.2.1 - /usr/bin/npm
    pnpm: 8.6.12 - ~/.local/share/pnpm/pnpm

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Describe the bug

Any Render fails when upgrading from 0.25.2 to 0.26.0

11:07:24 PM [vite] Internal server error: Element is missing end tag.
Plugin: vite:vue
File: src/markdown/index.md

Some markdown <RouterLink :to ...
at createCompilerError ([....]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1329:17)

Reproduction

Just change 0.25.2 to 0.26.0 and npm install

System Info

quasar
 » Dev mode............... spa
 » Pkg quasar............. v2.14.6
 » Pkg @quasar/app-vite... v1.7.3

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Describe the bug

I have added configuration of in vite.config.ts. after then, when i am trying to start development server it has throwing error that given below.

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/yatendrakushwaha/my-workspace/qnx-vuetify-sample/node_modules/.pnpm/[email protected]/node_modules/markdown-it/lib/common/html_blocks.mjs not supported.
Instead change the require of /Users/yatendrakushwaha/my-workspace/qnx-vuetify-sample/node_modules/.pnpm/[email protected]/node_modules/markdown-it/lib/common/html_blocks.mjs to a dynamic import() which is available in all CommonJS modules.

Reproduction

https://github.com/yatendra121/qnx-vuetify-sample/tree/markdown

System Info

Mac, Chrome

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Can I pass props into my Markdown components and have them rendered within the Markdown component? For example, would I be able to do something like...

<!-- Page.vue -->
<template>
    <MarkdownComponent :slogan="markdownSlogan"/>
</template>

<script setup>
import MarkdownComponent from 'markdown-component.md';
const markdownSlogan = "Here we grow again!";
</script>

<!-- markdown-component.md -->
# Title

## {{ props.slogan }}

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus rutrum risus lacus, ...

If this functionality is already available, it is not clearly documented in the README.md. If it isn't already available Please consider this a feature request!

Describe the bug

Any Render fails when upgrading from 0.25.2 to 0.26.0

11:07:24 PM [vite] Internal server error: Element is missing end tag.
Plugin: vite:vue
File: src/markdown/index.md

Some markdown <RouterLink :to ...
at createCompilerError ([....]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1329:17)

To reproduce, download the demo repo https://github.com/vazir/quasar-md-test-unplugin

• it contains 0.26.0 - which does not work,
• changing it to 0.25.2 and doing 'npm install' - making it works just fine.

Reproduction

https://github.com/vazir/quasar-md-test-unplugin

System Info

System:
    OS: Linux 6.5 Debian Bookworm
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 40.30 GB / 62.69 GB
    Container: Yes
    Shell: Unknown - /bin/bash
  Binaries:
    Node: 18.19.0 - /usr/bin/node
    npm: 9.2.0 - /usr/bin/npm

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Describe the bug

Hello,
I just would like to try the mardown example.

I encounter 2 error messages :

[vite] Internal server error: Element is missing end tag.
Plugin: vite:vue
File: C:/Users/X/Desktop/vite/README.md:28:1
26 | plugins: [
27 | Vue({
28 | include: [/.vue$/, /.md$/], // <-- allows Vue to compile Markdown files
| ^
29 | }),

[vite] Internal server error: C:/Users/W/Desktop/vite/pages/index.md:6:10: Unknown word
Plugin: vite:vue
File: C:/Users/X/Desktop/vite/pages/index.md:35:10
34 | }
35 |
36 |
| ^

I am available for further questions

Reproduction

Minimal reproduction is on examples/vite folder

System Info

Win10 64bits,
Node 18.18.0
Npm 9.8.1
Firefox 118.0.1

------------
  System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 AMD Ryzen 5 2600 Six-Core Processor
    Memory: 18.63 GB / 31.92 GB
  Binaries:
    Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 9.8.1 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.8.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: 117.0.5938.92
    Edge: Spartan (44.19041.1266.0), Chromium (117.0.2045.43)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Hi,
I'm trying to make simple block wrappers, like tabs for code-blocks, etc. But whenever I wrap anything, it comes out as a string.

Maybe I'm tackling this too simple and need to render my slots in a very different way to include rendered Markdown, so this is more a question than a real issue.

Simplified example:

/src/components/component.vue:

<template>
  <div class="component">
    <slot />
  </div>
</template>

/pages/index.md:

# Hello

<Component>
 ```css
.class {
    display: flex;
}
```
</Component>

The above will render the H1, but render the Vue component with the code block as a string:

<h1>Hello</h1>

<div class="component">```css class{ display: flex; } ```</div>

Expected outcome:

<h1>Hello</h1>

<div class="component">
  <pre>
    <code class="language-css">
      <!-- code here -->
    </code>
  </pre>
</div>

It would be nice if the Markdown would still render, but inside the slot. So far, no Google search comes up with anything concrete, other than Nuxt has been able to do this seamlessly.

Any pointers appreciated.

Describe the bug

Following the docs, installing @unhead/vue and set headEnabled to true will results in @vueuse/head missing.
Inspecting the code, headEnabled should be set to 'unhead' instead to use @unhead/vue.
Referrenced code: src/core/markdown.ts#L186

Either change the docs or Line 186 and we should be good.

Reproduction

.

System Info

any

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Hello!

Is there currently a way, or how difficult would it be to have access to the frontmatter in the parent component importing the Markdown file. Usually need this info there because I use the data for the UI that surrounds the MD and in other parts of the app.

I know I could probably use something to parse the frontmatter out of the file, but since you are already making it available inside the markdown content thought I'd ask. :)

Thanks!

I'm currently working on a Vue 3 project and using the unplugin-vue-markdown package to render markdown content. I have frontmatter metadata in my markdown files that I need to access in my Vue component.

Code Snippets:
markdown:

---
title: My Markdown Title
otherData: Some Value
---
## Content
This is my markdown content.

Vue Component:

<template>
  <div>
    <h1>{{ frontmatter.title }}</h1>
    <!-- ...other content -->
  </div>
</template>

I've reviewed the documentation of unplugin-vue-markdown but haven't found a solution that addresses accessing frontmatter from outside the markdown file.

Packages and Versions:

Vue: 3.3.4
unplugin-vue-markdown: 0.24.2

Describe the bug

Upon attempting to use unplugin-vue-markdown within my project, I get the following error during build time:

"extname" is not exported by "__vite-browser-external:path", imported by "node_modules/.pnpm/@[email protected]/node_modules/@rollup/pluginutils/dist/es/index.js".
file: node_modules/.pnpm/@[email protected]/node_modules/@rollup/pluginutils/dist/es/index.js:1:9
1: import { extname, win32, posix, isAbsolute, resolve } from 'path';
            ^

If I add vite-plugin-node-polyfills to my Vite config and polyfill path then I get the following error:

"createRequire" is not exported by "__vite-browser-external:module", imported by "node_modules/.pnpm/[email protected][email protected]/node_modules/unplugin-vue-markdown/dist/chunk-XC4FHL6S.js".
file: node_modules/.pnpm/[email protected][email protected]/node_modules/unplugin-vue-markdown/dist/chunk-XC4FHL6S.js:259:9
259: import { createRequire } from "module";
              ^

If I then polyfill module I get the following error:

"createRequire" is not exported by "node_modules/.pnpm/[email protected]/node_modules/node-stdlib-browser/esm/mock/empty.js", imported by "node_modules/.pnpm/[email protected][email protected]/node_modules/unplugin-vue-markdown/dist/chunk-XC4FHL6S.js".
file: node_modules/.pnpm/[email protected][email protected]/node_modules/unplugin-vue-markdown/dist/chunk-XC4FHL6S.js:259:9
259: import { createRequire } from "module";
              ^

How do I get over this roadblock to using unplugin-vue-markdown within my project?

PS this is my current dev stack:
Laravel 10 / InertiaJS 1 / VueJS 3 / ViteJS 4 / TailwindCSS 3 / Vitest 0.31 / VitePress 1 / Typescript / SSR / FontAwesome Pro 6 / Ploi.io / Qodana / Cypress / ImgIX / HubSpot / SendGrid / SignEasy / Stripe

Reproduction

would have started a discussion here to get support, but there's no discussion tab here :(

System Info

System:
    OS: macOS 14.4
    CPU: (8) arm64 Apple M1 Pro
    Memory: 62.33 MB / 16.00 GB
    Shell: 5.2.15 - /opt/homebrew/bin/bash
  Binaries:
    Node: 21.6.2 - /opt/homebrew/bin/node
    Yarn: 1.22.21 - /opt/homebrew/bin/yarn
    npm: 10.2.4 - /opt/homebrew/bin/npm
    pnpm: 8.6.1 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 122.0.6261.112
    Safari: 17.4

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Describe the bug

Just recently migrated from vite-plugin-md to this plugin, and got an issue that quite confusing to me, which is it's error when I have headings in the markdown file.

Say we have this markdown file

some text

## Suppose to be a heading 2

another long text

Here's the output when running pnpm dev

[vite] Internal server error: Duplicate attribute.
  Plugin: vite:vue
  File: /path/to/project/src/pages/about.md:5:91
  6  |  ---
  7  |  
  8  |  **CREASI.CO** merupakan sebuah perusahaan yang bergerak dalam bidang jasa perancangan dan pengembangan perangkat lunak. Mewujudkan kebutuhan layanan tata kelola digital dan berkontribusi pada pengembangan bisnis melalui teknologi informasi.
     |                                                                      ^
  9  |  
  10 |  Pada Mei 2022 CREASI.CO telah resmi terdaftar sebagai Perseroan Perorangan bernama PT. Creasi Tekno Solusi dengan Nomor Sertifikat Pendaftaran AHU-016542.AH.01.30.Tahun 2022 dan Nomor Izin Berusaha 1105220048685.
      at createCompilerError (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1329:17)
      at emitError (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2822:5)
      at Object.onattribnameend (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2307:7)
      at Tokenizer.handleAttrNameEnd (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:876:14)
      at Tokenizer.stateInAttrName (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:816:12)
      at Tokenizer.parse (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:1067:16)
      at Object.baseParse (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.js:2861:13)
      at Object.parse (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.js:703:23)
      at Object.parse$2 [as parse] (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1851:24)
      at createDescriptor (file:///path/to/project/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vitejs/plugin-vue/dist/index.mjs:74:43)
      at transformMain (file:///path/to/project/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vitejs/plugin-vue/dist/index.mjs:2367:34)
      at TransformContext.transform (file:///path/to/project/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vitejs/plugin-vue/dist/index.mjs:2910:16)
      at Object.transform (file:///path/to/project/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:51172:62)
      at async loadAndTransform (file:///path/to/project/node_modules/.pnpm/[email protected]_@[email protected]/node_modules/vite/dist/node/chunks/dep-whKeNLxG.js:53923:29)

and here the output when running pnpm build

[vite-ssg] An internal error occurred.
[vite-ssg] Please report an issue, if none already exists: https://github.com/antfu/vite-ssg/issues
node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

SyntaxError: Duplicate attribute.
    at createCompilerError (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:1325:17)
    at emitError (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2788:5)
    at Object.onattribnameend (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2303:7)
    at Tokenizer.handleAttrNameEnd (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:876:14)
    at Tokenizer.stateInAttrName (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:816:12)
    at Tokenizer.parse (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:1067:16)
    at Object.baseParse (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:2820:13)
    at Object.parse (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:633:23)
    at Object.parse$2 [as parse] (/path/to/project/node_modules/.pnpm/@[email protected]/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1851:24)
    at createDescriptor (file:///path/to/project/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vitejs/plugin-vue/dist/index.mjs:74:43)
    at transformMain (file:///path/to/project/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vitejs/plugin-vue/dist/index.mjs:2367:34)
    at Object.transform (file:///path/to/project/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@vitejs/plugin-vue/dist/index.mjs:2910:16)
    at file:///path/to/project/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/es/shared/node-entry.js:19594:40 {
  id: '/path/to/project/src/pages/about.md',
  plugin: 'vite-plugin-pwa:build',
  name: 'RollupError',
  loc: {
    file: '/path/to/project/src/pages/about.md',
    line: 5,
    column: 91
  },
  hook: 'buildEnd',
  code: 'PLUGIN_ERROR',
  watchFiles: [
    '/path/to/project/index.html',
    '/path/to/project/src/main.ts',
    '/path/to/project/package.json',
    '/path/to/project/src/modules/i18n.ts',
    '/path/to/project/src/modules/gtm.ts',
    '/path/to/project/src/app.vue',
    '/path/to/project/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/vite-ssg/dist/index.mjs',
    '/path/to/project/src/style.css',
    '/path/to/project/src/modules/pwa.ts',
    '/path/to/project/src/pages/index.vue',
    '/path/to/project/src/pages/[...all].vue',
    '/path/to/project/src/pages/about.md'
  ],
  [Symbol(augmented)]: true
}

Reproduction

https://github.com/creasico/creasico.github.io

System Info

System:
  OS: macOS 14.4.1
  CPU: (8) arm64 Apple M1
  Memory: 186.94 MB / 16.00 GB
  Shell: 5.9 - /bin/zsh
Binaries:
  Node: 20.10.0 - ~/.asdf/installs/nodejs/20.10.0/bin/node
  npm: 10.2.4 - ~/.asdf/plugins/nodejs/shims/npm
  pnpm: 8.10.0 - ~/.asdf/installs/nodejs/20.10.0/bin/pnpm
  bun: 1.1.0 - /opt/homebrew/bin/bun
Browsers:
  Chrome: 123.0.6312.107
  Safari: 17.4.1

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

https://github.com/JanGuillermo/vue3-markdown-it points to here, but I'm not seeing the parity?

Can this do:

<template>
  <div>
    <Markdown :source="source" />
  </div>
</template>

<script>
import Markdown from 'vue3-markdown-it';

export default {
  components: {
    Markdown
  },
  data() {
    return {
      source: '# Hello World!'
    }
  }
}
</script>

Clear and concise description of the problem

Currently to create an internal link you have to manually write a RouterLink.

This is my markdown

This is an internal <RouterLink to="/example">link</RouterLink>

I would like to write internal links like regular markdown links and have it automatically convert to a RouterLink

This is my markdown

This is an internal [link](/example)

Suggested solution

All links that are only a path: E.G. / or /example/path and don't start with a website url like https://example.com/example/path should be treated like internal links.

In unplugin-vue-markdown options add a internalLinkComponent option, similar to the wrapperComponent option:

Markdown({
  internalLinkComponent: 'RouterLink'
})

This would also allow users to pass a custom router link component

Markdown({
  internalLinkComponent: 'MyCustomRouterLink`
})

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Describe the bug

When dev server is starting, A log has appearing (Language does not exist: vue).
And i have tried different configuration but those are not working.

Reproduction

https://github.com/yatendra121/qnx-vuetify-sample/tree/markdown

System Info

Macbook M2, Node 20, Chrome

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Looking at your about page for vitesse, there are 2 duplicate code blocks. Is this intentional?

I don't remember it being like this, so maybe it's a bug?

I have been using vue3-markdown-it, but because of chunk size issue, I am trying out this project. In replacing dependencies with vite-plugin-vue-markdown I now get the following error:

'extname' is not exported by __vite-browser-external, imported by node_modules/@rollup/pluginutils/dist/es/index.js
file: /Users/ajmas/Development/my-project/node_modules/@rollup/pluginutils/dist/es/index.js:1:9
1: import { extname, win32, posix, isAbsolute, resolve } from 'path';
            ^
2: import pm from 'picomatch';
/Users/ajmas/Development/my-project/node_modules/rollup/dist/shared/rollup.js:198
        base = Object.assign(new Error(base.message), base);
                             ^

Error: 'extname' is not exported by __vite-browser-external, imported by node_modules/@rollup/pluginutils/dist/es/index.js
    at error (/Users/ajmas/Development/my-project/node_modules/rollup/dist/shared/rollup.js:198:30)
    at Module.error (/Users/ajmas/Development/my-project/node_modules/rollup/dist/shared/rollup.js:12543:16)
    at Module.traceVariable (/Users/ajmas/Development/my-project/node_modules/rollup/dist/shared/rollup.js:12902:29)
    at ModuleScope.findVariable (/Users/ajmas/Development/my-project/node_modules/rollup/dist/shared/rollup.js:11554:39)
    at FunctionScope.findVariable (/Users/ajmas/Development/my-project/node_modules/rollup/dist/shared/rollup.js:6486:38)
    at ChildScope.findVariable (/Users/ajmas/Development/my-project/node_modules/rollup/dist/shared/rollup.js:6486:38)
    at Identifier.bind (/Users/ajmas/Development/my-project/node_modules/rollup/dist/shared/rollup.js:7553:40)
    at CallExpression.bind (/Users/ajmas/Development/my-project/node_modules/rollup/dist/shared/rollup.js:5383:23)
    at CallExpression.bind (/Users/ajmas/Development/my-project/node_modules/rollup/dist/shared/rollup.js:9049:15)
    at UnaryExpression.bind (/Users/ajmas/Development/my-project/node_modules/rollup/dist/shared/rollup.js:5383:23) {
  code: 'MISSING_EXPORT',
  url: 'https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module',
  id: '/Users/ajmas/Development/my-project/node_modules/@rollup/pluginutils/dist/es/index.js',
  pos: 9,
  loc: {
    column: 9,
    file: '/Users/ajmas/Development/my-project/node_modules/@rollup/pluginutils/dist/es/index.js',
    line: 1
  },
  frame: "1: import { extname, win32, posix, isAbsolute, resolve } from 'path';\n" +
    '            ^\n' +
    "2: import pm from 'picomatch';",
  watchFiles: [
    '/Users/ajmas/Development/my-project/index.html',
    '/Users/ajmas/Development/my-project/.quasar/client-entry.js',
    '/Users/ajmas/Development/my-project/node_modules/vite/package.json',
    '/Users/ajmas/Development/my-project/node_modules/vue/package.json',
    '/Users/ajmas/Development/my-project/node_modules/@quasar/extras/package.json',
    '/Users/ajmas/Development/my-project/node_modules/quasar/package.json',
    '/Users/ajmas/Development/my-project/node_modules/vue/dist/vue.runtime.esm-bundler.js',
    '/Users/ajmas/Development/my-project/node_modules/@quasar/extras/roboto-font/roboto-font.css',
    '/Users/ajmas/Development/my-project/node_modules/@quasar/extras/material-icons/material-icons.css',
    '/Users/ajmas/Development/my-project/node_modules/quasar/dist/quasar.sass',
    ...
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
-------------------------------------------------------------------------------------------

I am using Quasar with Vite:

 Pkg quasar............. v2.10.1
 Pkg @quasar/app-vite... v1.1.3
 Pkg vite............... v2.9.15

Node version: v16.10.0

Any idea what could be the issue here?

Clear and concise description of the problem

比如
// const AsyncMarkDown = defineAsyncComponent(
// () => import("../../public/markdown/xxx.md")
// );

Suggested solution

。。。。

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Describe the bug

When using in Nuxt, it will complain:

[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.

Reproduction

https://stackblitz.com/edit/nuxt-demo-0fc9b48

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (6) x64 AMD Ryzen 5 4500U with Radeon Graphics
    Memory: 2.50 GB / 7.23 GB
  Binaries:
    Node: 20.10.0 - C:\nodejs\node.EXE
    Yarn: 1.22.22 - ~\AppData\Local\pnpm\yarn.CMD
    npm: 10.2.3 - C:\nodejs\npm.CMD
    pnpm: 8.15.3 - ~\AppData\Local\pnpm\pnpm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.65), ChromiumDev (123.0.2420.10)
    Internet Explorer: 11.0.22621.1

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Currently I have been using vite-plugin-pages along with this to serve .md files directly as pages.

This has been working great up until I tried to use an html or vue tag.

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

Will break site rendering, whereas this

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
})

Will not. Incase Markdown takes over here, I am talking about a fenced html or vue codeblock, vs any other block. Is this a current limitation or something I could resolve potentially? Thank you all.

Describe the bug

When using a Vue component followed by a markdown link in a list item, the link is not rendered correctly. This worked with https://github.com/antfu/vite-plugin-md (Slidev v0.33.0 and before)
For example: * <Counter /> [Example link](https://github.com/).

Related: slidevjs/slidev#658

Manual reproduction:

1. Add * <Counter /> [Test Link](https://github.com/) as last line in index.md in the examples folder.

Reproduction

https://stackblitz.com/edit/slidev-nxyjmy?file=slides.md

System Info

System:
    OS: macOS 12.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 124.64 MB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.14.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.12.1 - ~/.npm/bin/npm
  Browsers:
    Brave Browser: 102.1.39.120
    Chrome: 103.0.5060.114
    Firefox: 84.0.1
    Firefox Developer Edition: 102.0
    Safari: 15.5
    Safari Technology Preview: 16.0

Used Package Manager

yarn

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Describe the bug

在vite中支持将代码块中的vue语法进行处理，但是插件好像没有处理
vitepress文档地址：https://vitepress.dev/guide/using-vue#unescape-in-code-blocks

这是我的代码片段

实际输出

Reproduction

System Info

System:
    OS: macOS 12.4
    CPU: (8) x64 Intel(R) Core(TM) i5-8279U CPU @ 2.40GHz
    Memory: 28.14 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 16.20.1 - ~/.nvm/versions/node/v16.20.1/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.1/bin/npm
    pnpm: 8.5.1 - ~/Documents/Codes/santi/templates/noob_basic_template/node_modules/.bin/pnpm
    Watchman: 2023.09.04.00 - /usr/local/bin/watchman
  Browsers:
    Chrome: 119.0.6045.199
    Safari: 15.5

Used Package Manager

pnpm

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
• The provided reproduction is a minimal reproducible of the bug.

Hey 👋🏻

Repo will be added soonish, but I wanted to let you know that HMR stopped working when using v0.21.1.
With v0.21.0, HMR still works fine.

Reproduction

Not on StackBlitz because yarn resolutions / pnpm overrides do not work there 😢

1. Clone this repo
2. pnpm i
3. pnpm dev
4. Try to change anything, e.g. the text or the WindiCSS class
5. See no HMR is happening

"Fix"

1. Change the pnpm override to 0.21.0
2. pnpm i
3. pnpm dev
4. Try to change the WindiCSS class
5. See HMR working.

What is the difference between vite-plugin-vue-markdown and vite-plugin-md? The introduction is written in a simplified version. Where is the specific simplification? Can you provide a detailed introduction, thank you, thank you very much, and I Seeing that vite-plugin-md has not been maintained for a long time, and using vite4 to build vite-plugin-md will report

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: No "exports" main defined in D:\qkyproject\peiwan-official\node_modules\@yankeeinlondon\happy -wrapper\package.json

Does it mean that vite-plugin-md is no longer maintained, or is it recommended to use vite-plugin-vue-markdown?

antfu/vite-plugin-md#142

It would be great if markdown inside HTML could be parsed (like for MDX2).

Regarding this markdown (Alert being a custom vue component with a slot):

<div>Hello `div`</div>
<Alert>Hello `alert`</Alert>

I would expect:

<div>Hello <code>div</code></div>
<Alert>Hello <code>alert</code></Alert>

Current result:

<div>Hello `div`</div>
<Alert>Hello `alert`</Alert>

The case with the custom Vue component was working (markdown inside the component was parsed) in version 0.1.0 but removed in version 0.1.1 with the addition of the componentPlugin .