Vue 3 support

[oleksii-shaposhnikov]

Hey guys, are you going to add support for Vue 3?

[inspire22]

Anyone make any progress with this? It kinda works with 3.1 but there are errors with trying to access refs.trix for some reason.

vue-trix.esm.js:83 Uncaught TypeError: Cannot read property 'editor' of undefined at Proxy.emitBeforeInitialize (vue-trix.esm.js:83) at callWithErrorHandling (vue.runtime.esm-bundler.js:1341) at callWithAsyncErrorHandling (vue.runtime.esm-bundler.js:1350) at HTMLElement.invoker (vue.runtime.esm-bundler.js:10704) at triggerEvent (trix.js:15) at HTMLElement.connect (trix.js:21) at HTMLElement.n (trix.js:15) at insert (vue.runtime.esm-bundler.js:10341) at mountElement (vue.runtime.esm-bundler.js:6894)

[inspire22]

I found this guy saying to add it to the compiler options, but this doesn't work with the current 3.1 with or without compabitlity mode.

https://laracasts.com/discuss/channels/vue/vue3-and-trixeditor-failed-to-resolve-component-trix-editor

Looking at the source, this seems to be the problem:
*/
function EmitBeforeInitialize (component) {
return {
methods: {
emitBeforeInitialize: function emitBeforeInitialize (event) {
this.$emit('trix-before-initialize', this.$refs.trix.editor, event);
}
}
}
}

I believe it's because $refs isn't populated currently until after initialization (which seems stupid)

Having vue return in this method instead of emitting seems to solve it; I'm not sure if anything depends on this signal or not...

[AminaMAHROUCH]

There's no update for this issue ?

[inspire22]

It's working great for me now on 3.1 if you edit the source after installing and have that function return

vi ./node_modules/vue-trix/dist/vue-trix.esm.js
line 82-82

I'm not sure what the consequences of not having that event are.

Also v-model isn't working with 3.x as it's changed, but you can have a function in @input that sets your local variable with the passed in value.

<VueTrix @input="trixSave" />

then in methods:

trixSave(v) {
			this.body= v;
		},

[eugenevk]

Any update on supporting VueJS 3.0?

[sawirricardo]

Any update?

[gideonpeters]

Any update?

[nomadjimbob]

I've written my own Vue3 component heavily based on this and made it public at https://gist.github.com/nomadjimbob/db6d3cdb630a931722595f9adf75ca53

Not 100% tested but a starting point

• srcContent prop is updated correctly
• Fixed the ref issues. Seems under Vue3 Trix is not fully initialized when mounted or when some of the watchers are called, so I have added the code to queue calls until Trix is initalized

Also includes a few little helpers for creating toolbar buttons with some examples included based on some submitted over on the Trix repo

[mralston]

I've written my own Vue3 component heavily based on this and made it public at https://gist.github.com/nomadjimbob/db6d3cdb630a931722595f9adf75ca53

Thanks James! 😃