Switch i18n provider

package.json

@@ -7,9 +7,9 @@
         "vee-validate": "^2.1.0-beta.2",
         "vue": "^2.5.7",
         "vue-axios": "^2.1.1",
+        "vue-i18n": "^8.6.0",
         "vue-router": "^3.0.1",
         "vuex": "^3.0.1",
-        "vuex-i18n": "^1.10.5",
         "vuex-router-sync": "^5.0.0",
         "xterm": "^3.5.1"
     },

resources/assets/scripts/app.ts

@@ -1,39 +1,45 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
-import vuexI18n from 'vuex-i18n';
+import VueI18n from 'vue-i18n';
 import VueRouter from 'vue-router';
 import VeeValidate from 'vee-validate';
+// Helpers
+// @ts-ignore
+import {Ziggy} from './helpers/ziggy';
+// @ts-ignore
+import Locales from './../../../resources/lang/locales';
+
+import {flash} from './mixins/flash';
+import store from './store/index';
+import router from './router';
 
 Vue.config.productionTip = false;
 require('./bootstrap');
 
-// Helpers
+// @ts-ignore
-import { Ziggy } from './helpers/ziggy';
-import Locales from './../../../resources/lang/locales';
-import { flash } from './mixins/flash';
-import store from './store/index';
-import router from './router';
-
 window.events = new Vue();
+// @ts-ignore
 window.Ziggy = Ziggy;
 
 Vue.use(Vuex);
 Vue.use(VueRouter);
-Vue.use(vuexI18n.plugin, store);
 Vue.use(VeeValidate);
+Vue.use(VueI18n);
 
 // $FlowFixMe: this is always going to be unhappy because we ignore the vendor dir.
 const route = require('./../../../vendor/tightenco/ziggy/src/js/route').default;
 
-Vue.mixin({ methods: { route }});
+Vue.mixin({methods: {route}});
 Vue.mixin(flash);
 
-Vue.i18n.add('en', Locales.en);
+const i18n = new VueI18n({
-Vue.i18n.set('en');
+    locale: 'en',
+    messages: {...Locales},
+});
 
 // $FlowFixMe
 if (module.hot) {
     module.hot.accept();
 }
 
-new Vue({ store, router }).$mount('#pterodactyl');
+new Vue({store, router, i18n}).$mount('#pterodactyl');

webpack.config.js

@@ -74,7 +74,7 @@ module.exports = {
         hints: false,
     },
     // Passing an array loads them all but only exports the last.
-    entry: ['./resources/assets/styles/main.css', './resources/assets/scripts/app.js'],
+    entry: ['./resources/assets/styles/main.css', './resources/assets/scripts/app.ts'],
     output: {
         path: path.resolve(__dirname, 'public/assets'),
         filename: 'bundle-[hash].js',

yarn.lock

@@ -7446,6 +7446,10 @@ vue-hot-reload-api@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz#97976142405d13d8efae154749e88c4e358cf926"
 
+vue-i18n@^8.6.0:
+  version "8.6.0"
+  resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-8.6.0.tgz#63848b183cf6f100436bcdd84382416e43b07188"
+
 vue-loader@^14.2.2:
   version "14.2.3"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-14.2.3.tgz#3b39645c322d956e287d8d36eb77475f78c9b8e0"
@@ -7504,10 +7508,6 @@ vueify-insert-css@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/vueify-insert-css/-/vueify-insert-css-1.0.0.tgz#57e5d791907e8c9d87ae6de099a2174bd0a7f990"
 
-vuex-i18n@^1.10.5:
-  version "1.10.5"
-  resolved "https://registry.yarnpkg.com/vuex-i18n/-/vuex-i18n-1.10.5.tgz#635ea2204e0aa3f8fd512f0fab7f6b994d3f666c"
-
 vuex-router-sync@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/vuex-router-sync/-/vuex-router-sync-5.0.0.tgz#1a225c17a1dd9e2f74af0a1b2c62072e9492b305"