https://github.com/peterroe/docusaurus-plugin-usevue
A plugin of docusaurus that provide vue-loader !⚡
https://github.com/peterroe/docusaurus-plugin-usevue
docusaurus plugin vue2
Last synced: 11 months ago
JSON representation
A plugin of docusaurus that provide vue-loader !⚡
- Host: GitHub
- URL: https://github.com/peterroe/docusaurus-plugin-usevue
- Owner: peterroe
- Created: 2021-10-10T06:47:32.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T08:34:47.000Z (over 2 years ago)
- Last Synced: 2023-12-15T09:39:32.433Z (over 2 years ago)
- Topics: docusaurus, plugin, vue2
- Language: JavaScript
- Homepage:
- Size: 73.2 KB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: readme.en.md
Awesome Lists containing this project
README
🧐 [Docusaurus](https://www.docusaurus.cn/docs/) 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**
[中文](https://github.com/peterroe/docusaurus-plugin-usevue/blob/master/readme.md)｜ English
# ⚡install
Two **NPM packages** need to be installed:
```shell
yarn add docusaurus-plugin-usevue use-vue-component
```
Another plugin address:
[https://github.com/peterroe/use-vue-component](https://github.com/peterroe/use-vue-component)
# Import
In the **docusaurus.config.js** file, add the following configuration:
```js
module.exports = {
// ...
plugins: [
//...
'docusaurus-plugin-usevue'
],
};
```
# Usage
For example, there are the following scenarios:
**directory structure:**
```shell
+-- docs
| +-- test.vue
| +-- intro.mdx
```
**test.vue** content：
```vue
hello world, this is {{name}}
export default {
data() {
return {
name: 'peter'
}
}
}
.red {
color: red
}
```
**intro.mdx** content:
```js
---
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
```
# Render results
# Update the log
* :tada: V1.0.0 official version - support vue2