https://github.com/modbender/nuxt-tiptap-editor
Essentials to Quickly Integrate TipTap Editor into your Nuxt App
https://github.com/modbender/nuxt-tiptap-editor
Last synced: about 1 year ago
JSON representation
Essentials to Quickly Integrate TipTap Editor into your Nuxt App
- Host: GitHub
- URL: https://github.com/modbender/nuxt-tiptap-editor
- Owner: modbender
- License: mit
- Created: 2023-12-03T16:59:46.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-29T15:44:44.000Z (about 1 year ago)
- Last Synced: 2025-04-29T16:21:59.196Z (about 1 year ago)
- Language: TypeScript
- Homepage: https://nuxt-tiptap-editor.vercel.app/
- Size: 1010 KB
- Stars: 117
- Watchers: 1
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-tiptap - nuxt-tiptap-editor
README
Nuxt TipTap Editor
Instantly add TipTap Editor with basic functionality to your Nuxt 3 App.
---
- 📖 [Documentation for Module](https://nuxt-tiptap-editor.vercel.app) | [Documentation by Tiptap](https://tiptap.dev/docs/editor/extensions/overview)
- ✨ [Release Notes](/CHANGELOG.md)
- 🏀 [Online playground](https://stackblitz.com/github/modbender/nuxt-tiptap-editor?file=playground%2Fapp.vue)
## Quick Setup
1. Add `nuxt-tiptap-editor` dependency to your project
```sh
npx nuxi@latest module add tiptap
```
2. Add `nuxt-tiptap-editor` to the `modules` section of `nuxt.config.ts`
```js
export default defineNuxtConfig({
modules: ['nuxt-tiptap-editor'],
tiptap: {
prefix: 'Tiptap', //prefix for Tiptap imports, composables not included
},
});
```
3. You can use the contents of this file as reference.
Copy the code to your own `components/TiptapEditor.vue`.
Any path is fine as long as it's under `components` directory with `.vue` extension.
```vue
bold
italic
strike
code
clear marks
clear nodes
paragraph
h1
h2
h3
h4
h5
h6
bullet list
ordered list
code block
blockquote
horizontal rule
hard break
undo
redo
const editor = useEditor({
content: "<p>I'm running Tiptap with Vue.js. 🎉</p>",
extensions: [TiptapStarterKit],
});
onBeforeUnmount(() => {
unref(editor).destroy();
});
```
4. Now edit the HTML, replace `button` with your UI provided component, or style it using tailwind or whichever CSS you are using, add icons or text, modify active state class, verify dark mode, etc.
That's it! You can now use Nuxt TipTap Editor in your Nuxt app ✨
## Development
```bash
# Install dependencies
yarn install
# Generate type stubs
yarn dev:prepare
# Develop with the playground
yarn dev
# Build the playground
yarn build
# Run ESLint
yarn lint
# Run Vitest
yarn test
yarn test:watch
# Release new version - needs to be with npm for login to work
npm run release
```
## Contribution
Feel free to send out any valid pull requests. Would love to get any help!
[npm-version-src]: https://img.shields.io/npm/v/nuxt-tiptap-editor/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/nuxt-tiptap-editor
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-tiptap-editor.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/nuxt-tiptap-editor
[license-src]: https://img.shields.io/npm/l/nuxt-tiptap-editor.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/nuxt-tiptap-editor
[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
[nuxt-href]: https://nuxt.com