diff --git a/package.json b/package.json
index f2f2f6b365b35ba23bfb4e39f598cfb5cdf2e253..83c74f94c26b1a766cc33a7132b8f618527df472 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,8 @@
     "i18n-extract": "scripts/i18n-extract.sh"
   },
   "dependencies": {
+    "@jshmrtn/vue3-gettext": "^1.0.4",
+    "@vue/compat": "^3.1.0",
     "axios": "^0.18.0",
     "core-js": "^3.6.5",
     "fork-awesome": "^1.1.7",
@@ -19,8 +21,6 @@
     "typeface-montserrat": "^0.0.54",
     "typeface-noto-sans": "^0.0.72",
     "vue": "^3.1.0",
-    "@vue/compat": "^3.1.0",
-    "vue-gettext": "^2.1.2",
     "vue-head": "^2.1.1",
     "vue-router": "^3.0.1"
   },
@@ -29,6 +29,7 @@
     "@vue/cli-plugin-eslint": "~4.5.13",
     "@vue/cli-plugin-pwa": "~4.5.13",
     "@vue/cli-service": "~4.5.13",
+    "@vue/compiler-sfc": "^3.1.0",
     "@vue/eslint-config-prettier": "^6.0.0",
     "babel-eslint": "^10.1.0",
     "easygettext": "^2.7.0",
@@ -40,8 +41,7 @@
     "prettier": "^2.2.1",
     "purecss": "^1.0.0",
     "raw-loader": "^3.1.0",
-    "sass-loader": "^10.1.1",
-    "@vue/compiler-sfc": "^3.1.0"
+    "sass-loader": "^10.1.1"
   },
   "eslintConfig": {
     "root": true,
diff --git a/src/PageMixin.vue b/src/PageMixin.vue
index 41202950883f96de8537bdf1502dcb84feae67f5..a3a6aa02be09609b01403765a77b16f64e26046e 100644
--- a/src/PageMixin.vue
+++ b/src/PageMixin.vue
@@ -1,5 +1,4 @@
 <script>
-import Vue from "vue";
 import locales from "./locales";
 
 export default {
@@ -88,7 +87,7 @@ export default {
       let self = this;
       import(`./translations/${newValue}.json`)
         .then(response => {
-          Vue.$translations[newValue] = response.default[newValue];
+          this.$translations[newValue] = response.default[newValue];
         })
         .finally(() => {
           // set current language twice, otherwise we seem to have a cache somewhere
diff --git a/src/main.js b/src/main.js
index 9c443d3b6d029667a81a3e8ebc44390927d8ccce..31faffccea02534659c6ae05cf81050461599788 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,16 +1,40 @@
-import Vue from "vue";
+import { createApp } from "vue";
 import App from "./App.vue";
 import VueHead from "vue-head";
-import "./setup";
-Vue.use(VueHead, {
-  separator: "-",
-  complement: "Funkwhale"
-});
 import router from "./router";
+import locales from "@/locales";
+import { createGettext } from "@jshmrtn/vue3-gettext";
+
+require("fork-awesome/css/fork-awesome.min.css");
+
+let availableLanguages = (function() {
+  let l = {};
+  locales.locales.forEach(c => {
+    l[c.code] = c.label;
+  });
+  return l;
+})();
+let defaultLanguage = "en_US";
+
+const gettext = createGettext({
+  availableLanguages: availableLanguages,
+  defaultLanguage: defaultLanguage,
+  translations: {},
+  silent: true,
+  setGlobalProperties: true
+});
+
+const mainApp = createApp(App)
+  .use(router)
+  .use(gettext)
+  .use(VueHead, {
+    separator: "-",
+    complement: "Funkwhale"
+  });
+
+// This is a workaround since vue3-gettext does not expose $translations
+// as a global property. We should check to see if there's a better way.
 
-Vue.config.productionTip = false;
+mainApp.config.globalProperties.$translations = gettext.translations;
 
-new Vue({
-  router,
-  render: h => h(App)
-}).$mount("#app");
+mainApp.mount("#app");
diff --git a/src/setup.js b/src/setup.js
deleted file mode 100644
index 057f87251e674be5098b22d279f5b93b97abe12e..0000000000000000000000000000000000000000
--- a/src/setup.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import Vue from "vue";
-require("fork-awesome/css/fork-awesome.min.css");
-
-import GetTextPlugin from "vue-gettext";
-
-import locales from "@/locales";
-
-let availableLanguages = (function() {
-  let l = {};
-  locales.locales.forEach(c => {
-    l[c.code] = c.label;
-  });
-  return l;
-})();
-let defaultLanguage = "en_US";
-Vue.use(GetTextPlugin, {
-  availableLanguages: availableLanguages,
-  defaultLanguage: defaultLanguage,
-  languageVmMixin: {
-    computed: {
-      currentKebabCase: function() {
-        return this.current.toLowerCase().replace("_", "-");
-      }
-    }
-  },
-  translations: {},
-  silent: true
-});
-
-Vue.config.productionTip = false;
-
-export default {};
diff --git a/yarn.lock b/yarn.lock
index 8184f3e104b5df3d970121b4a1b1f9a6ef1079fd..b6862863323054a4ccdc76f3a19078e5dba651de 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -944,6 +944,11 @@
     cssnano-preset-default "^4.0.0"
     postcss "^7.0.0"
 
+"@jshmrtn/vue3-gettext@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@jshmrtn/vue3-gettext/-/vue3-gettext-1.0.4.tgz#a33faa87c9149013927aa6996540de95265443c5"
+  integrity sha512-FX2BcSnvutGpDG49NCIVuwIZ70x8sc9ARA1OPVrv8fOBk/IpgCTGzI9UihgAs0Ift3nDkAOM8k8MyI4SHIiG6g==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -9416,11 +9421,6 @@ vue-eslint-parser@^7.0.0:
     lodash "^4.17.21"
     semver "^6.3.0"
 
-vue-gettext@^2.1.2:
-  version "2.1.12"
-  resolved "https://registry.yarnpkg.com/vue-gettext/-/vue-gettext-2.1.12.tgz#444d3220149b17fa4c7caeded3f12d439b698f33"
-  integrity sha512-7Kw36xtKvARp8ZafQGPK9WR6EM+dhFUikR5f0+etSkiHuvUM3yf1HsRDLYoLLdJ0AMaXxKwgekumzvCk6KX8rA==
-
 vue-head@^2.1.1:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/vue-head/-/vue-head-2.2.0.tgz#9e3a141d5a011599a3f6d7adb42a65c428cf73e1"