CODEWITHSUNDEEP
vue.jscomponentsvitepress
contemax
contemax

Reputation: 21

Use Vitepress components in my Vue.js application

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?

Upvotes: 2

Views: 632

Answers (1)

Mark Chen
Mark Chen

Reputation: 1

You may want to import DefaultTheme from vitepress/theme.

And more importantly, you may want to wrap your custom content in layout slots.

<script setup lang="ts">
import DefaultTheme from "vitepress/theme";

const { Layout } = DefaultTheme; // or other components if you like
</script>

<template>
<Layout>
  <template #doc-footer-before>
    <!-- Something you would like to add -->
  </template>
</Layout>
</template>

Upvotes: 0

Related Questions