Vue Tiptap: Build Enhanced Vue 3 Components with Tiptap 2 Integration

vue-tiptap

Example of using tiptap 2 as a Vue 3 component without being completely renderless, so you can see how to use it inside your own components or even use it right away. It can be imported as a Vue 3 component, and you can see in the example directory how it would be used inside your application.

Note: now tiptap has their own examples and components for different frameworks (including vue 2 and vue 3), so maybe you should take a look to the official package @tiptap/vue-3. This package will not be updated anymore.

Install and Usage

# install dependencies
npm install

# build component
npm build

# serve demo
npm serve

.eslintignore

!.*.json
package.json
package-lock.json
*.md
*.scss

# Ignore dist/ files
dist/*

.eslintrc.json

{
  "root": true,
  "env": {
    "es6": true,
    "node": true,
    "browser": true
  },
  "globals": {},
  "plugins": [
    "prettier"
  ],
  "extends": [
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": [
      "error",
      {},
      {
        "usePrettierrc": true
      }
    ],
    "no-console": "warn",
    "no-debugger": 1,
    "require-atomic-updates": 0
  },
  "overrides": [
    {
      "files": [
        "**/*.js"
      ],
      "parser": "@babel/eslint-parser",
      "parserOptions": {
        "requireConfigFile": false,
        "ecmaVersion": 2018,
        "sourceType": "module",
        "allowImportExportEverywhere": true,
        "ecmaFeatures": {
          "experimentalObjectRestSpread": true
        }
      },
      "plugins": [],
      "extends": [
        "eslint:recommended"
      ],
      "rules": {}
    },
    {
      "files": [
        "**/*.json"
      ],
      "plugins": [
        "json-format"
      ]
    },
    {
      "files": [
        "**/*.html"
      ],
      "plugins": [
        "html"
      ],
      "extends": [
        "eslint:recommended"
      ],
      "rules": {}
    },
    {
      "files": [
        "**/*.vue"
      ],
      "plugins": [
        "vue"
      ],
      "parser": "vue-eslint-parser",
      "extends": [
        "eslint:recommended",
        "plugin:vue/base",
        "plugin:vue/vue3-essential",
        "plugin:vue/vue3-recommended",
        "plugin:vue/vue3-strongly-recommended",
        "prettier"
      ],
      "rules": {
        "vue/no-unused-components": "warn",
        "vue/require-valid-default-prop": "warn",
        "vue/multi-word-component-names": "off"
      }
    }
  ]
}

.gitignore

.DS_Store
node_modules
dist/
!dist/.gitkeep

# local env files
.env.local
.env.*.local

# log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

Download details:

Author: banaoa
Source: https://github.com/banaoa/vue-tiptap

License: MIT license

#vue #vuejs