Level 104
Using the composition API, you use plugins on the created App instance, e.g.
return createApp({ render: () => h(app, props) })
.use(wysiwyg)
// ...
1 like
Sep 13, 2021
8
Level 7
Using VUE plugins with JetStream (Laravel/Inertia)
Hi, I am trying to add a VUE package to my laravel jetstream using Laravel/Inertia. The package requires adding the following to the main JS file
import wysiwyg from "vue-wysiwyg"; Vue.use(wysiwyg, {}); // config is optional. more below
Which is causing the error in the terminal Uncaught ReferenceError: Vue is not defined
Obviously I can see Vue is not defined as usual with the jetstream setup - I am just wondering how I achieve this? I am sure I am missing something simple/obvious - but new to this setup and wondering if anybody can shed any light on this?
Level 7
Thanks for your reply - excuse my ignorance, but how would that work with the jetpack setup? trying import/use 'wysiwyg'?? thanks for your help
require('./bootstrap');
import { createApp, h } from 'vue'; import { createInertiaApp } from '@inertiajs/inertia-vue3'; import { InertiaProgress } from '@inertiajs/progress'; import wysiwyg from "vue-wysiwyg";
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
title: (title) => ${title} - ${appName},
resolve: (name) => require(./Pages/${name}.vue),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.mixin({ methods: { route } })
.mount(el);
},
});
InertiaProgress.init({ color: '#4B5563' });
Level 104
Just looking at that vue-wysiwyg package on npm, it is 3 years since it was published; will it even work with Vue3???
1 like
Level 7
probs where im going wrong - lol - thanks for your help though all the same
Level 7
although trying to use https://www.tiptap.dev/ which is vue3 supported - and it doesnt work with inertia!?
Level 104
Did you follow the Vue3 guide; it worked for me as a quick test on a current project?
Level 7
it didnt error - just didnt show anything other than 'Iām running tiptap with Vue.js. š' ...? which implementation did you use from these > https://www.tiptap.dev/installation/vue3
Level 104
@davestar057 that's it - it is working; but, it is headless meaning
There is no provided user interface, you are absolutely free to build whatever interface you want.
You need to construct the Editor design and controls to suit your project, e.g. https://www.tiptap.dev/examples/default
Please or to participate in this conversation.