JSFiddle - React, Tailwind, and code Playground

by youssef moudine

HTML

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

<div id="app">
  <router-link to="/user">Click me !</router-link>
  <router-view></router-view>
</div>

Babel + JSX

const User = {
	props: {
		url: {
			type: String,
			required: true
		},
		list: {
			type: Array,
			required: true
		},
		handler: {
			type: String,
			required: true
		}
	},
  template: `
    <div>
      <h2>{{url}} {{list}} {{handler}}</h2>
    </div>
  `
}

const UserHome = { template: '<div>Home</div>' }
const UserProfile = { template: '<div>Profile</div>' }
const UserPosts = { template: '<div>Posts</div>' }

const router = new VueRouter({
  routes: [
    {
			path: '/user', 
			component: User,
			props: {
				url: 'http://localhost:3000/list-example',
				list: [],
				handler: 'foo'
			},
    }
  ]
})

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