some bare minimum to get vue3 boot (no UI yet)

.babelrc

@@ -1,5 +1,5 @@
 {
   "presets": ["@babel/preset-env"],
-  "plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-transform-vue-jsx"],
+  "plugins": ["@babel/plugin-transform-runtime", "lodash", "@vue/babel-plugin-jsx"],
   "comments": false
 }

build/webpack.base.conf.js

@@ -3,6 +3,7 @@ var config = require('../config')
 var utils = require('./utils')
 var projectRoot = path.resolve(__dirname, '../')
 var ServiceWorkerWebpackPlugin = require('serviceworker-webpack-plugin')
+var { VueLoaderPlugin } = require('vue-loader')
 
 var env = process.env.NODE_ENV
 // check env & config/index.js to decide weither to enable CSS Sourcemaps for the
@@ -28,12 +29,12 @@ module.exports = {
     }
   },
   resolve: {
-    extensions: ['.js', '.vue'],
+    extensions: ['.js', '.vue', '.jsx'],
     modules: [
       path.join(__dirname, '../node_modules')
     ],
     alias: {
-      'vue$': 'vue/dist/vue.runtime.common',
+      vue: "@vue/runtime-dom",
       'static': path.resolve(__dirname, '../static'),
       'src': path.resolve(__dirname, '../src'),
       'assets': path.resolve(__dirname, '../src/assets'),
@@ -93,6 +94,7 @@ module.exports = {
     new ServiceWorkerWebpackPlugin({
       entry: path.join(__dirname, '..', 'src/sw.js'),
       filename: 'sw-pleroma.js'
-    })
+    }),
+    new VueLoaderPlugin()
   ]
 }

package.json

@@ -17,11 +17,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.7.6",
-    "@chenfengyuan/vue-qrcode": "^1.0.0",
+    "@chenfengyuan/vue-qrcode": "^2.0.0-beta",
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
     "@fortawesome/free-regular-svg-icons": "^5.15.1",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
-    "@fortawesome/vue-fontawesome": "^2.0.0",
+    "@fortawesome/vue-fontawesome": "^3.0.0-3",
+    "@vue/compiler-sfc": "^3.0.7",
     "body-scroll-lock": "^2.6.4",
     "chromatism": "^3.0.0",
     "cropperjs": "^1.4.3",
@@ -30,15 +31,14 @@
     "localforage": "^1.5.0",
     "parse-link-header": "^1.0.1",
     "phoenix": "^1.3.0",
-    "portal-vue": "^2.1.4",
     "punycode.js": "^2.1.0",
+    "qrcode": "^1.4.4",
     "v-click-outside": "^2.1.1",
-    "vue": "^2.6.11",
-    "vue-i18n": "^7.3.2",
-    "vue-router": "^3.0.1",
-    "vue-template-compiler": "^2.6.11",
-    "vuelidate": "^0.7.4",
-    "vuex": "^3.0.1"
+    "vue": "^3.0.7",
+    "vue-i18n": "^9.0.0-beta.18",
+    "vue-router": "^4.0.5",
+    "vuelidate": "^0.7.6",
+    "vuex": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.7.5",
@@ -47,8 +47,9 @@
     "@babel/register": "^7.7.4",
     "@ungap/event-target": "^0.1.0",
     "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+    "@vue/babel-plugin-jsx": "^1.0.3",
     "@vue/babel-plugin-transform-vue-jsx": "^1.1.2",
-    "@vue/test-utils": "^1.0.0-beta.26",
+    "@vue/test-utils": "^2.0.0-beta.8",
     "autoprefixer": "^6.4.0",
     "babel-eslint": "^7.0.0",
     "babel-loader": "^8.0.6",
@@ -109,7 +110,7 @@
     "stylelint-config-standard": "^20.0.0",
     "stylelint-rscss": "^0.4.0",
     "url-loader": "^1.1.2",
-    "vue-loader": "^14.0.0",
+    "vue-loader": "^16.1.2",
     "vue-style-loader": "^4.0.0",
     "webpack": "^4.0.0",
     "webpack-dev-middleware": "^3.6.0",

src/App.js

@@ -46,7 +46,7 @@ export default {
     this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
     window.addEventListener('resize', this.updateMobileState)
   },
-  destroyed () {
+  unmounted () {
     window.removeEventListener('resize', this.updateMobileState)
   },
   computed: {

src/boot/after_store.js

@@ -1,7 +1,13 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import routes from './routes'
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+import VueClickOutside from 'v-click-outside'
+
+import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+
 import App from '../App.vue'
+import routes from './routes'
+import VBodyScrollLock from 'src/directives/body_scroll_lock'
+
 import { windowWidth } from '../services/window_utils/window_utils'
 import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
@@ -366,25 +372,32 @@ const afterStoreSetup = async ({ store, i18n }) => {
   getTOS({ store })
   getStickers({ store })
 
-  const router = new VueRouter({
-    mode: 'history',
+  const router = createRouter({
+    history: createWebHistory(),
     routes: routes(store),
     scrollBehavior: (to, _from, savedPosition) => {
       if (to.matched.some(m => m.meta.dontScroll)) {
         return false
       }
-      return savedPosition || { x: 0, y: 0 }
+      return savedPosition || { left: 0, top: 0 }
     }
   })
 
-  /* eslint-disable no-new */
-  return new Vue({
-    router,
-    store,
-    i18n,
-    el: '#app',
-    render: h => h(App)
-  })
+  const app = createApp(App)
+
+  app.use(router)
+  app.use(store)
+  app.use(i18n)
+
+  app.use(VueClickOutside)
+  app.use(VBodyScrollLock)
+
+  app.component('FAIcon', FontAwesomeIcon)
+  app.component('FALayers', FontAwesomeLayers)
+
+  app.mount('#app')
+
+  return app
 }
 
 export default afterStoreSetup

src/main.js

@@ -1,6 +1,4 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import Vuex from 'vuex'
+import { createStore } from 'vuex'
 
 import 'custom-event-polyfill'
 import './lib/event_target_polyfill.js'
@@ -21,34 +19,18 @@ import pollsModule from './modules/polls.js'
 import postStatusModule from './modules/postStatus.js'
 import chatsModule from './modules/chats.js'
 
-import VueI18n from 'vue-i18n'
+import { createI18n } from 'vue-i18n'
 
 import createPersistedState from './lib/persisted_state.js'
 import pushNotifications from './lib/push_notifications_plugin.js'
 
 import messages from './i18n/messages.js'
 
-import VueClickOutside from 'v-click-outside'
-import PortalVue from 'portal-vue'
-import VBodyScrollLock from './directives/body_scroll_lock'
-
-import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
-
 import afterStoreSetup from './boot/after_store.js'
 
 const currentLocale = (window.navigator.language || 'en').split('-')[0]
 
-Vue.use(Vuex)
-Vue.use(VueRouter)
-Vue.use(VueI18n)
-Vue.use(VueClickOutside)
-Vue.use(PortalVue)
-Vue.use(VBodyScrollLock)
-
-Vue.component('FAIcon', FontAwesomeIcon)
-Vue.component('FALayers', FontAwesomeLayers)
-
-const i18n = new VueI18n({
+const i18n = createI18n({
   // By default, use the browser locale, we will update it if neccessary
   locale: 'en',
   fallbackLocale: 'en',
@@ -75,7 +57,7 @@ const persistedStateOptions = {
     console.error(e)
     storageError = true
   }
-  const store = new Vuex.Store({
+  const store = createStore({
     modules: {
       i18n: {
         getters: {