tiptap-vuetify with Nuxt

Play on Codesanbox: https://codesandbox.io/s/github/iliyaZelenko/tiptap-vuetify-nuxt/tree/master/

Important parts

Transpile

It is important to specify transpile (link to code below).

build: {
  transpile: ['vuetify/lib', 'tiptap-vuetify']
}

Load icons

I put links to icon styles in link array, most likely you only need your kind of icons and you can load the icons in a different way, not like below (link to code below).

link: [
  { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
  // Iconfonts for Vuetify. You need to leave only which one you use
  { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' },
  { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css' },
  { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.4.95/css/materialdesignicons.min.css' }
]

Plugin

It can be seen that I created and connected the plugin.

import Vue from 'vue'
import { TiptapVuetifyPlugin } from 'tiptap-vuetify'
import 'tiptap-vuetify/dist/main.css'

export default ({ app }) => {
  Vue.use(TiptapVuetifyPlugin, {
    // Below is an IMPORTANT line.
    vuetify: app.vuetify,
    iconsGroup: 'mdi'
  })
}

And include it (nuxt.config.js):

plugins: [
  { src: '~/plugins/TiptapVuetify', mode: 'client' }
],

Vuetify object (new Vuetify(opts)) is in app.vuetify because of @nuxtjs/vuetify module, if you do not use @nuxtjs/vuetify and initialize Vuetify yourself, then do not forget to pass the Vuetify object as in the code above. You can read more on Vuetify's docs.

About Nuxt's plugins documentation here.

Build Setup

# install dependencies
$ yarn install

# serve with hot reload at localhost:3000
$ yarn run dev

# build for production and launch server
$ yarn run build
$ yarn start

# generate static project
$ yarn run generate

For detailed explanation on how things work, checkout Nuxt.js docs.

AlexeyZelenko / tiptap-vuetify-nuxt