QActivity v3 modernizes the package for Vue 3, Quasar v2, @quasar/app-vite v3, and ESM-first tooling.

Requirements

• Vue 3 and Quasar v2.
• Quasar CLI Vite with @quasar/app-vite >=3.0.0 for the App Extension.
• Node.js 22.13 or newer.
• pnpm 11.5 or newer when working in this repository.

Update Packages

For Quasar App Extension installs:

quasar ext add @quasar/qactivity

For direct UI package installs:

pnpm add @quasar/quasar-ui-qactivity

Import Changes

Use the package entrypoint instead of old source-file imports:

import { const QActivity: ComponentOptionsQActivity, const QActivityItem: ComponentOptionsQActivityItem } from '@quasar/quasar-ui-qactivity'

QActivityItem
    
const QActivityItem: ComponentOptions

Import the component stylesheet alongside the components:

import '@quasar/quasar-ui-qactivity/dist/index.css'

Do not import legacy source paths such as src/index.sass or component implementation files. Those paths belonged to the old package layout and may change without warning.

Build Output

QActivity v3 publishes ESM and UMD builds. CommonJS entrypoints have been removed to match the modern Quasar and Vite ecosystem.

Bar Caps

The v3 release includes timeline bar cap controls (bar-start, bar-end, and bar-cap-size) so you can hide either end, add arrow caps, use circular round caps, or use square and rounded-square caps. The bar-distance prop is measured to the center of the bar, which keeps thicker bars and caps aligned with activity markers.