JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>

<body>
  <div id="app"></div>
</body>

</html>

JavaScript

// app.js
// Created at 03/09/2021

var en = {
  addATag: "Add a tag",
  thisIsHome: "This is Home",
  thisIsFoo: "This is Foo",
  thisIsBar: "This is Bar",
  namedRoutes: "Named Routes",
  currentRouteName: "Current route name",
  home: "Home",
  bar: "Bar",
  foo: "Foo",
  youClickedMe: "you clicked me",
  ci: "times",
}

var zh = {
  addATag: "添加一个标签",
  thisIsHome: "这是首页",
  thisIsFoo: "这是Foo页",
  thisIsBar: "这是Bar页",
  namedRoutes: "路由名称",
  currentRouteName: "当前路由名称",
  home: "首页",
  bar: "Bar页",
  foo: "Foo页",
  youClickedMe: "你点击了",
  ci: "次",
}

var mixin = {
  data: function() {
    return {
      i18n: en,
    }
  },
}

const Home = { props: ['i18n'], template: '<div>{{ i18n.thisIsHome }}</div>' }
const Bar = { props: ['i18n'], template: '<div>{{ i18n.thisIsBar }}: {{ $route.params.id }}</div>' }
const Foo = { props: ['i18n'], template: '<div>{{ i18n.thisIsFoo }}</div>' }

const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/bar/:id', name: 'bar', component: Bar },
    { path: '/foo', name: 'foo', component: Foo }
  ]
})

Vue.component('button-counter', {
  inject: ['i18n'],
  data: function () {
    return {
      count: 0,
    }
  },
  template: '<button v-on:click="count++">{{ i18n.youClickedMe }}: {{ count }} {{ i18n.ci }} </button>'
})

Vue.component('text-names', {
  mixins: [mixin],
  data: function () {
    return {
      count: 0,
    }
  },
  template: '<h1>{{ i18n.namedRoutes }}</h1>'
})

new Vue({
  provide: {
    i18n: en,
  },
  mixins: [mixin],
  router,
  template: `<div id="app">
  <text-names />
  <p>{{ i18n.currentRouteName }}: {{ i18n[$route.name] }}({{ $route.name }})</p>
  <button v-on:click="onToggle">T</button>
  <div>
    <router-link to="/">{{ i18n.home }}</router-link>
    <router-link to="/bar/1">{{ i18n.bar }}</router-link>
    <router-link to="/foo">{{ i18n.foo }}</router-link>
  </div>
  <router-view v-bind:i18n="i18n" class="view"></router-view>
 ...