From effd030b284d4950ffcdc5bf5b0b054085d7df20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ciar=C3=A1n=20Ainsworth?= <ciaranainsworth@outlook.com>
Date: Wed, 28 Jul 2021 14:40:49 +0100
Subject: [PATCH] Set up vue3-gettext
---
package.json | 8 ++++----
src/PageMixin.vue | 3 +--
src/main.js | 46 +++++++++++++++++++++++++++++++++++-----------
src/setup.js | 32 --------------------------------
yarn.lock | 10 +++++-----
5 files changed, 45 insertions(+), 54 deletions(-)
delete mode 100644 src/setup.js
diff --git a/package.json b/package.json
index f2f2f6b3..83c74f94 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 41202950..a3a6aa02 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 9c443d3b..31faffcc 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 057f8725..00000000
--- 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 8184f3e1..b6862863 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"
--
GitLab