iliyaZelenko / tiptap-vuetify

Vuetify editor. Component simplifies integration tiptap editor with vuetify.
https://iliyazelenko.github.io/tiptap-vuetify-demo/
799 stars 127 forks source link

"tiptap-vuetify: please, specify in options the Vuetify Object ("vuetify" property)" #249

Open cfmnephrite opened 3 years ago

cfmnephrite commented 3 years ago

I am using Laravel Vue with Laravel 6, Vue 2.6 and Vuetify 2.3, and my setup involves importing Vuetify as a plugin, contained in plugins/vuetify.js. I have tried setting up tiptap-vuetify using the instructions on the main page as well as using the suggested solutions posed here: How to make this work with plugins/vuetify. Here is my app.js:

import Vuelidate from 'vuelidate'
import { ValidationProvider } from 'vee-validate';
import vuetify from "../plugins/vuetify";
import { TiptapVuetifyPlugin } from 'tiptap-vuetify'
import 'tiptap-vuetify/dist/main.css'
import draggable from 'vuedraggable';
import {Drag, DropList} from 'vue-easy-dnd';
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-alpine.css";
import { AgGridVue } from 'ag-grid-vue';
import 'ag-grid-enterprise';
import Vuex from 'vuex'
import store from './store'

// use this package's plugin
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: 'md'
  })

Vue.use(Vuex);
Vue.use(Vuelidate)
Vue.component('ValidationProvider', ValidationProvider);
Vue.component('AgGridVue', AgGridVue);
Vue.component('draggable', draggable);
Vue.component('Drag', Drag);
Vue.component('DropList', DropList);

const app = new Vue({
    vuetify,
    el: '#app',
    store: store,
});

Even though vuetify is clearly loaded and passed to TiptapVuetifyPlugin as a property, I get the error "tiptap-vuetify: Please, specify in options the Vuetify Object ("vuetify" property)" every time. What am I doing wrong, exactly?

Thanks very much!

fynesr commented 3 years ago

I'm also having a problem initializing when using Vuetify as a plugin. I've also tried both the "variant" solutions suggested by the author but I always get the same error, which is "export 'default' (imported as 'TiptapVuetifyPlugin') was not found in 'tiptap-vuetify.

I installed the plugin in the recommended way with npm e.g. npm install --save tiptap-vuetify and I can see it there in my node_modules. @cfmnephrite did you ever find a solution for this?

tkresic commented 3 years ago

For anyone wondering about the issue with initializing tip tap with Vue CLI TS built app, here's my configuration in the main.ts file:

import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify/vuetify';
import i18n from './i18n'
import { TiptapVuetifyPlugin } from 'tiptap-vuetify';

Vue.use(TiptapVuetifyPlugin, { vuetify })

Vue.config.productionTip = false

new Vue({
  router,
  store,
  vuetify,
  i18n,
  render: h => h(App)
}).$mount('#app')
cfmnephrite commented 3 years ago

@tkresic We have the same tiptap-vuetify configuration - not sure what you were demonstrating?

@fynesr I'm afraid I haven't found a solution - always that same error. However, you appear to have a different error to mine?