nuxt-timeline-component

• Developed with zero-config as a core principle
• Written in TypeScript, using Vue 3's Composition API
• Styled with WindiCSS, easily customizable for whatever your use case is.
• Automatic step numbers, in pure CSS. Disable with noNumbers prop.
• Supports Markdown out-of-the-box. Disable it with the noMarkdown prop.
• Includes syntax highlighting with highlight.js.

{
  "name": "nuxt-timeline",
  "version": "1.0.0",
  "author": "Nicholas Berlette <nick@berlette.com>",
  "license": "MIT",
  "private": false
}

Inside app.vue (or one of your pages), we need to define an array of Timeline Points to render with the component. It is the only required property.

See the TimelinePoint typedefs below ›››

// <script setup>
const points = [
  {
    title: 'First',
    date: '2022-05-01',
    description: 'We make it.'
  },
  {
    title: 'Then',
    description: '...we break it. So we can fix it.'
  },
  {
    title: 'Finally',
    description: '\`lint\` it, \`commit\` it, and repeat.'
  }
]

Then add it to app.vue, or any page, or component...

See the TimelineProps typedefs below ›››

<template>
  <Timeline :points="points" />
</template>

/**
 * @interface {TimelineProps}
 * @property {TimelinePoint[]} points - Used to construct the timeline. Required.
 * @property {boolean} [noMarkdown] - Disable markdown rendering for all TimelinePoints.
 * @property {boolean} [noNumbers] - Disable the CSS-based step numbers for each TimelinePoint.
 */
declare interface TimelineProps {
  points: TimelinePoint[];
  noMarkdown?: boolean;
  noNumbers?: boolean;
}

declare interface TimelinePoint {
  // title is the only required property
  title: string;
  // adding a URL changes the title into a link
  url?: string;
  // adding a timestamp renders it just above the title
  date?: string;
  // markdown is supported in description
  description?: string;
  // ...or just **dangerously** inject HTML, raw dog
  html?: string;
  // future use (not yet implemented)
  tags?: string[];
}

Check out the GitHub Repository. If you've found a bug or have a feature request, please create an issue and consider submitting a Pull Request!

Contributions are warmly welcomed. Thank you! 😁