vue-next-timeline v0.2.1

A simple component to display a timeline in horizontal format with Vue3.

Status

Demo

How to install

npm

npm install vue-next-timeline --save

Quick start

Globally

You can import in your main.js file

import App from './App.vue'
import { createApp } from 'vue'
import VueNextTimeline from 'vue-next-timeline'

const app = createApp(App)
app.component(VueNextTimeline)

Locally in any component

import VueNextTimeline from 'vue-next-timeline'

export default {
  components: {
    VueNextTimeline
  }
};

Basic usage

<template>
  <vue-next-timeline :items="items" />
</template>

<script>
  export default {
    data() {
      const item1 =  {
        title: '2013',
        content: 'The international year of mathematics on planet Earth. The international year of mathematics on planet Earth',
        color: '#2785ab'
      }
      const item2 = {
        title: '2014',
        content: 'International Year of Family Farming',
        color: '#f89714'
      }
      const item3 = {
        title: '2015',
        content: 'International Year of Light and Light-Based Technologies',
        color: '#f65b78'
      }
      const items = [item1, item2, item3]

      return { items }
    }
  };
</script>

Props

Development

Note: Contributions are very welcomed, however is very important to open a new issue using the issue template before you start working on anything, so we can discuss it before hand

Fork the project and enter this commands in your terminal

git clone https://github.com/cristianpoleyJS/vue-next-timeline.git
cd vue-next-timeline
npm install
npm run serve

Commitlint

This project follows the commitlint guidelines, with minor changes.

Contribute 🍺

License

MIT © cristianpoleyJS