[MGNLFE-145] vue-editor should work with vue 2.x Created: 02/Nov/21  Updated: 22/Sep/22  Resolved: 22/Sep/22

Status: Closed
Project: Magnolia Frontend Helpers
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Bug Priority: High
Reporter: Mykola Assignee: Unassigned
Resolution: Outdated Votes: 0
Labels: None
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Template:
Acceptance criteria:
[ ]* vue-editor works with Vue 2 and Vue 3
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Date of First Response:

 Description   

vue-editor is using vue@^3.0.0 internally
As of today Nuxt officialy supports only vue@^2.6.12 (Production ready)
Because of that we're unable to use vue-editor in Nuxt projects
Adding vue-editor in nuxt projects resulting in folowing error:

TypeError: Cannot read properties of undefined (reading 'value')
    at VueComponent.renderingContent (vue-editor.umd.min.js?075f:1)
    at Watcher.get (vue.runtime.esm.js?2b0e:4495)
    at Watcher.evaluate (vue.runtime.esm.js?2b0e:4597)
    at Proxy.computedGetter (vue.runtime.esm.js?2b0e:4851)
    at Proxy.render (vue-editor.umd.min.js?075f:1)
    at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3569)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4070)
    at Watcher.get (vue.runtime.esm.js?2b0e:4495)
    at new Watcher (vue.runtime.esm.js?2b0e:4484)
    at mountComponent (vue.runtime.esm.js?2b0e:4088)

which originates in EditablePage.vue:

setup(props) {
  let reactiveTemplateAnnotations = {};
  if (props.templateAnnotations) {
    reactiveTemplateAnnotations = ref({ value: props.templateAnnotations });
  }
  return {
    reactiveTemplateAnnotations
  };
},
computed: {
  renderingContent() {
    return TemplateAnnotations.generateMissingAreas(this.content, this.reactiveTemplateAnnotations.value);
  }
},


 Comments   
Comment by Mykola [ 02/Nov/21 ]

Vue 3 is backward compatible

maybe the easiest sollution would be just to drop new features, that are present only in vue 3 (such as provide/inject, ref, setup, etc)
otherwise it would require shipping different modules for different versions

Comment by Christopher Zimmermann [ 03/Nov/21 ]

Hi Mykola, thanks for the report. And sorry to hear about this as an obstacle. Do you know if/when Nuxt is planning production support for Vue 3. Till now most (all?) of our requests for Vue have been focussed on Vue3.

Comment by Christopher Zimmermann [ 03/Nov/21 ]

NDQ I see beta announcement on October 12, but of course that does not mean anything concrete. https://nuxtjs.org/announcements/nuxt3-beta/ Or have you heard anything?

Comment by Mykola [ 15/Dec/21 ]

Sadly I don't have information about Nuxt future releases or Nuxt plans
The only thing I know is what written in this article that you attached.

Do you have any plans for updating magnolia vue-editor in near future?
Would it be ok if I'll try to fork your repo?

Comment by Christopher Zimmermann [ 16/Dec/21 ]

At the moment we do not have concrete plans to support vue 2, as much as we would like to. We have to prioritize based on several factors. If you are an enterprise customer or are a tech partner working with an enterprise customer, please file a support ticket, this would help us in prioritizing it.

Yes you are welcome to fork the repository! Let us know how it goes.

Comment by Christopher Zimmermann [ 16/Dec/21 ]

You might find some inspiration here - when we first demo'd how the technology could work with vue:

https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/commits/76d0e7786fd317cd8181cccd3d7187527cd6bff0

The vue-editor is actually just this one file:

https://git.magnolia-cms.com/projects/DEMOS/repos/minimal-headless-spa-demos/commits/76d0e7786fd317cd8181cccd3d7187527cd6bff0#spa/vue-minimal/src/vue-editor.vue

 

Comment by Mykola [ 19/Sep/22 ]

we probably can close this issue, since https://git.magnolia-cms.com/projects/INCUBATOR/repos/vue2-editor/browse is out 

Comment by Christopher Zimmermann [ 22/Sep/22 ]

Closing this ticket as outdated as an Incubator module covers Vue 2, and we support Vue 3 officiaally and now Nuxt supports Vue 3 as well.

Vue2 Incubator module: https://git.magnolia-cms.com/projects/INCUBATOR/repos/vue2-editor/browse

Generated at Mon Feb 12 05:44:40 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.