{"id":20143921,"url":"https://github.com/modbender/nuxt-tiptap-editor","last_synced_at":"2025-05-16T15:08:23.545Z","repository":{"id":210580686,"uuid":"726876568","full_name":"modbender/nuxt-tiptap-editor","owner":"modbender","description":"Essentials to Quickly Integrate TipTap Editor into your Nuxt App","archived":false,"fork":false,"pushed_at":"2025-04-29T15:44:44.000Z","size":1035,"stargazers_count":117,"open_issues_count":1,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-29T16:21:59.196Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://nuxt-tiptap-editor.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/modbender.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["modbender"],"patreon":"modbender","open_collective":null,"ko_fi":"modbender","tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"custom":["paypal.me/modbender"]}},"created_at":"2023-12-03T16:59:46.000Z","updated_at":"2025-04-29T15:44:24.000Z","dependencies_parsed_at":"2024-02-26T19:46:49.846Z","dependency_job_id":"7490b00b-6224-4c12-ac8d-c893afc47cff","html_url":"https://github.com/modbender/nuxt-tiptap-editor","commit_stats":null,"previous_names":["modbender/nuxt-tiptap-editor"],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modbender%2Fnuxt-tiptap-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modbender%2Fnuxt-tiptap-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modbender%2Fnuxt-tiptap-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/modbender%2Fnuxt-tiptap-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/modbender","download_url":"https://codeload.github.com/modbender/nuxt-tiptap-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254553958,"owners_count":22090417,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T22:07:30.884Z","updated_at":"2025-05-16T15:08:18.518Z","avatar_url":"https://github.com/modbender.png","language":"TypeScript","funding_links":["https://github.com/sponsors/modbender","https://patreon.com/modbender","https://ko-fi.com/modbender","paypal.me/modbender"],"categories":["TypeScript","Vue.js"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n   Nuxt TipTap Editor\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.com/package/nuxt-tiptap-editor\" rel=\"nofollow\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/nuxt-tiptap-editor/latest.svg?style=flat\u0026amp;colorA=18181B\u0026amp;colorB=28CF8D\" alt=\"npm version\" data-canonical-src=\"https://img.shields.io/npm/v/nuxt-tiptap-editor/latest.svg?style=flat\u0026amp;colorA=18181B\u0026amp;colorB=28CF8D\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://npmjs.com/package/nuxt-tiptap-editor\" rel=\"nofollow\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/dm/nuxt-tiptap-editor.svg?style=flat\u0026amp;colorA=18181B\u0026amp;colorB=28CF8D\" alt=\"npm downloads\" data-canonical-src=\"https://img.shields.io/npm/dm/nuxt-tiptap-editor.svg?style=flat\u0026amp;colorA=18181B\u0026amp;colorB=28CF8D\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://npmjs.com/package/nuxt-tiptap-editor\" rel=\"nofollow\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/l/nuxt-tiptap-editor.svg?style=flat\u0026amp;colorA=18181B\u0026amp;colorB=28CF8D\" alt=\"License\" data-canonical-src=\"https://img.shields.io/npm/l/nuxt-tiptap-editor.svg?style=flat\u0026amp;colorA=18181B\u0026amp;colorB=28CF8D\" style=\"max-width: 100%;\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://nuxt.com\" rel=\"nofollow\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\" alt=\"Nuxt\" data-canonical-src=\"https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\" style=\"max-width: 100%;\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Instantly add \u003ca href=\"https://tiptap.dev/editor\" rel=\"nofollow\"\u003eTipTap Editor\u003c/a\u003e with basic functionality to your Nuxt 3 App.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://assets-global.website-files.com/645a9acecda2e0594fac6126/65675de8c3c9cffc1a4a4d26_editor-eaxmple-placeholder-p-800.png\" alt=\"Tiptap Editor Preview\" /\u003e\n\u003c/p\u003e\n\n---\n\n- 📖 [Documentation for Module](https://nuxt-tiptap-editor.vercel.app) | [Documentation by Tiptap](https://tiptap.dev/docs/editor/extensions/overview)\n- ✨ [Release Notes](/CHANGELOG.md)\n- 🏀 [Online playground](https://stackblitz.com/github/modbender/nuxt-tiptap-editor?file=playground%2Fapp.vue)\n\u003c!-- - [📖 \u0026nbsp;Documentation](https://example.com) --\u003e\n\n## Quick Setup\n\n1. Add `nuxt-tiptap-editor` dependency to your project\n\n   ```sh\n   npx nuxi@latest module add tiptap\n   ```\n\n2. Add `nuxt-tiptap-editor` to the `modules` section of `nuxt.config.ts`\n\n   ```js\n   export default defineNuxtConfig({\n     modules: ['nuxt-tiptap-editor'],\n     tiptap: {\n       prefix: 'Tiptap', //prefix for Tiptap imports, composables not included\n     },\n   });\n   ```\n\n3. You can use the contents of this file as reference.  \n   Copy the code to your own `components/TiptapEditor.vue`.  \n   Any path is fine as long as it's under `components` directory with `.vue` extension.\n\n   ```vue\n   \u003ctemplate\u003e\n     \u003cdiv\u003e\n       \u003cdiv v-if=\"editor\"\u003e\n         \u003cbutton\n           @click=\"editor.chain().focus().toggleBold().run()\"\n           :disabled=\"!editor.can().chain().focus().toggleBold().run()\"\n           :class=\"{ 'is-active': editor.isActive('bold') }\"\n         \u003e\n           bold\n         \u003c/button\u003e\n         \u003cbutton\n           @click=\"editor.chain().focus().toggleItalic().run()\"\n           :disabled=\"!editor.can().chain().focus().toggleItalic().run()\"\n           :class=\"{ 'is-active': editor.isActive('italic') }\"\n         \u003e\n           italic\n         \u003c/button\u003e\n         \u003cbutton\n           @click=\"editor.chain().focus().toggleStrike().run()\"\n           :disabled=\"!editor.can().chain().focus().toggleStrike().run()\"\n           :class=\"{ 'is-active': editor.isActive('strike') }\"\n         \u003e\n           strike\n         \u003c/button\u003e\n         \u003cbutton\n           @click=\"editor.chain().focus().toggleCode().run()\"\n           :disabled=\"!editor.can().chain().focus().toggleCode().run()\"\n           :class=\"{ 'is-active': editor.isActive('code') }\"\n         \u003e\n           code\n         \u003c/button\u003e\n         \u003cbutton @click=\"editor.chain().focus().unsetAllMarks().run()\"\u003e\n           clear marks\n         \u003c/button\u003e\n         \u003cbutton @click=\"editor.chain().focus().clearNodes().run()\"\u003e\n           clear nodes\n         \u003c/button\u003e\n         \u003cbutton\n           @click=\"editor.chain().focus().setParagraph().run()\"\n           :class=\"{ 'is-active': editor.isActive('paragraph') }\"\n         \u003e\n           paragraph\n         \u003c/button\u003e\n         \u003cbutton\n           @click=\"editor.chain().focus().toggleHeading({ level: 1 }).run()\"\n           :class=\"{ 'is-active': editor.isActive('heading', { level: 1 }) }\"\n         \u003e\n           h1\n         \u003c/button\u003e\n         \u003cbutton\n           @click=\"editor.chain().focus().toggleHeading({ level: 2 }).run()\"\n           :class=\"{ 'is-active': editor.isActive('heading', { level: 2 }) }\"\n         \u003e\n           h2\n         \u003c/button\u003e\n         \u003cbutton\n           @click=\"editor.chain().focus().toggleHeading({ level: 3 }).run()\"\n           :class=\"{ 'is-active': editor.isActive('heading', { level: 3 }) }\"\n         \u003e\n           h3\n         \u003c/button\u003e\n         \u003cbutton\n           @click=\"editor.chain().focus().toggleHeading({ level: 4 }).run()\"\n           :class=\"{ 'is-active': editor.isActive('heading', { level: 4 }) }\"\n         \u003e\n           h4\n         \u003c/button\u003e\n         \u003cbutton\n           @click=\"editor.chain().focus().toggleHeading({ level: 5 }).run()\"\n           :class=\"{ 'is-active': editor.isActive('heading', { level: 5 }) }\"\n         \u003e\n           h5\n         \u003c/button\u003e\n         \u003cbutton\n           @click=\"editor.chain().focus().toggleHeading({ level: 6 }).run()\"\n           :class=\"{ 'is-active': editor.isActive('heading', { level: 6 }) }\"\n         \u003e\n           h6\n         \u003c/button\u003e\n         \u003cbutton\n           @click=\"editor.chain().focus().toggleBulletList().run()\"\n           :class=\"{ 'is-active': editor.isActive('bulletList') }\"\n         \u003e\n           bullet list\n         \u003c/button\u003e\n         \u003cbutton\n           @click=\"editor.chain().focus().toggleOrderedList().run()\"\n           :class=\"{ 'is-active': editor.isActive('orderedList') }\"\n         \u003e\n           ordered list\n         \u003c/button\u003e\n         \u003cbutton\n           @click=\"editor.chain().focus().toggleCodeBlock().run()\"\n           :class=\"{ 'is-active': editor.isActive('codeBlock') }\"\n         \u003e\n           code block\n         \u003c/button\u003e\n         \u003cbutton\n           @click=\"editor.chain().focus().toggleBlockquote().run()\"\n           :class=\"{ 'is-active': editor.isActive('blockquote') }\"\n         \u003e\n           blockquote\n         \u003c/button\u003e\n         \u003cbutton @click=\"editor.chain().focus().setHorizontalRule().run()\"\u003e\n           horizontal rule\n         \u003c/button\u003e\n         \u003cbutton @click=\"editor.chain().focus().setHardBreak().run()\"\u003e\n           hard break\n         \u003c/button\u003e\n         \u003cbutton\n           @click=\"editor.chain().focus().undo().run()\"\n           :disabled=\"!editor.can().chain().focus().undo().run()\"\n         \u003e\n           undo\n         \u003c/button\u003e\n         \u003cbutton\n           @click=\"editor.chain().focus().redo().run()\"\n           :disabled=\"!editor.can().chain().focus().redo().run()\"\n         \u003e\n           redo\n         \u003c/button\u003e\n       \u003c/div\u003e\n       \u003cTiptapEditorContent :editor=\"editor\" /\u003e\n     \u003c/div\u003e\n   \u003c/template\u003e\n\n   \u003cscript setup\u003e\n   const editor = useEditor({\n     content: \"\u003cp\u003eI'm running Tiptap with Vue.js. 🎉\u003c/p\u003e\",\n     extensions: [TiptapStarterKit],\n   });\n\n   onBeforeUnmount(() =\u003e {\n     unref(editor).destroy();\n   });\n   \u003c/script\u003e\n   ```\n\n4. 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.\n\nThat's it! You can now use Nuxt TipTap Editor in your Nuxt app ✨\n\n## Development\n\n```bash\n# Install dependencies\nyarn install\n\n# Generate type stubs\nyarn dev:prepare\n\n# Develop with the playground\nyarn dev\n\n# Build the playground\nyarn build\n\n# Run ESLint\nyarn lint\n\n# Run Vitest\nyarn test\nyarn test:watch\n\n# Release new version - needs to be with npm for login to work\nnpm run release\n```\n\n## Contribution\n\nFeel free to send out any valid pull requests. Would love to get any help!\n\n\u003c!-- Badges --\u003e\n\n[npm-version-src]: https://img.shields.io/npm/v/nuxt-tiptap-editor/latest.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-version-href]: https://npmjs.com/package/nuxt-tiptap-editor\n[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-tiptap-editor.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[npm-downloads-href]: https://npmjs.com/package/nuxt-tiptap-editor\n[license-src]: https://img.shields.io/npm/l/nuxt-tiptap-editor.svg?style=flat\u0026colorA=18181B\u0026colorB=28CF8D\n[license-href]: https://npmjs.com/package/nuxt-tiptap-editor\n[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js\n[nuxt-href]: https://nuxt.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodbender%2Fnuxt-tiptap-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmodbender%2Fnuxt-tiptap-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmodbender%2Fnuxt-tiptap-editor/lists"}