JSFiddle - React, Tailwind, and code Playground

by disfated

HTML

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

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

JavaScript

const ArticleLink = Vue.component('ArticleLink', {
	props: [ 'id' ],
	template: `<router-link :to="{ name: 'article', params: { id } }"><slot></slot></router-link>`
});

const Home = {
	template: `<ul>
  	<li v-for="id in 5" :key="id">
    	<b>Article {{id}}:</b>
      <article-link :id="id">component</article-link> | 
      <router-link :to="{ name: 'article', params: { id } }">direct</router-link>
    </li>
  </ul>`,
};

const Article = {
	props: [ 'id' ],
	template: `<div>
    <router-link to="/">Home</router-link>
  	<h1>Article {{ id }}</h1>
    <p>Lorem ipsum...</p>
    <hr>
    <nav>
      <router-link :to="{ name: 'article', params: { id: id - 1 } }" v-if="id > 1">« Prev</router-link>
      <router-link :to="{ name: 'article', params: { id: id + 1 } }" v-if="id < 5">Next »</router-link>
    </nav>
  </div>`,
};

const routes = [
	{ name: 'home', path: '/', component: Home },
  { name: 'article', path: '/:id(.+)', props: true, component: Article }
];

const router = new VueRouter({ routes });

new Vue({
	router,
	el: '#app',
  template: `<div>
    <router-view></router-view>
  </div>`
});