Welcome

Nuxt Driver.js

Quickly guide your users through your Nuxt.js application with Driver.js. Nuxt Driver.js is a simple wrapper around the driver.js package(all credits to them) for creating guided tours and feature introductions for your Nuxt.js applications.

View Docs Get Started

Getting started

To get started, install the package with your package manager of choice.

npm install nuxt-driver.js

Now add the module to the modules section of your nuxt.config file.

export default defineNuxtConfig({
  modules: ["nuxt-driver.js"];
});

That is it! You are now ready to start creating guided tours and feature introductions for your Nuxt.js applications. The example used on this page is a simple example of how you can use Nuxt Driver.js to guide users through your application.

 onMounted(() => {
    const driver = useDriver({
      showProgress: true,
      animate: true,
      steps: [
        {
          element: "#welcome",
          popover: {
            title: "Welcome to Nuxt Driver.js",
            description:
              "Quickly guide your users through your Nuxt.js application with Driver.js.",
            side: "bottom",
          },
        },
        {
          element: "#header",
          popover: {
            title: "Nuxt Driver.js",
            description:
              "A simple wrapper around the driver.js package for creating guided tours and feature introductions for your Nuxt.js applications.",
            side: "bottom",
          },
        },
        {
          element: "#description",
          popover: {
            title: "Nuxt Driver.js",
            description:
              "A simple wrapper around the driver.js package for creating guided tours and feature introductions for your Nuxt.js applications.",
            side: "bottom",
          },
        },
        {
          element: "#view-docs",
          popover: {
            title: "View Docs",
            description:
              "Learn more about Driver.js and how to use it in your Nuxt.js applications.",
            side: "top",
          },
        },
      ],
    });
    const tl = useGsap.timeline();

    tl.from("#welcome", { opacity: 0, y: 30, duration: 0.4 })
      .from("#header", { opacity: 0, y: 30, duration: 0.4 }, "-=0.1")
      .from("#description", { opacity: 0, y: 30, duration: 0.4 }, "-=0.1")
      .from("#view-docs", { opacity: 0, y: 30, duration: 0.4 }, "-=0.1")
      .from("#get-started-btn", { opacity: 0, y: 30, duration: 0.4 }, "-=0.1")
      .call(() => {
        driver.drive();
      });
  });