Installation
Requirements
- Vue 3.5+
- vue-i18n 11+
- Vuetify 3.8+ or Vuetify 4.x
- @mdi/js (Material Design Icons)
Install the package
bash
npm i tiptapifybash
pnpm i tiptapifybash
yarn add tiptapifyPeer Dependencies
Tiptapify requires the following peer dependencies. Make sure they are installed in your project:
bash
npm i @mdi/js vue vue-i18n vuetifyVuetify Setup
Register Vuetify with MDI icons in your main.ts / main.js:
typescript
import { createApp } from 'vue'
import App from './App.vue'
import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
const vuetify = createVuetify({
components,
directives,
icons: {
defaultSet: 'mdi',
aliases,
sets: { mdi },
},
})
const app = createApp(App)
app.use(vuetify)
app.mount('#app')Register the Tiptapify Plugin
In your app entry file, import and register the Tiptapify plugin:
typescript
import { createI18n } from 'vue-i18n'
import TiptapifyPlugin from 'tiptapify'
import 'tiptapify/style.css'
const i18n = createI18n({
legacy: false,
locale: 'en',
})
app.use(i18n)
app.use(TiptapifyPlugin, { i18n })Full Example
Here is a complete main.ts setup:
typescript
import { createApp } from 'vue'
import App from './App.vue'
import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { createI18n } from 'vue-i18n'
import TiptapifyPlugin from 'tiptapify'
import 'tiptapify/style.css'
const i18n = createI18n({
legacy: false,
locale: 'en',
})
const vuetify = createVuetify({
components,
directives,
icons: {
defaultSet: 'mdi',
aliases,
sets: { mdi },
},
})
const app = createApp(App)
app.use(vuetify)
app.use(i18n)
app.use(TiptapifyPlugin, { i18n })
app.mount('#app')Vue 3 + Composition API Setup
If you are using <script setup> syntax, the editor can be used immediately:
vue
<script setup lang="ts">
const handleEditorReady = (options) => {
console.log('HTML:', options.getHTML())
console.log('JSON:', options.getJSON())
}
</script>
<template>
<Tiptapify
placeholder="Start writing..."
@editor-ready="handleEditorReady"
/>
</template>CDN Usage
For quick prototyping, you can load Tiptapify via CDN:
html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tiptapify@latest/dist/tiptapify.css" />
</head>
<body>
<div id="app">
<tiptapify placeholder="Start typing..."></tiptapify>
</div>
<script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
import TiptapifyPlugin from 'https://cdn.jsdelivr.net/npm/tiptapify@latest/dist/tiptapify.mjs'
import 'https://cdn.jsdelivr.net/npm/tiptapify@latest/dist/tiptapify.css'
// Note: CDN usage requires Vue, Vuetify, and @mdi/js to be loaded separately
</script>
</body>
</html>CDN Limitations
CDN usage is not recommended for production. Always use a module bundler (Vite, Webpack) for production deployments.