[
https://issues.apache.org/jira/browse/AIRAVATA-3699?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=17804475#comment-17804475
]
Jackson Crantford commented on AIRAVATA-3699:
---------------------------------------------
Hi Marcus,
I ended up scrapping what work I did prior to September and started over. I had
a fresher understanding of Django, which has been helpful.
I've created a pull request for the issue. Currently all Vue apps are running
@vue/[email protected]. I fixed the compile-time errors, which were mostly the
deprecated slot syntax, .native modifier removal, and the addition of Mitt to
replace $on eventBus.
The entry files needed to be modified to use the new createApp api, as the new
Vue api has been deprecated.
Bootstrap-vue need upgraded to 2.23.1 to work with Vue 3. Although
bootstrap-vue seems heavily tied to Vue 2. [https://bootstrap-vue.org/]
The UI is broken in this current configuration.
I think Vue 3 treats component roots differently than Vue 2. If we mount a
component to '#my-div' in Vue-2 the component's inner elements are all
rendered, but '#my-div' does not render ('#my-div' properties are inherited
like data-properties). In Vue 3 '#my-div' does render with the component nested
in it.
Something similar happens with components rendered using <slot> tags. In Vue 2
the root element within the component is the first DOM element rendered in the
browser. In Vue 3 though, the DOM element rendered is the component tag (
<application-card /> for example ) then the rest of the component's inner html
elements are rendered.
Basically, in Vue 3, every component is nested one tag down when rendered. This
could be a cause of some issues.
> Upgrade Django Portal frontend to use Vue 3
> -------------------------------------------
>
> Key: AIRAVATA-3699
> URL: https://issues.apache.org/jira/browse/AIRAVATA-3699
> Project: Airavata
> Issue Type: Improvement
> Components: Django Portal
> Reporter: Marcus Christie
> Priority: Major
>
> The Django Portal Vue.js code currently uses Vue 2.6. Vue 2 is reaching it's
> end-of-life (EOL) on Dec 31, 2023 (https://v2.vuejs.org/lts/). It would be
> good to upgrade to Vue 3 before that happens.
> Vue 3 Migration Guide:
> https://v3-migration.vuejs.org/
--
This message was sent by Atlassian Jira
(v8.20.10#820010)
