Timeline in Nuxt not showing any items

I have this simple nuxt page and are trying to to render er simple timeline. I have just copied paste from the documentation:

https://ui.nuxt.com/components/timeline

This page is just blank, but I get a small warning in VS code not sure if it is relavant:

Module '"@nuxt/ui"' has no exported member 'TimelineItem'. Did you mean to use 'import TimelineItem from "@nuxt/ui"' instead?

Code:

 <template>
      <div class="p-8">
        <h1 class="text-2xl font-bold mb-4">
          Test Page
        </h1>
        <p class="mb-2">
          This is a minimal Vue page.
        </p>
        <div>
            <UTimeline :default-value="2" :items="itemsTimeline" class="w-96" />
        </div>
      </div>
    </template>
    
    <script setup lang="ts">
    import { ref } from 'vue';
    import type { SelectMenuItem } from '@nuxt/ui'
    import type { TimelineItem } from '@nuxt/ui'
    
    const itemsTimeline = ref<TimelineItem[]>([
      {
        date: 'Mar 15, 2025',
        title: 'Project Kickoff',
        description: 'Kicked off the project with team alignment. Set up project milestones and allocated resources.',
        icon: 'i-lucide-rocket'
      },
      {
        date: 'Mar 22 2025',
        title: 'Design Phase',
        description: 'User research and design workshops. Created wireframes and prototypes for user testing.',
        icon: 'i-lucide-palette'
      },
      {
        date: 'Mar 29 2025',
        title: 'Development Sprint',
        description: 'Frontend and backend development. Implemented core features and integrated with APIs.',
        icon: 'i-lucide-code'
      },
      {
        date: 'Apr 5 2025',
        title: 'Testing & Deployment',
        description: 'QA testing and performance optimization. Deployed the application to production.',
        icon: 'i-lucide-check-circle'
      }
    ])
    
    
    
    </script>
    
    <style scoped>
    /* You can add page-specific styles here */
    </style>

The issue here is that you’re following the latest Nuxt UI docs, but your project is using an older version of @nuxt/ui.
In older versions, the TimelineItem type didn’t exist — it was introduced in newer releases along with updated props for <UTimeline>.

Two ways to fix this:

1. Upgrade Nuxt UI

If you want to use the exact syntax from the docs (with TimelineItem and items prop), update to the latest Nuxt UI:

npm install @nuxt/ui@latest

or

yarn add @nuxt/ui@latest

After upgrading, your original code will work as in the docs.

2. Adapt to the older Nuxt UI API

In older Nuxt UI, <UTimeline> doesn’t use the items prop with TimelineItem[].
You have to pass the slot content manually:

<UTimeline :value="2" class="w-96">
  <UTimelineItem
    v-for="(item, i) in itemsTimeline"
    :key="i"
    :icon="item.icon"
  >
    <template #title>{{ item.title }}</template>
    <template #description>{{ item.description }}</template>
    <template #date>{{ item.date }}</template>
  </UTimelineItem>
</UTimeline>

And remove the type import:

const itemsTimeline = ref([
  { date: 'Mar 15, 2025', title: 'Project Kickoff', description: '...', icon: 'i-lucide-rocket' },
  // ...
])