Translate custom text

Author: HELMAB

README.md

@@ -68,6 +68,66 @@ Vue.use(loading, {
 })
 ```
 
+### Translate your custom text
+In your `main.js` file
+
+```js
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import loading from 'vuejs-loading-screen'
+
+// your i18n setup
+Vue.use(VueI18n)
+
+const messages = {
+  en: {
+    message: {
+      loading: 'Loading...'
+    }
+  },
+  km: {
+    message: {
+      loading: 'កំពុងដំណើរការ...'
+    }
+  }
+}
+
+const i18n = new VueI18n({
+  locale: 'en', // set locale
+  messages, // set locale messages
+})
+
+// config loading plugins
+Vue.use(loading, {
+  bg: '#41b883ad',
+  slot: `
+    <div class="px-5 py-3 bg-gray-800 rounded">
+      <h3 class="text-3xl text-white"><i class="fas fa-spinner fa-spin"></i> ${ i18n.t('message.loading') }</h3>
+    </div>
+  `,
+})
+
+new Vue({
+    i18n,
+    ...
+}).$mount('#app');
+
+```
+
+To update your custom text, in `App.vue`
+
+```js
+watch: {
+  '$i18n.locale' () {
+    this.$changeIsLoadingOptions({slot: `
+      <div class="px-5 py-3 bg-gray-800 rounded">
+        <h3 class="text-3xl text-white"><i class="fas fa-spinner fa-spin"></i> ${ this.$t('message.loading') }</h3>
+      </div>
+    `})
+  }
+}
+```
+
 ## Configurations
 
 | Option        | Value           | Description  |

dev/i18n.js

@@ -0,0 +1,25 @@
+import Vue from 'vue';
+import VueI18n from 'vue-i18n';
+
+Vue.use(VueI18n)
+
+const messages = {
+    en: {
+        message: {
+            loading: 'Loading...'
+        }
+    },
+    km: {
+        message: {
+            loading: 'កំពុងដំណើរការ...'
+        }
+    }
+}
+
+const i18n = new VueI18n({
+    locale: 'en', // set locale
+    messages, // set locale messages
+})
+
+
+export default i18n

dev/serve.js

@@ -1,19 +1,24 @@
 import Vue from 'vue';
 import Dev from './serve.vue';
-// To register individual components where they are used (serve.vue) instead of using the
-// library as a whole, comment/remove this import and it's corresponding "Vue.use" call
-import VuejsLoadingScreen from '@/entry.esm';
-Vue.use(VuejsLoadingScreen, {
+import i18n from './i18n';
+import IsLoading from '@/entry.esm';
+
+const isLoadingOptions = {
   bg: '#41b883ad',
   slot: `
     <div class="px-5 py-3 bg-gray-800 rounded">
-      <h3 class="text-3xl text-white"><i class="fas fa-spinner fa-spin"></i> Loading...</h3>
+      <h3 class="text-3xl text-white"><i class="fas fa-spinner fa-spin"></i> ${ i18n.t('message.loading') }</h3>
     </div>
-  `
-});
+  `,
+  i18n
+}
+
+Vue.use(IsLoading, isLoadingOptions);
 
 Vue.config.productionTip = false;
+Vue.prototype.isLoadingOptions = isLoadingOptions
 
 new Vue({
+  i18n,
   render: (h) => h(Dev),
 }).$mount('#app');

dev/serve.vue

@@ -13,6 +13,15 @@ export default Vue.extend({
       return new Promise((resolve) => setTimeout(resolve, milliseconds));
     },
   },
+  watch: {
+    '$i18n.locale' () {
+      this.$changeIsLoadingOptions({slot: `
+        <div class="px-5 py-3 bg-gray-800 rounded">
+          <h3 class="text-3xl text-white"><i class="fas fa-spinner fa-spin"></i> ${ this.$t('message.loading') }</h3>
+        </div>
+      `})
+    }
+  }
 });
 </script>
 
@@ -21,12 +30,20 @@ export default Vue.extend({
     <div class="flex justify-center items-center h-screen w-screen">
       <div class="text-center">
         <h3 class="mb-5 text-2xl">Vuejs Loading Screen</h3>
-        <button
-          class="px-4 py-2 bg-blue-800 rounded text-white"
-          @click="showLoading"
-        >
-          Send HTTP Request
-        </button>
+        <div class="space-x-2">
+          <button
+              class="px-4 py-2 bg-blue-800 rounded text-white"
+              @click="showLoading"
+          >
+            Send HTTP Request {{ $t('message.loading') }}
+          </button>
+          <button
+              class="px-4 py-2 bg-blue-800 rounded text-white"
+              @click="() => {$i18n.locale === 'en' ? $i18n.locale = 'km' : $i18n.locale = 'en'}"
+          >
+            Now Locale is: {{ $i18n.locale }}
+          </button>
+        </div>
       </div>
     </div>
   </div>