{"id":22691011,"url":"https://github.com/horberlan/v-timeline-component","last_synced_at":"2025-09-10T23:46:52.695Z","repository":{"id":259984682,"uuid":"879935389","full_name":"horberlan/v-timeline-component","owner":"horberlan","description":"Customizable timeline component for Vue.js","archived":false,"fork":false,"pushed_at":"2024-11-16T21:31:58.000Z","size":175,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T22:53:58.271Z","etag":null,"topics":["timeline-component","vue3-typescript","vuejs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/v-timeline-component","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/horberlan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-28T20:12:22.000Z","updated_at":"2024-11-16T21:32:01.000Z","dependencies_parsed_at":"2024-10-28T23:28:24.295Z","dependency_job_id":"40073e13-d0cd-47a5-8afb-95b88b808dcf","html_url":"https://github.com/horberlan/v-timeline-component","commit_stats":null,"previous_names":["horberlan/v-timeline-component"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/horberlan%2Fv-timeline-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/horberlan%2Fv-timeline-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/horberlan%2Fv-timeline-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/horberlan%2Fv-timeline-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/horberlan","download_url":"https://codeload.github.com/horberlan/v-timeline-component/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248643045,"owners_count":21138353,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["timeline-component","vue3-typescript","vuejs"],"created_at":"2024-12-10T01:09:10.538Z","updated_at":"2025-09-10T23:46:52.688Z","avatar_url":"https://github.com/horberlan.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# v-timeline-component\n\n### Customizable Timeline Component for Vue\n\nThe `v-timeline-component` is a Vue.js component that utilizes slots to display events in a timeline format. It supports both vertical and horizontal layouts, allowing for customization of event presentation, styling, and content. You can also view it at [showcase](https://horberlan.netlify.app/projects/v-timeline-component).\n\n## Features\n\n- **Layout Customization**: Choose between vertical and horizontal layouts to suit your application's needs.\n- **Event Customization**: Provide your own events with title, date, and description.\n- **Custom Content Support**: Utilize slots to insert custom content for each event.\n- **Styling Customization**: Adjust the color, marker size, and line width to match your desired aesthetic.\n\n## Installation\n\nTo use the `v-timeline-component`, install it via npm:\n\n```bash\nnpm install v-timeline-component\n```\n\n### Basic Example (Vertical Layout)\n\n```vue\n\u003ctemplate\u003e\n  \u003cvTimelineComponent\n    layout=\"vertical\"\n    :events=\"timelineEvents\"\n    line-width=\"1px\"\n  \u003e\n    \u003ctemplate #default=\"{ event }: { event: TimelineEvent, index: number }\"\u003e\n      \u003cp\u003e{{ event.title }}\u003c/p\u003e\n      \u003cp\u003e{{ event.description }}\u003c/p\u003e\n      \u003cp\u003e{{ event.date }}\u003c/p\u003e\n    \u003c/template\u003e\n  \u003c/vTimelineComponent\u003e\n\u003c/template\u003e\n\u003cscript setup lang=\"ts\"\u003e\ninterface TimelineEvent {\n  title: string;\n  date: string;\n  description: string;\n  child?: TimelineEvent[];\n}\nconst timelineEvents: Ref\u003cTimelineEvent[]\u003e = ref([\n  {\n    title: \"Event 1 Title\",\n    date: \"2023-02-15\",\n    description: \"Description for the first event. This can be any text.\",\n    child: [\n      {\n        title: \"child Lorem ipsum dolor sit amet 1\",\n        date: \"2023-02-16\",\n        description:\n          \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.\",\n      },\n      {\n        title: \"child Lorem ipsum dolor sit amet 2\",\n        date: \"2023-02-17\",\n        description:\n          \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet nulla auctor, vestibulum magna sed, convallis ex.\",\n      },\n    ],\n  },\n  {\n    title: \"Event 2 Title\",\n    date: \"2023-03-01\",\n    description: \"This is the second event on our timeline.\",\n  },\n  {\n    title: \"Event 3 Title\",\n    date: \"2023-04-20\",\n    description:\n      \"Aperiam animi ut. Odit ullam eaque. Iusto laboriosam non nulla nisi soluta nobis est dolor ea\",\n  },\n]);\n\u003c/script\u003e\n```\n\n### Example (Horizontal Layout)\n\n```vue\n\u003cvTimelineComponent\n    layout=\"horizontal\"\n    :events=\"timelineEvents\"\n    line-width=\"1px\"\n  \u003e\n    \u003ctemplate #default=\"{ event }: { event: TimelineEvent, index: number }\"\u003e\n      \u003cp\u003e{{ event.title }}\u003c/p\u003e\n      \u003cp\u003e{{ event.description }}\u003c/p\u003e\n      \u003cp\u003e{{ event.date }}\u003c/p\u003e\n      \u003cvTimelineComponent\n        v-if=\"event.child\"\n        layout=\"vertical\"\n        :events=\"event.child\"\n        line-width=\"2px\"\n      \u003e\n        \u003ctemplate #default=\"{ event }: { event: TimelineEvent, index: number }\"\u003e\n          \u003cp\u003e{{ event.title }}\u003c/p\u003e\n          \u003cp\u003e{{ event.description }}\u003c/p\u003e\n          \u003cp\u003e{{ event.date }}\u003c/p\u003e\n        \u003c/template\u003e\n      \u003c/vTimelineComponent\u003e\n    \u003c/template\u003e\n  \u003c/vTimelineComponent\u003e\n```\n\n## Available Props\n\n| **Property**   | **Type**        | **Default**  | **Description**                               |\n| :------------- | :-------------- | :----------- | :-------------------------------------------- |\n| **color**      | `String`        | `#ddd`       | Timeline line and marker color.               |\n| **markerSize** | `String`        | `0.75rem`    | Size of event markers.                        |\n| **lineWidth**  | `String`        | `2px`        | Width of the timeline line.                   |\n| **layout**     | `String`        | `vertical`   | Timeline layout (`vertical` or `horizontal`). |\n| **events**     | `Array\u003cObject\u003e` | **Required** | Array of event objects.                       |\n\n## Slots\n\n### Default Slot\n\nThe default slot allows for custom content within each event on the timeline. It provides the `event` and `index` of the event.\n\n```vue\n\u003ctemplate #default=\"{ event, index }\"\u003e\n  \u003c!-- Custom content for each event --\u003e\n\u003c/template\u003e\n```\n\n### Marker Slot\n\nThe `#marker` slot allows for custom markers for each timeline event. Use it to customize the appearance of markers with custom elements or emojis.\n\n```vue\n\u003ctemplate #marker\u003e💜\u003c/template\u003e\n```\nOr dynamically with event data:\n```vue\n\n\u003ctemplate #marker=\"{ event }\"\u003e {{ event.marker }} \u003c/template\u003e\n```\n\t\t\n👉 [example](src/App.vue)\n\n## Contributing\n\nIf you would like to contribute to this project, feel free to fork the repository and submit a pull request. Contributions are welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhorberlan%2Fv-timeline-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhorberlan%2Fv-timeline-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhorberlan%2Fv-timeline-component/lists"}