@ewilan-riviere/docs-ui-vue

A collection of Vue 3 components for documentation projects, built for Markdoc. Built with Tailwind CSS (it's not a require dependency, all style is available as css).

Experimental package, use with caution. Only Vue 3.x is supported.

Installation (package)

Install with your favorite package manager.

pnpm add docs-ui-vue

npm i docs-ui-vue

You can also use the UMD build from Unpkg, available as DocsUiVue in the global scope.

Features

• DocsAlert to display explicit messages
  • type for differents colors: info, success, warning, error with icons
  • title option, default is type
  • anonymous boolean to display the message without a title or icon
• DocsFence to show some code
  • Associated copy button
  • highlight.js for syntax highlighting
  • Filename option for better readability (replace language): ts => ts[main.ts]

Usage

Global

Import and register the module as a plugin in src/main.ts.

import { createApp } from 'vue'
import App from './App.vue'
import DocsUiVue from 'docs-ui-vue' // import the library
import 'docs-ui-vue/dist/style.css' // import style

const app = createApp(App)

app
  .use(DocsUiVue)
  .mount('#app')

Per-component

Into src/**/your-component.vue

<script setup lang="ts">
import { DocsFence } from 'docs-ui-vue'
import 'docs-ui-vue/dist/style.css'

const code = `const app = createApp(App)

app
  .use(DocsUiVue)
  .mount('#app')`
</script>

<template>
  <div>
    <docs-fence language="ts[main.ts]">
      {{ code }}
    </docs-fence>
  </div>
</template>

API Reference

DocsFence

| Parameter | Type | Description | | :--------- | :------- | :------------------------------------------------------------- | | language | string | Can be just language, like ts or with filename ts[main.ts] |

Roadmap

• [ ] Add more components
• [ ] Add tests
• [ ] Add documentation
• [ ] Nuxt 3 support

Contributing

Contributions are always welcome! Fork repository to make pull requests.

git clone [email protected]:ewilan-riviere/docs-ui-vue.git
cd docs-ui-vue
pnpm i
pnpm dev

Related

• Markdoc: Markdown framework

License

MIT

Credits

• Tailwind CSS and Tailwind UI for design
• Markdoc for markdown framework
• Docus for components design