1.0.2 • Published 7 months ago
docusaurus-plugin-usevue3 v1.0.2
🧐 Docusaurus is a static-site generator. It builds a single-page application with a fast client-side navigation, leveraging the full power of React to make your site interactive. It provides out-of-the-box documentation features, but can be used to create any kind of site (personal website, product, blog, marketing landing pages, etc).
In terms of components, docusaurus only supports native rendering react components
This plugin will help you render Vue components you write in docusaurus
⚡install
Two NPM packages need to be installed:
npm install docusaurus-plugin-usevue3 use-vue3-component
Another plugin address:
Import
In the docusaurus.config.js file, add the following configuration:
module.exports = {
// ...
plugins: [
//...
'docusaurus-plugin-usevue3'
],
};
Usage
For example, there are the following scenarios:
directory structure:
+-- docs
| +-- test.vue
| +-- intro.mdx
test.vue content:
<template>
<div class="red">
hello world, this is {{name}}
</div>
</template>
<script>
export default {
data() {
return {
name: 'peter'
}
}
}
</script>
<style>
.red {
color: red
}
</style>
intro.mdx content:
---
sidebar_position: 1
---
## Getting Started
import {uvc} from 'use-vue-component' //Import conversion package
import test from './text.vue' //Import Vue components
export const HelloWorld = uvc(test) //transform
<HelloWorld/>