nuxt-tiptap-editor
v3.2.0
Essentials to Quickly Integrate TipTap Editor into your Nuxt App
0/weekUpdated 1 months agoMITUnpacked: 42.5 KB
Published by modbender
npm install nuxt-tiptap-editor
Nuxt TipTap Editor
Instantly add TipTap Editor with basic functionality to your Nuxt 3 App.
---
- 📖 Documentation for Module | Documentation by Tiptap
- ✨ Release Notes
- 🏀 Online playground
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. components
Any path is fine as long as it's under directory with .vue extension.
`vue
:disabled="!editor.can().chain().focus().toggleBold().run()"
:class="{ 'is-active': editor.isActive('bold') }"
>
bold
:disabled="!editor.can().chain().focus().toggleItalic().run()"
:class="{ 'is-active': editor.isActive('italic') }"
>
italic
:disabled="!editor.can().chain().focus().toggleStrike().run()"
:class="{ 'is-active': editor.isActive('strike') }"
>
strike
:disabled="!editor.can().chain().focus().toggleCode().run()"
:class="{ 'is-active': editor.isActive('code') }"
>
code
:class="{ 'is-active': editor.isActive('paragraph') }"
>
paragraph
:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
>
h1
:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
>
h2
:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
>
h3
:class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
>
h4
:class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
>
h5
:class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
>
h6
:class="{ 'is-active': editor.isActive('bulletList') }"
>
bullet list
:class="{ 'is-active': editor.isActive('orderedList') }"
>
ordered list
:class="{ 'is-active': editor.isActive('codeBlock') }"
>
code block
:class="{ 'is-active': editor.isActive('blockquote') }"
>
blockquote
:disabled="!editor.can().chain().focus().undo().run()"
>
undo
:disabled="!editor.can().chain().focus().redo().run()"
>
redo
`
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
`bashInstall 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