JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-router"></script>
<div id="app">
</div>
JavaScript
// Components
const Topnavbar = {
template: `<div id="topnav">
<ul>
<li><router-link to="foo">Foo</router-link></li>
<li><router-link to="bar">Bar</router-link></li>
</ul>
</div>`
}
// Base App
const App = {
template: `<div>
<topnavbar />
<router-view />
</div>`,
components: {
topnavbar: Topnavbar
}
};
// Views
const Foo = {
template: `<div>I am Foo</div>`,
}
const Bar = {
template: `<div>I am Bar</div>`,
}
// Setup router
const routes = [{
path: '/foo',
component: Foo
}, {
path: '/bar',
component: Bar
}]
const router = new VueRouter({
routes
})
new Vue({
render: h => h(App),
router
}).$mount('#app')