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.
83 lines
1.8 KiB
Markdown
83 lines
1.8 KiB
Markdown
# NuxtJS
|
|
|
|
Since we provide [vue](/docs/recipes/vue) support out of box, we can use it directly in [NuxtJS](https://v3.nuxtjs.org/).
|
|
|
|
> 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.
|
|
|
|
```bash
|
|
# 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.
|
|
|
|
```html
|
|
<!-- 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.
|
|
|
|
```html
|
|
<!-- 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"}
|