JSFiddle - React, Tailwind, and code Playground

by simati

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-i18n.min.js"></script>

<div id="app">
  <router-view></router-view>
</div>

Babel + JSX

const locales = {
  en: {
    app: "Multilingual app",
    home: {
      title: "This is the home page",
      link: "click here to see the home page"
    },
    about: {
      title: "This is the 'about' page",
      link: "click here to see the 'about' page"
    },
  },
  fr: {
    app: "Application multilingue",
    home: {
      title: "Ceci est la page d'accueil",
      link: "cliquer ici pour voir la page d'accueil"
    },
    about: {
      title: "Ceci est la page 'à propos'",
      link: "cliquer ici pour voir la page 'à propos'"
    },
  }
}

Object.keys(locales).forEach(function (lang) {
  Vue.locale(lang, locales[lang])
})

const Home = {
	template: `
    <div>
      {{$t('home.title')}}
      <p><router-link :to="{name: 'about'}">{{$t('about.link')}}</router-link></p>
    </div>`
}

const About = { 
  template: `
    <div>
      {{$t('about.title')}}
      <p><router-link :to="{name: 'home'}">{{$t('home.link')}}</router-link></p>
    </div>`
}

const Layout = { 
  methods: {
    setLanguage: function (lang) {
      Vue.config.lang = lang
  	  mountLanguage(lang)
    },
    getUrl: function () {
    	return document.URL
  	}
  },
  template: `
  <div>
    <pre>{{getUrl()}}</pre>
    <p>
      <button @click="setLanguage('en')">en</button>
      <button @click="setLanguage('fr')">fr</button>
    </p>
    <router-view></router-view>
  </div>`
}


const i18nRoutes = {
  en:
    [
      { path: '', component: Home, name: 'home' },
      { path: 'about', component: About, name: 'about' }
    ],
  fr: 
    [
      { path: '', component: Home, name: 'home' },
      { path: 'a-propos', component: About, name: 'about' }
    ]
}

const router = new VueRouter({})

// default language
Vue.config.lang = 'en'
router.addRoutes([{path: '/', component: {created: router.push('/en')}}])

function mountLanguage (lang) {
  // router.addRoutes([
  //   {path: '/' + lang, component: Layout, children: i18nRoutes[lang]}
  //  ], true)
  router.addRoutes([
    {path: '/' +...