Vue Timeline

One easy-to-use component to build beautiful responsive timelines.

Get notified for new packages and updates

Preview

Here is the kind of responsive timeline you can get in a few seconds. 🎉

6 years ago

announcement6 years ago

v2.6.0 - Macross

Yesterday we just celebrated the 5th Vueniversary — today we are excited to announce the release of Vue 2.6 “Macross”!

In the past year, we spent a lot of time working on the new CLI and prototyping for 3.0. As a result, Vue core 2.x hasn’t received major updates in quite a while. It’s about time! This release combines a number of substantial improvements, internal changes and new features which are highlighted in this post. For full details, make sure to also check out the full release note on GitHub.

More about the release: Macross.

7 years ago

announcement7 years ago

v2.5.0 - Level E

We have changed the implementation of Vue.nextTick to fix a few bugs (related to #6566, #6690). The change involves using a macro task instead of a micro task to defer DOM updates when inside a DOM event handler attached via v-on. This means any Vue updates triggered by state changes inside v-on handlers will be now deferred using a macro task. This may lead to changes in behavior when dealing with native DOM events.

More about the release: Level E.

7 years ago

announcement7 years ago

v2.4.0 - Kill la Kill

Full SSR + async component support in core: SSR now supports rendering async components used anywhere and the client also supports async components during the hydration phase. This means async components / code-splitting now just works during SSR and is no longer limited at the route level.

More about the release: Kill La Kill.

8 years ago

announcement8 years ago

v2.3.0 - JoJo's Bizarre Adventure

We have created a brand-new standalone guide for server-side rendering in Vue, it's a recommended read for all users. Also, the HackerNews demo has been updated to reflect the latest best practices.

More about the release: JoJo's Bizarre Adventure.

8 years ago

announcement8 years ago

v2.2.0 - Initial D

This release contains 31 pull requests from 22 different contributors - thank you!

More about the release: Initial D.

8 years ago

announcement8 years ago

v2.1.0 - Hunter X Hunter

This is a pretty long release note - see a version with linkable TOC here.

More about the release: Hunter X Hunter.

8 years ago

announcement8 years ago

v2.0.0 - Ghost in the Shell

Today I am thrilled to announce the official release of Vue.js 2.0: Ghost in the Shell. After 8 alphas, 8 betas and 8 rcs (a total coincidence!), Vue.js 2.0 is ready for production! The official guide has been fully updated and is available at vuejs.org/guide.

Ever since the work on 2.0 started back in April, the core team has made significant contributions to API design, bug fixes, documentation and TypeScript typings (yes, vue core, vue-router and vuex 2.0 all have TypeScript typings shipped in the npm packages), and the community also provided extremely valuable feedback on API changes — a big thank you to everyone involved!

More about the release: Ghost in the Shell.

Installation

Install it on Vue, Nuxt or use the CDN link! 👻

npm install @growthbunker/vuetimeline

# Or if you prefer to use yarn
yarn add @growthbunker/vuetimeline

Vue.js

In your main.js file:

// src/main.js

import Vue from "vue";
import VueTimeline from "@growthbunker/vuetimeline";

Vue.use(VueTimeline);

Nuxt.js

Create a plugin for Vue Timeline and load the library like in a regular Vue application:

// plugins/vuetimeline.js

import Vue from "vue";
import VueTimeline from "@growthbunker/vuetimeline";

Vue.use(VueTimeline);

Load this plugin in your nuxt configuration file.

// nuxt.config.js

module.exports = {
  plugins: [
    { src: "@/plugins/vuetimeline.js" }
  ]
}

CDN

Get the latest version from jsdelivr, and import the JavaScript file in your page.

<script src="https://cdn.jsdelivr.net/npm/vue@2.5/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@growthbunker/vuetimeline@latest/dist/vuetimeline.min.js"></script>

We recommend our users to lock Vue Timeline's version when using a CDN. Requesting the latest version (as opposed to "latest major" or "latest minor") is dangerous because major versions usually come with breaking changes. Only do this if you really know what you are doing.

Package Options

Some options you can set to customize the component. 📦

import VueTimeline from "@growthbunker/vuetimeline";

Vue.use(VueTimeline, {
  // Specify the theme to use: dark or light (dark by default).
  theme: "dark",
});

How to install or update the font-family for all components?

<!-- We are using the Heebo font -->
<!-- Copy this code into the <head> of your HTML document. -->
<link href="https://fonts.googleapis.com/css?family=Heebo:100,300,400,500,700,800,900" rel="stylesheet">

<!--  To update with your own font -->
<style>
[class^="gb-"]:not(.gb-base-icon) {
  font-family: Arial, Helvetica, sans-serif !important;
}
</style>

Documentation

All you need to know about the props and events. 🧠

<!-- Insert this component in your code -->
<!-- Customize it with props (see table below) -->
<vue-timeline-update></vue-timeline-update>

Prop Name	Type	Details
animation	BooleanDefault: true	Enable/disable the animation on scroll.
animation-container	StringDefault: null	Used as the viewport, when determining element visibility. This is the element that ScrollReveal binds event listeners to.
animation-duration	NumberDefault: 1500	Controls how long animations take to complete.
category	StringDefault: null	Set the category to display in the badge.
color	StringDefault: "blue"	Set the color of the component."black" \| "blue" \| "green" \| "orange" \| "purple" \| "red" \| "turquoise" \| "white"
date	DateRequired: true	Set the date of the update.
description	StringDefault: null	Set the description of the update.
icon	StringRequired: true	Set the icon to display in the bullet (see material icons).
is-last	BooleanDefault: false	Display a different style for the last update.
thumbnail	StringDefault: null	Set the thumbnail of the update.
theme	StringDefault: null	Override the theme to use for this component."dark" \| "light"
title	StringRequired: true	Set the title of the update.

Event Name	Parameters	Details
click	event	Fires when someone clicks inside the content.
click:thumbnail	event	Fires when someone clicks on the thumbnail inside the content.
click:title	event	Fires when someone clicks on the title inside the content.

Example

Once the plugin is installed, you can use the component like this. 🤓

<template>
  <!-- Latest update -->
  <vue-timeline-update
    :date="new Date('2017-02-26')"
    title="v2.2.0 - Initial D"
    description="Today I am thrilled to announce the release of Vue.js 2.2.0."
    thumbnail="/images/vuetimeline/initial_d.jpg"
    category="announcement"
    icon="code"
    color="red"
  />

  <!-- Another update -->
  <vue-timeline-update
    :date="new Date('2016-11-22')"
    title="v2.1.0 - Hunter X Hunter"
    description="Today I am thrilled to announce the release of Vue.js 2.1.0."
    thumbnail="/images/vuetimeline/hunter_x_hunter.jpg"
    category="announcement"
    icon="code"
    color="turquoise"
  />

  <!-- Yet another update -->
  <vue-timeline-update
    :date="new Date('2016-09-30')"
    title="v2.0.0 - Ghost in the Shell"
    description="Today I am thrilled to announce the release of Vue.js 2.0.0"
    thumbnail="/images/vuetimeline/ghost_in_the_shell.jpg"
    category="announcement"
    icon="code"
    color="white"
    is-last
  />
</template>