Use Vitepress components in my Vue.js application

149 views Asked by At

I'm not building a documentation website, I'd just like to take advantage of Vitepress components to build my own regular Vue.js application.

I installed Vitepress npm i -D vitepress, imported vars, base, fonts stylesheets from the /node_modules/vitepress/dist/client/theme-default/styles directory, then included the Layout component like so:

<script setup>
import Layout from "vitepress/dist/client/theme-default/Layout.vue"
</script>

<template>
    <Layout>
        <div>Hello world</div>
    </Layout>
</template>

I get a weird error in the browser console: Uncaught SyntaxError: Identifier '__vite__injectQuery' has already been declared (at ${mod.id}:52039:1)

The same with any other Vitepress component (such as VPButton or VPFooter). I don't have any Vitepress specific configuration since I won't be using the vitepress CLI.

Is there any easy way to include Vitepress components "as-they-are" in a regular Vue.js application?

0

There are 0 answers