Getting Started with Vue Timeline Component

Smart UI Vue examples target Vue 3 and Vite; enable TypeScript in create-vue when you want typed SFCs.

Demo source (Smart UI repo): vue/vue-3/src/timeline/basic/App.vue

Scaffold with Vite (Vue 3)

Run the official scaffolding tool:

npm create vue@latest

You will be prompted for TypeScript, Router, Pinia, and other options. When unsure, accept defaults and enable features later.

cd <your-project-name>
npm install
npm install smart-webcomponents
npm run dev

Vue + TypeScript

If you enabled TypeScript, use vite.config.ts with the same isCustomElement configuration as below so the compiler treats Smart UI tags as native custom elements.

Teach Vue about custom elements

Without this, Vue warns about unknown custom elements. Open vite.config.js or vite.config.ts and configure the Vue plugin so smart-* and legacy jqx-* tags are passed through to the DOM:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag.startsWith('smart-') || tag.startsWith('jqx-')
        }
      }
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

App.vue example

Example from Smart UI Vue 3 demos for this widget:

<template>
  <div class="vue-root">		
    <smart-timeline ref="timeline">
    </smart-timeline>
  </div>
</template>
<style>
/* This is the CSS used in the demo */

/* fallback */
@font-face {
	font-family: 'Material Icons';
	font-style: normal;
	font-weight: 400;
	src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
	font-family: 'Material Icons';
	font-weight: normal;
	font-style: normal;
	font-size: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
}

.hotel::after {
	content: "\e53a";
}
.flight::after {
	content: "\e539";
}
.flight-takeoff::after {
	content: "\e905";
}
.flight-land::after {
	content: "\e904";
}
.hiking::after {
	content: "\e50a";
}	
</style>
<script>
import { ref, onMounted } from "vue";
import "smart-webcomponents/source/styles/smart.default.css";
import "smart-webcomponents/source/modules/smart.timeline.js";

export default {
  name: 'App',
  setup() {
    const timeline = ref(null);

    onMounted(() => {
      const travelPlans = [
        { date: 'May 15, 2024', description: 'Flight: Reserving airline tickets', subtitle: 'May 15, 2024', title: 'Flight Reservation', icon: 'material-icons flight', dotCSS: '' },
        { date: 'June 22, 2024', description: 'Hotel: Booking for the trip', subtitle: 'June 22, 2024', title: 'Booking', icon: 'material-icons hotel', dotCSS: '' },
        { date: 'July 12, 2024', description: 'Flight: Take off', subtitle: 'July 12, 2024', title: 'Flight', icon: 'material-icons flight-takeoff', dotCSS: '' },
        { date: 'July 13, 2024', description: 'Excursion Plans: Hiking', subtitle: 'July 13, 2024', title: 'Plans', icon: 'material-icons hiking', dotCSS: '' },
        { date: 'Aug 14, 2024', description: 'Return Journey: Flight Confirmation', subtitle: 'Aug 14, 2024', title: 'Flight Confirmation', icon: 'material-icons flight-land', dotCSS: '' },
      ];

      if (timeline.value) {
        timeline.value.dataSource = travelPlans;
      }
    });

    return {
      timeline
    };
  },
};
</script>

<style>
</style>

You can now use smart-timeline in templates; bindings and events follow Vue's normal syntax.

Run and build

Development server:

npm run dev

Then open http://localhost:5173/.

Production build:

npm run build

Output goes to ./dist.