[plugin:vite:vue] Unexpected '<!--' in comment.

[mouyong]

Describe the bug

When use tailwindui in index.md. it throw the error

Reproduction

use the code: https://tailwindui.com/components/preview

Expected behavior

hope it can support html comment.

System Info

npx: installed 1 in 2.389s

  System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (2) x64 Intel(R) Xeon(R) Gold 6161 CPU @ 2.20GHz
    Memory: 328.15 MB / 3.84 GB
    Container: Yes
    Shell: 5.0.17 - /bin/sh
  Binaries:
    Node: 14.19.1 - /www/server/nodejs/v14.19.1/bin/node
    Yarn: 1.22.18 - /www/server/nodejs/v14.19.1/bin/yarn
    npm: 6.14.16 - /www/server/nodejs/v14.19.1/bin/npm
  npmPackages:
    vitepress: ^1.0.0-alpha.4 => 1.0.0-alpha.4

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

It's working fine for me. You just have to remove empty lines from the html.

[mouyong]

Can you provide your code? I want to know the different places with me.

[brc-dd]

@mouyong https://stackblitz.com/edit/vite-u76wbw?file=docs%2Findex.md

[mouyong]

@brc-dd you are right. when I remove all tailwindui empt line, it works.

I have another question: "how can i use alpinejs in vitepress?"

when i use https://alpinejs.dev/ homepage demo. it's not work.

in config.ts

export default Object.assign(userConfig, {
  head: [
    ['script', { src: '//unpkg.com/alpinejs', defer: true }],
  ],
}

in custom page

---
layout: page
---

<div class="container w-3/4 mx-auto">

<div x-data="{ open: false }">
    <button @click="open = true">Expand</button>
    <span x-show="open">
      Content...
    </span>
</div>

</div>

when i click the Expand button, it doesn't have any action.

[mouyong]

I want use tailwindui in custom page.

write the custom page by vue code or html + alphine code.

Tried some possibilities but failed: the tailwindui vue component install by npm, but use in markdown is not avaliable.

how can i do.

[brc-dd]

how can i use alpinejs in vitepress?

This will likely conflict with Vue as they have some common syntax like @click. Why not simply use Vue in your markdown?

<div>
    <button @click="open = !open">Expand</button>
    <span v-if="open">
      Content...
    </span>
</div>

<script setup>
import { ref } from 'vue'
const open = ref(false)
</script>

[mouyong]

I want to just use vue in project. when run the demo. it need import some component.

when i register component in theme/index.ts, it not work. So try use aplinejs to instead of vue script.

https://tailwindui.com/components/preview

[mouyong]

when i use x-on:click instaed of @click, it works. i have 2 question.

1. why need remove html empty linke.
2. how to use oather vue component in vitepress.

<div x-data="{ open: false }">
    <button x-on:click="open = !open">Expand</button>
    <span x-show="open">
      Content...
    </span>
</div>

[brc-dd]

That is directly working for me: https://stackblitz.com/edit/vite-jbapbj?file=docs%2Findex.md,docs%2FDropdownMenu.vue

why need remove html empty linke.

Empty lines tell the markdown that a block has ended. So if the content below that is indented then it'll treated like a code block.

[mouyong]

The demo page is: https://mouyong.github.io/vitepress-doc-website/home.html

use in project: https://github.com/mouyong/vitepress-doc-website

[mouyong]

Thanks for you. It will be help me very much.

That is directly working for me: https://stackblitz.com/edit/vite-jbapbj?file=docs%2Findex.md,docs%2FDropdownMenu.vue

why need remove html empty linke.

Empty lines tell the markdown that a block has ended. So if the content below that is indented then it'll treated like a code block.