AP-177: Investigate requirements to upgrade to NUXT 3 & Vue 3

[stavares843]

Chris Hogan commented in Jira:

Migration Guide: https://v3.vuejs.org/guide/migration/introduction.html

// Notes
Versions are out of whack, generally we would install the 'next' version of each package if we went to vue3.
eg vue2 uses vue-router 3 and vuex 3 / / / / Vue 3, Vue-Router 4, Vuex 4
Vue3 was a total re-write using typescript, internally, so we might have some typings to rip out

// changes throughout satellite with vue 3
new creation method - createAppp() ?? <- how does nuxt bootstrap the vue app, can't find where we instantiate the vue constructor, it looks like this gets handled behind the scenes in nuxt. Uses same object as 2.x constructor, but 'el' key goes away in favor of chaining a 'mounted(<selector you had in old el key>)' function to the end of constructor
Data has to be method now, no more just object (we have a few spots, not many where this is the case)
Components registered on the constructor variable name instead of vue global object <- would depend on nuxt for this and probably updating our components. We will have to update the few places we use `Vue.component`. All of our third party modules that use Vue.use will need to use the constructor reference instead of the Vue global.
Vue Router (we are using 3.5) has to wrap transitions tags in the vue router tag, might be handled in Nuxt, will need to see how their upgrade path handles this
Vuex createStore instead of store() - I think this is just in the store.ts typings file?

// changes in vuex4
- cant tell if vue3 is incompatible with vuex3, but several places of documentation explicitely say vuex4 is the state managemnet tool for vue3

// changes in vue-router 4
- should be handled by nuxt, verify?

// New things we can use
teleport - (same as portal in react). Basically if you have a deeply nested fragment somwhere, you can add this tag to have it rendered in the body even though it's managed however deeply nested in the project. helps with accessibility
fragments - can have multiple root elements in your template now
compositions api - optional, can replace options api (instead of data, watch, computed, etc, would be a massive change)
emits - just like we can pass in props that a component receives, we can include the emitters // not required, but makes components easier to read/you see up front that something gets emitted

// Nuxt - in Beta still, tool called NuxtBridge to help migrate
benefits - 
- potentially much smaller/faster server bundles
- new lifecycle? component to fetch data before or after navigation
- ability to use vue3's compositions api
- access to devtools for nuxt (not yet)

migration plan -
- Nuxt Bridge allows us to keep our nuxt2 config and keeps legacy plugins working
- once all plugins are supported and we have the ability to re-do config, we can remove nuxt bridge and just use nuxt 3 without the back ported/shimmed new functionality
- https://v3.nuxtjs.org/getting-started/bridge
- Remove nuxt/typescript-build, need to check if we need @nuxtjs/eslint-config-typescript or if there is another eslint helper

-- *** documentation for nuxt3 is basically non existant, but we should be able to use nuxt2 docs with the nuxt bridge

We have a whole host of vue plugins we are using that we need to check out:

"v-calendar": Has a vue3 version!"v-click-outside": No Vue3 Version"v-scroll-lock": No Vue3 Version, appears abandoned"vue-click-outside": No Vue3 Version, appears abandoned"vue-clipboard2": No Vue3 Version"vue-croppie": No Vue3 Version, appears abandoned"vue-custom-scrollbar": "^1.4.1","vue-feather-icons": "^5.1.0","vue-fullscreen": "^2.5.1","vue-jazzicon": "^0.1.3","vue-markdown": "^2.2.4","vue-multiselect": "^2.1.6","vue-plyr": "^7.0.0","vue-slider-component": "^3.2.13","vue-typed-mixins": "^0.2.0","vue2-touch-events": "^3.2.2","vuejs-datepicker": "^1.6.2","vuejs-paginate": "^2.1.0",