Skip to content

evo-mark/vue-tutorials

Repository files navigation

evoMark company logo

Downloads Version Licence

Vue Tutorials

Teach users about how your app works, with this easy-to-use tutorials plugins for Vue (v3.5+).

Peer Dependencies

  • Vue v3.5.0+
  • @vueuse/core version 10 - 13

Installation

First, install the plugin using your package manager of choice (we're using PNPM). You'll also need to add the peer dependencies if they're not already in your project.

pnpm add vue-tutorials vue @vueuse/core

Usage

Vue Tutorials must be installed as a plugin for your app:

import { createApp } from "vue";
import { VueTutorials } from "vue-tutorials";

const app = createApp(App);
app.use(VueTutorials);
app.mount("#app");

Global Options

You can also pass global options to the plugin as the 2nd argument to app.use.

Vue Tutorials will register the v-tutorial component globally by default.

app.use(VueTutorials, {
	viewCount: 2,
	overlayColour: "rgb(0 0 0 / 0.8)",
	contentClass: "bg-white p-4 rounded",
	tutorials: {
		feature: ["This is a new feature!"],
	},
	target: "#app",
});

You can pass any of the following to the global options object

name type description default
viewCount number Number of times to show tutorial to user 1
componentName string Name of the globally registered component "VTutorial"
tutorials Record<string, string | string[]> Dictionary of tutorial content {}
overlayColour string CSS colour for the non-highlighted elements rgb(0 0 0 / 0.6)
target string Where highlighted content should be teleported to "body"
global boolean Register the component globally true
as string | Component Element to use for wrapping "span"
closeOnOutsideClick boolean Close tutorial when a user clicks outside the content true
contentClass string Class(es) to apply to the content <empty string>
highlightedClass string Class(es) to apply to the highlighted element <empty string>
position string Position of the content relative to the highlighted element "bottom"
offset number Number of pixels gap between content and highlighted elements 10

Adding a Tutorial

Inside your app, you can then wrap relevant areas:

<VTutorial id="feature">
	<div>New feature goes here</div>
</VTutorial>

Local Props

You can pass any of the following to the local component. These will override your global config if set.

  • as
  • target
  • position
  • contentClass
  • overlayColour
  • closeOnOutsideClick

Additionally, the following props are exclusive to the component:

name type description default
content string|string[] Content to show for the tutorial <empty string>

Slots

Content

Pass content to be displayed directly

<VTutorial id="feature">
	<div>New feature goes here</div>
	<template #content="{ closeTutorial }">
		This is a new feature!
		<button @click="closeTutorial">Done</button>
	</template>
</VTutorial>

Support Open-Source Software

We're providing this package free-of-charge to the community. However, all development and maintenance costs time, energy and money. So please help fund this project if you can.

Buy Me A Coffee

About

Guide your users about using your app with tutorials

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published