@wayfinder/vue

Vue 3 helpers for @wayfinder/core that let you target elements reliably even when class names are obfuscated by scoped styles, CSS Modules, or build minifiers.

Installation

npm install @wayfinder/vue @wayfinder/core @floating-ui/dom

The problem

Vue scoped styles append a unique hash to every class:

<!-- Source -->
<button class="create-btn">New Project</button>

<!-- After build -->
<button class="create-btn" data-v-7ba5bd90>New Project</button>

The element is still addressable by class, but CSS-in-JS or third-party component libraries may produce fully unpredictable class names. Using a stable data-tour attribute sidesteps all of this.

Setup — register the plugin

import { createApp } from 'vue';
import { WayfinderPlugin } from '@wayfinder/vue';
import App from './App.vue';

const app = createApp(App);
app.use(WayfinderPlugin);
app.mount('#app');

v-tour-target directive

After registering the plugin, use the directive anywhere in your templates:

<button v-tour-target="'create-btn'">New Project</button>

This writes data-tour="create-btn" on the element. Pair it with tourId() in your Wayfinder config:

import { Wayfinder, tourId } from '@wayfinder/core';

const tour = new Wayfinder({
  steps: [
    {
      id: 'create-btn',
      target: tourId('create-btn'), // '[data-tour="create-btn"]'
      title: 'Create a new project',
      description: 'Click here to get started.',
    },
  ],
});

Custom attribute name

Pass the attribute name as a directive argument:

<button v-tour-target:data-wf-target="'create-btn'">New Project</button>

Pair it with tourAttribute in WayfinderConfig:

new Wayfinder({ tourAttribute: 'data-wf-target', steps: [...] });

Use without the plugin

Register the directive locally on a single component:

import { vTourTarget } from '@wayfinder/vue';

export default {
  directives: { tourTarget: vTourTarget },
};

<button v-tour-target="'create-btn'">New Project</button>