Using Vuetify with i18n using CDNs only

Question

I'm working on a Vue project on a static environment with no Node or Vue-cli, We're importing Vue, Vuetify and vue-i18n using CDNs

We need to have the Vuetify components translated using the Vue-i18n like shown here

Here is a codepen of an attempt i've made, trying to translate the pagination part at the bottom.

I've tried using Vue.use() but couldn't get it to work, no errors in the console and no translation on the page.

import App from '../components/App.vue.js';
import i18n from '../lang/languages.js';
import store from './store/store.js';

Vue.filter('toUpperCase', function(value) {
  return value.toUpperCase();
});

Vue.config.devtools = true;

Vue.use(Vuetify, {
  lang: {
    t: (key, ...params) => i18n.t(key, params)
  }
});

new Vue({
  i18n,
  store,
  el: '#app',
  render: (h) => h(App)
});

lang/languages.js:

import { russian } from './languages/russian.js';
import { chineseSimple } from './languages/chinese-simple.js';
import { german } from './languages/german.js';
import { portuguese} from './languages/portuguese.js';

const languages = {
  'ru': russian,
  'zh-Hans': chineseSimple,
  'de': german,
  'pt': portuguese,
};

const i18n = new VueI18n({
  locale: 'en',
  messages: languages
});

export default i18n;

You can check out this example: https://codepen.io/vsco/pen/MrrgbO He got it working, I know it's a very simple example. But I'm sure you get it to work — Thomas Verhoeven, Jun 21 '19 at 11:43

score 1 · Accepted Answer · answered Jun 30 '19 at 07:57

What you are looking for is not available in CDN distributions. You might ask why?

Look at this code:

const Vuetify: VuetifyPlugin = {
  install (Vue: VueConstructor, args?: VuetifyUseOptions): void {
    Vue.use(VuetifyComponent, {
      components,
      directives,
      ...args
    })
  },
  version: __VUETIFY_VERSION__
}

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(Vuetify)
}

Especially this part:

if (typeof window !== 'undefined' && window.Vue) {
  window.Vue.use(Vuetify)
}

It automatically installs the Vuetify without any configurations such as language and etc, so your Vue.use(Vuetify, {..}) won't get called because Vue won't install plugins twice!

What you could do?

Clone the Vuetify repo and change this part of the code and build a new dist for your self.
Save as the file vuetify.dist.js and change that part of the code
Use some hacky tricky workarounds which I don't recommend, but I created a sample for you.

Here is a code pen example, What I actually do:

Load Vue.js file with scripts tag
Use fetch api to download content of vuetify.dist.min.js
Replace window.Vue to something else to make sure vuetify won't install itself automatically!
Eval the changed code

I DON'T RECOMMEND THIS APPROACH AT ALL

fetch("https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.js")
  .then(res => res.text())
  .then(vutify => {
    eval(vutify.replace("window.Vue", "window.Vue2"));

    Vue.use(Vuetify, {
      lang: {
        t: (key, ...params) => i18n.t(key, params)
      }
    });

    const App = Vue.component("app", {
      template: `

I was told that this i being fixed for Vuetify 2.0 Unfortunatly we don't have the time to wait for it and we may need to try your solution... Thanks! — ZimGil, Jul 01 '19 at 09:47
@ZimGil Thanks to them, My solution works, you can try it in the codepen I provided. Don't forget to mark my answer as accepted if it works for you. — Ali Bahrami, Jul 01 '19 at 09:49
I need to find some time for it and I guess only next week I will be able to try it, I will update and of course mark as accepted if it will work :) — ZimGil, Jul 01 '19 at 10:11
As we use a pre-downloaded CDN (out product is not connected to the Internet) - I was able to acieve this by hard changing the CDN code like it would happen in `vutify.replace("window.Vue", "window.Vue2")` and it seems to work... Not ideal but will do for now until 2.0... THANKS! — ZimGil, Jul 01 '19 at 14:25

Using Vuetify with i18n using CDNs only

1 Answers1