CODEWITHSUNDEEP
vue.jsvuetify.jstiptap
loreeemartiii
loreeemartiii

Reputation: 385

Vuetify lazy load tiptap editor

My project JS is about 680 kb. I've added vuetify-tiptap editor and now the JS is 1338 kb.

I load the plugin like this in https://www.npmjs.com/package/tiptap-vuetify#installation

In vuetify.js:

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

const vuetify = new Vuetify()

Vue.use(Vuetify)
Vue.use(TiptapVuetifyPlugin, {
    // the next line is important! You need to provide the Vuetify Object to this place.
    vuetify, // same as "vuetify: vuetify"
    // optional, default to 'md' (default vuetify icons before v2.0.0)
    iconsGroup: 'mdi'
})

Then I use tiptap in a component (Editor.vue)

<tiptap-vuetify v-if="!disabled"
        v-model="content"
        :extensions="extensions"
        :disabled="disabled"
    />

JS:

import { TiptapVuetify, Heading, Bold, Italic, Strike, Underline, Code, Paragraph, BulletList, OrderedList, ListItem, Link, Blockquote, HardBreak, HorizontalRule, History } from 'tiptap-vuetify'
components: { TiptapVuetify },
  data() {
    return {
      // declare extensions you want to use
      extensions: [
        History,
        Blockquote,
        Link,
        Underline,
        Strike,
        Italic,
        ListItem,
        BulletList,
        OrderedList,
        [Heading, {
          options: {
            levels: [1, 2, 3]
          }
        }],
        Bold,
        Code,
        HorizontalRule,
        Paragraph,
        HardBreak
      ],
      // starting editor's content
      content: this.model
    }
  }

Is there a way to load all only upon need or reduce the chunk-vendors.js?

Upvotes: 0

Views: 847

Answers (1)

jmsbrone
jmsbrone

Reputation: 11

I've tried to look for a solution but there seems to be no info. After a few attempts including loading tiptap via cdn I managed to get it detached from main bundles.

What basically needs to be done is to call Vue.use from within the required component that is lazy loaded itself. The only thing to keep in mind is that Vuetify instance needs to be stored someone loaded script can access it.

I'm using Nuxt with ts support so for me it looks something like this:

import { Component, Vue } from "nuxt-property-decorator";

import {
    TiptapVuetify,
    TiptapVuetifyPlugin,
    // ...other imports
} from "tiptap-vuetify";

import dvue from 'vue';
dvue.use(TiptapVuetifyPlugin, {
    vuetify: window['Vuetify']
});

@Component({ components: { TiptapVuetify } })
export default class HtmlEditor extends Vue {}

Nuxt plugin to save the instance:

export default ({ app }) => {
    if (window) {
        window["Vuetify"] = app.vuetify;
    }
};

And that's it, tiptap-vuetify component is working within lazy loaded component, so loaded if needed.

Upvotes: 1

Related Questions