nuxt-driver-vue

nuxt-driver-vue

Nuxt 4 module for driver-vue: product tours, highlights and hints rendered with your own components.

Install

pnpm add nuxt-driver-vue

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["nuxt-driver-vue"],
  driver: {
    defaults: { showProgress: true }, // merged under every useDriver() config
    components: true, // register <DriverTour>, <DriverPopover>, <DriverHints>, ... (default)
    css: true, // add driver-vue/style.css (default)
  },
});

Use

<!-- app.vue or a layout -->
<template>
  <NuxtPage />
  <DriverTour />
</template>

<script setup lang="ts">
const { drive } = useDriver(
  { steps: [{ element: "#hero", popover: { title: "Welcome", description: "Hello." } }] },
  { shared: true }
);
</script>

Auto-imports: useDriver, createDriver, useDriverPosition, injectDriver, provideDriver, useHints, createHints. Components render nothing on the server.

Documentation: eg0r0k.github.io/driver-vue.

License

MIT