@richmd/vue NPM

@richmd/vue

NPM License NPM Version NPM Downloads

Vue component for Richmd - a tool for creating rich content with Markdown.

Installation

# Using npm
npm install @richmd/vue

# Using yarn
yarn add @richmd/vue

# Using pnpm
pnpm add @richmd/vue

Usage with Nuxt

1. Import CSS in your Nuxt app

First, import the required CSS in your Nuxt app. You can do this in your app.vue file or in a plugin:

<script setup>
import "@richmd/vue/dist/richmd.css";
</script>

Alternatively, you can create a plugin in the plugins directory:

// plugins/richmd.ts
import "@richmd/vue/dist/richmd.css";

export default defineNuxtPlugin(() => {
  // Plugin setup if needed
});

2. Use the Richmd component in your pages or components

<script setup>
import { Richmd } from "@richmd/vue";

const markdownText = `# Hello, Richmd!

This is a **bold text** and *italic text*.

## Features
- Rich markdown support
- Easy to use
- Customizable

\`\`\`js
// Code block example
const hello = "world";
console.log(hello);
\`\`\`

> Blockquote example

| Table | Example |
|-------|---------|
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
`;
</script>

<template>
  <div class="container">
    <Richmd :text="markdownText" class="markdown-content" />
  </div>
</template>

3. Create a markdown editor (optional)

You can create a simple markdown editor with live preview:

<script setup>
import { ref } from "vue";
import { Richmd } from "@richmd/vue";

const text = ref('# Start typing here...');
</script>

<template>
  <div class="flex flex-col md:flex-row gap-4">
    <div class="w-full md:w-1/2">
      <textarea 
        class="w-full h-[500px] p-4 border rounded"
        v-model="text"
      />
    </div>
    <div class="w-full md:w-1/2 border rounded p-4">
      <Richmd :text="text" class="prose" />
    </div>
  </div>
</template>

4. Use the RichmdSlide component (optional)

<script lang="ts">
import { RichmdSlide } from '@richmd/vue';
import "./global.css";
import "@richmd/vue/dist/richmd.css";

export default {
  components: {
    RichmdSlide,
  },
  data() {
    return {
      text: `:use slide:

:---:title.sunset
# Title

subtext
:---:

:<--:content.sunset
# Subtitle

*subtext*
:---:
`,
    };
  },
};
</script>

<template>
  <RichmdSlide :text="text" :is-controller="false" />
</template>