Introducing: Vue route timeline

Why are we building a timeline, i heard about a timeline feature on the internet and got excited. That project did’t come together so i wanted to make something using Vue.js, vuex and vue-router.

Whats up

Ever been on a website or admin page and just went and edit some pages, got on and thought you wanted to edit a previous page. And you forgot where you were, or just are plain lazy as you should. Lets make the app help you with that.

If you have a Vue project, using vue router and have a vuex store, you can. Letch check it out.

Installation

npm install vue-route-timeline

Just add the plugin using npm and, lets add it to your application.

import Vue from 'vue'; // Load vue
import timeline from 'vue-route-timeline'; // Import timeline
import App from './App'; // Load your app
import router from './router'; // Add your router
import store from './store'; // Build your vuex store
Vue.use(timeline.plugin, {store, router}); // Connect timeline to vue, store and router
new Vue({
el: '#app',
router,
store,
render: h => h(App),
});

Note the line in the middle ‘Vue.use(time…’. This connects the timeline to your Vue app.

Log routes

Next you have to log your routes in your app. I am not planning on auto logging, because you can and will miss out on labels and you won’t need to log everything. But you want to log your routes in your app.

A simple way is to log your route in a view. Add this in your .vue view.

<script>
export default {
name: 'hello',
mounted() {
this.$routeTimeline.set('Hello', 'We clicked on hello');
},
};
</script>

This logs the route you are on, along with a title and subtitle. You can also set a route in the timeline when you want. Have an app with messages, and just want to add a route on a specific message. Add it when you have that message.

...
this.$routeTimeline.set(message.title, message.description);
...

Add it wherever you like, it will log what you want.

The timeline

Cool, we logged a timeline. Where can we check it out. In the plugin we have registered a custom tag, so we just have to add that tag somewhere in your app.

<route-timeline></route-timeline>

The result is a timeline. Show on the image here. You can click on any of the items, and you will go back to that item.

Now your app is even easier to navigate!

Need more

This is just a simple introduction, you can also change the styles or just do what you want. You can check it out here.

https://disjfa.github.io/vue-route-timeline
https://github.com/disjfa/vue-route-timeline
http://npmjs.com/vue-route-timeline

And the Photo is by Nadine Shaabana on Unsplash

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.