N
Nuxt•3mo ago
Oliver

When does the timeline NuxtUI component release?

Can't seem to make it work, I'm guessing the "soon" tag means it can't be used yet. Is there an ETA for when I could use this? Please tag me when responding, thanks! https://ui.nuxt.com/components/timeline
Nuxt UI
Vue Timeline Component - Nuxt UI
A component that displays a sequence of events with dates, titles, icons or avatars.
9 Replies
kapa.ai
kapa.ai•3mo ago
Hi @Oliver. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The Timeline component is already released and available for use in Nuxt UI. Based on the knowledge sources, the Timeline component is fully documented at Nuxt UI Timeline with multiple examples showing how to implement it. The documentation shows that you can use the component with various features: - Different orientations (vertical or horizontal) - Various sizes (xs, sm, md, etc.) - Color customization - Control of active items - Custom slots for more complex timelines Here's a basic example of how to use it: 
<script setup lang="ts">
import type { TimelineItem } from '@nuxt/ui'

const items = ref<TimelineItem[]>([
  {
    date: 'Mar 15, 2025',
    title: 'Project Kickoff',
    description: 'Kicked off the project with team alignment.',
    icon: 'i-lucide-rocket'
  },
  // More timeline items...
])
</script>

<template>
  <UTimeline :items="items" :default-value="2" class="w-96" />
</template>
<script setup lang="ts">
import type { TimelineItem } from '@nuxt/ui'

const items = ref<TimelineItem[]>([
  {
    date: 'Mar 15, 2025',
    title: 'Project Kickoff',
    description: 'Kicked off the project with team alignment.',
    icon: 'i-lucide-rocket'
  },
  // More timeline items...
])
</script>

<template>
  <UTimeline :items="items" :default-value="2" class="w-96" />
</template>
If you're having trouble making it work, it might be due to installation issues or version compatibility rather than the component not being released. The Timeline component is part of the standard Nuxt UI library components as shown in the components list. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@259449960171438080> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Oliver
OliverOP•3mo ago
No matter how I attempt to use the component I get these console warnings: 
[Vue warn]: Failed to resolve component: UTimeline
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Changelog onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) > > 
  at <RouteProvider key="/en/changelog" vnode= Object route= Object  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Primitive as=undefined class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8" > 
  at <Container> 
  at <Primitive as=undefined class="mt-8 pb-24 space-y-12" > 
  at <PageBody> 
  at <Primitive as=undefined class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10" > 
  at <Page> 
  at <Default ref=Ref< Proxy(Object) > > 
  at <AsyncComponentWrapper ref=Ref< Proxy(Object) > > 
  at <LayoutLoader key="default" layoutProps= Object name="default" > 
  at <NuxtLayoutProvider layoutProps= Object key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <ToastProvider swipe-direction="right" duration=5000 > 
  at <Toaster key=0 > 
  at <TooltipProvider> 
  at <ConfigProvider use-id=fn<use-id> dir="ltr" locale="en" > 
  at <App locale= Object > 
  at <App key=4 > 
  at <NuxtRoot>
warn$1 @ runtime-core.esm-bundler.js?v=11e195f6:50Understand this warning
runtime-core.esm-bundler.js?v=11e195f6:50 [Vue warn]: Failed to resolve component: UTimeline
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Changelog onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) > > 
  at <RouteProvider key="/en/changelog" vnode= Object route= Object  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Primitive as=undefined class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8" > 
  at <Container> 
  at <Primitive as=undefined class="mt-8 pb-24 space-y-12" > 
  at <PageBody> 
  at <Primitive as=undefined class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10" > 
  at <Page> 
  at <Default ref=Ref< Proxy(Object) > > 
  at <AsyncComponentWrapper ref=Ref< Proxy(Object) > > 
  at <LayoutLoader key="default" layoutProps= Object name="default" > 
  at <NuxtLayoutProvider layoutProps= Object key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <ToastProvider swipe-direction="right" duration=5000 > 
  at <Toaster key=0 > 
  at <TooltipProvider> 
  at <ConfigProvider use-id=fn<use-id> dir="ltr" locale="en" > 
  at <App locale= Object > 
  at <App key=4 > 
  at <NuxtRoot>
[Vue warn]: Failed to resolve component: UTimeline
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Changelog onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) > > 
  at <RouteProvider key="/en/changelog" vnode= Object route= Object  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Primitive as=undefined class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8" > 
  at <Container> 
  at <Primitive as=undefined class="mt-8 pb-24 space-y-12" > 
  at <PageBody> 
  at <Primitive as=undefined class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10" > 
  at <Page> 
  at <Default ref=Ref< Proxy(Object) > > 
  at <AsyncComponentWrapper ref=Ref< Proxy(Object) > > 
  at <LayoutLoader key="default" layoutProps= Object name="default" > 
  at <NuxtLayoutProvider layoutProps= Object key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <ToastProvider swipe-direction="right" duration=5000 > 
  at <Toaster key=0 > 
  at <TooltipProvider> 
  at <ConfigProvider use-id=fn<use-id> dir="ltr" locale="en" > 
  at <App locale= Object > 
  at <App key=4 > 
  at <NuxtRoot>
warn$1 @ runtime-core.esm-bundler.js?v=11e195f6:50Understand this warning
runtime-core.esm-bundler.js?v=11e195f6:50 [Vue warn]: Failed to resolve component: UTimeline
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 
  at <Changelog onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) > > 
  at <RouteProvider key="/en/changelog" vnode= Object route= Object  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Primitive as=undefined class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8" > 
  at <Container> 
  at <Primitive as=undefined class="mt-8 pb-24 space-y-12" > 
  at <PageBody> 
  at <Primitive as=undefined class="flex flex-col lg:grid lg:grid-cols-10 lg:gap-10" > 
  at <Page> 
  at <Default ref=Ref< Proxy(Object) > > 
  at <AsyncComponentWrapper ref=Ref< Proxy(Object) > > 
  at <LayoutLoader key="default" layoutProps= Object name="default" > 
  at <NuxtLayoutProvider layoutProps= Object key="default" name="default"  ... > 
  at <NuxtLayout> 
  at <ToastProvider swipe-direction="right" duration=5000 > 
  at <Toaster key=0 > 
  at <TooltipProvider> 
  at <ConfigProvider use-id=fn<use-id> dir="ltr" locale="en" > 
  at <App locale= Object > 
  at <App key=4 > 
  at <NuxtRoot>
The Honored One
The Honored One•3mo ago
@Oliver You might try installing the Nuxt UI release where it was merged, here is some info for that: https://ui.nuxt.com/getting-started/installation/nuxt#continuous-releases https://github.com/nuxt/ui/pull/4215 You can try using the pkg-pr-new package in the comments or just wait for the next release, it will probably be added there.
Oliver
OliverOP•3mo ago
Thank you! Can't really seem to figure out the pkg-pr-new package thing and I think it might be better to just wait, but the PR, that's already merged, so how do I see when it's fully integrated or see a ETA, get updates etc.?
The Honored One
The Honored One•3mo ago
I'm assuming they will change the "Soon" to "New" on the docs, so that should be an indicator. Also you should probably check when they release a new version, if the Timeline component is included in the changelog. But other than these, I don't really know if Nuxt UI has a roadmap of sorts, where you can see when things are becoming available. The changelogs after a release should be the source of truth tho. For the pkg-pr-new package, you should be able to run this command and this would install the changse made in the PR: https://github.com/nuxt/ui/pull/4215#issuecomment-2912115459. This should add the "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@552d124" package to your package.json. This way you can test the UTimeline component before it gets released, however I'd advise to change back to the next version (3.1.x) where they include the UTimeline component, otherwise you're gonna miss a lot of updates that are coming to the newer versions. Hope this helps!
GitHub
feat(Timeline): new component by J-Michalek · Pull Request #4215 ...
🔗 Linked issue Resolves: #814 ❓ Type of change 📖 Documentation (updates to the documentation or readme) 🐞 Bug fix (a non-breaking change that fixes an issue) 👌 Enhancement (improving an exist...
HugoRCD
HugoRCD•3mo ago
@The Honored One @Oliver You can find the roadmap here https://ui.nuxt.com/roadmap As for the release date, it should arrive in the next few weeks in the next minor version of NuxtUI, the timeline and a few other components !
Nuxt UI
Roadmap - Nuxt UI
Discover our Volta board for @nuxt/ui development status.
The Honored One
The Honored One•3mo ago
Ohh, that’s cool to know, thanks!
Oliver
OliverOP•3mo ago
Thank you all so much! Amazing community 🫶

Did you find this page helpful?