Demo

./docs/index.mdx

\```tsx
<template>
  <Demo></Demo>
</template>
<script lang="ts" setup>
import { Demo } from '@/src/components';
</script>
<style scoped></style>
\```

\```tsx
import { Demo } from '@/src/components';
export default () => {
  return <Demo />
}
\```

Config

./rspress.config.ts

import { defineConfig } from 'rspress/config';
import rspressPluginVue  from 'rspress-plugin-vue';

export default defineConfig({
  ...,
  plugins: [
    rspressPluginVue({
      /** Contains files parsed in Vue mode */
      include,
      /** Exclude files parsed in Vue mode */
      exclude,
      /**  
       * export default ({app}) => {
       *   app.use(xxx)
       * }  
       * */
      setup: '../vue.setup.ts'
    }),
  ]
});

Documentation

• Rspress is based on React rendering
  • The implementation method of the plugin is to mount the relevant Vue instance onto the DOM node generated by React, so the entire application exists in both React and Vue at runtime
• After opening the plugin, all jsx and tsx files in the application will be treated as vue modules, and the code blocks in mdx (```tsx) will be treated as vue modules
  • The rest of the unspecified files, such as. mdx files, will be built in React mode
  • Some additional files hope to be executed through react, which can be added through exclude
• The src of the application directory provides aliases' @/'and' package.name 'through' alias'`
  • import pkg from 'package.name' or import pkg from '@/...'
  • The 'relative directory' used in the code block of (tsx) in the mdx file is relative to the docs directory, for example/ index.ts， Equivalent to {application root directory/docs}/index. ts
• Options
  • Setup is used for callbacks to instantiated Vue apps

issuse

issuse