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;

Answer 1

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?

1. Clone the Vuetify repo and change this part of the code and build a new dist for your self.
2. Save as the file vuetify.dist.js and change that part of the code
3. 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:

1. Load Vue.js file with scripts tag
2. Use fetch api to download content of vuetify.dist.min.js
3. Replace window.Vue to something else to make sure vuetify won't install itself automatically!
4. 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: `