Skip to main content

Rich content and images

Put images, video, live state, and application components inside a tour step.

Add rich content and images

A step accepts text or a Vue component. Use a component for images, video, links, live state, or product-specific layout. Nuxt Tour keeps ownership of the card, positioning, focus, and actions.

Create the content component

vue
<!-- app/components/tours/ProjectOverview.vue -->
<template>
  <figure class="tour-media">
    <img
      src="/images/project-overview.webp"
      alt="Project overview with three active work areas"
      width="640"
      height="360"
    />
    <figcaption>
      Review progress and open work from one place.
    </figcaption>
  </figure>
</template>

<style scoped>
.tour-media {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.tour-media img {
  width: 100%;
  height: auto;
  border-radius: 0.75rem;
}
</style>

Always set the image dimensions. This prevents layout movement when the image loads. Use useful alternative text when the image contains information. Use an empty alt value when the image is decorative.

Use the component in a definition

ts
// app/tours/onboarding.ts
import ProjectOverview from '~/components/tours/ProjectOverview.vue'

export default defineTour({
  id: 'onboarding',
  steps: [{
    id: 'overview',
    target: 'project-overview',
    title: 'Your project overview',
    content: ProjectOverview,
    placement: 'bottom',
  }],
})

The component can use stores, composables, translations, and normal Vue state. Do not pass raw HTML strings. A component keeps rendering typed and safe.

Use live application state

vue
<script setup lang="ts">
const project = useCurrentProject()
</script>

<template>
  <p>
    {{ project.completedTasks }} of {{ project.totalTasks }} tasks are complete.
  </p>
</template>

Keep the content focused. A tour card is a short guide, not a replacement for a product page.