ydy0615
d9ab341223
- Created a new document for using components in Milkdown. - Added a guide for using plugins in Milkdown, including toggling plugins programmatically and listing official plugins. - Introduced a recipe for integrating Milkdown with Angular, including installation steps and component creation. - Added a recipe for using Milkdown with Next.js, detailing installation and component setup. - Created a guide for integrating Milkdown with NuxtJS, including installation and component creation. - Added a comprehensive guide for using Milkdown with React, covering both Crepe and core Milkdown usage. - Introduced a recipe for SolidJS integration with Milkdown, including installation and component creation. - Added a guide for using Milkdown with Svelte, detailing installation and component setup. - Created a comprehensive guide for integrating Milkdown with Vue, covering both Crepe and core Milkdown usage. - Added a recipe for using Milkdown with Vue2, including installation and component creation.
1.8 KiB
1.8 KiB
NuxtJS
Since we provide vue support out of box, we can use it directly in NuxtJS.
NuxtJS version should be 3.x.
Install the Dependencies
Except the @milkdown/kit and theme. We need to install the @milkdown/vue, which provide lots of abilities for vue in milkdown.
# install with npm
npm install @milkdown/vue
npm install @milkdown/kit
npm install @milkdown/theme-nord
Create a Component
Create a component is pretty easy.
First, we need to create a MilkdownEditor component.
<!-- MilkdownEditor.vue -->
<template>
<Milkdown />
</template>
<script>
import { Editor, rootCtx, defaultValueCtx } from "@milkdown/kit/core";
import { commonmark } from "@milkdown/kit/preset/commonmark";
import { nord } from "@milkdown/theme-nord";
import { Milkdown, useEditor } from "@milkdown/vue";
import { defineComponent } from "vue";
export default defineComponent({
name: "Milkdown",
components: {
Milkdown,
},
setup: () => {
useEditor((root) =>
Editor.make()
.config((ctx) => {
ctx.set(rootCtx, root);
})
.config(nord)
.use(commonmark),
);
},
});
</script>
Then, we need to create a MilkdownEditorWrapper component.
<!-- MilkdownEditorWrapper.vue -->
<template>
<MilkdownProvider>
<MilkdownEditor />
</MilkdownProvider>
</template>
<script>
import { MilkdownProvider } from "@milkdown/vue";
import { defineComponent } from "vue";
export default defineComponent({
name: "MilkdownEditorWrapper",
components: {
MilkdownProvider,
},
setup: () => {},
});
</script>
Online Demo
::iframe{src="https://stackblitz.com/github/Milkdown/examples/tree/main/nuxt-commonmark"}