I’m testing to rebuild one of my Kirby sites with Vue to do some filtering. I’m new to Vue but I’ve successfully set up a Vue route.
This is how the footer.php looks like:
<script src="https://unpkg.com/vue@2.5.2/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<div id="app">
<router-view></router-view>
</div>
<script>
var Home = { template: "<div>Home</div>"}
var About = { template: "<div>About</div>"}
var routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];
var router = new VueRouter({
routes: routes,
base: '/subfolder',
mode: 'history'
});
var app = new Vue({
el: '#app',
router: router
})
</script>
</body>
</html>
So if you get want to try out Vue, this can be a good start, maybe.
Updates
I did some updates in the script above and added mode and base.
You can also use a route to always point at the home page, which can be useful to not end up with 404 errors.
c::set('routes', array(
array(
'pattern' => '(.+)',
'action' => function() {
return site()->visit('/');
}
)
));
A nice tutorial on Youtube (44 parts).
