[Vuejs]-Using an external global variable file that is not bundled

by

0👍

✅

Here is how I achieved the desired outcome:

Inside my Index.html I include the following static js file:

<body>
  <div id="app"></div>
  <script src="/static/translation.js"></script>
  <!-- built files will be auto injected -->
</body>

The translation.js file is as follows:

const messages = {
  en: {
    title: {
      test_page: 'Test Page Title',
    },
  },
};

window.messages = messages;

main.js is changed as follows:

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import App from './App';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // set locale
  messages: window.messages, // set locale messages
});

/* eslint-disable no-new */
new Vue({
  i18n,
  el: '#app',
  components: { App },
  template: '<App/>',
});

This allows me to use this globally as so:

<template>
  <div class="test-parent">
    <h1>{{ $t('title.test_page') }}</h1>
  </div>
</template>

And any changes I make to the translation.js file are shown in the production environment.

👤Sisky

Leave a comment