JSFiddle - React, Tailwind, and code Playground

by Lien Z

HTML

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">

  <router-link to="/bar">Go to Bar</router-link>

  <dynamic-link></dynamic-link>

  <router-view></router-view>
</div>

CSS

#app {
  width: 100%;
  height: 100px;
}

JavaScript

const Foo = {
  template: '<div>foo</div>'
}
const Bar = {
  template: '<div>bar</div>'
}

Vue.component('dynamic-link', {
  template: `<component v-bind:is="transformed" />`,
  data() {
    return {
      text: '<router-link to="/foo">Go to Foo</router-link>'
    }
  },
  computed: {
    transformed() {
      return {
        template: this.text
      }
    }
  }
});

const routes = [{
  path: '/foo',
  component: Foo
}, {
  path: '/bar',
  component: Bar
}, ]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router
}).$mount('#app');