vue-site-guide

Library to help users get to know your site

Usage no npm install needed!

<script type="module">
  import vueSiteGuide from 'https://cdn.skypack.dev/vue-site-guide';
</script>

README

vue-site-guide

Demo and documentation

Install

Yarn

yarn add vue-site-guide

NPM

npm i vue-site-guide

Props

config

Guide configuration

Type: Object

Accepted values:

Property name Type Default Description
steps Array [] Configuration of guide steps { selector: '', title: '', message: '' }
initialStep Number 0 Index number of initial step
backdropClickToClose Boolean true Close guide by clicking outside of tooltip
prevButtonText String Prev The text that will be shown on the button Previous
prevButtonClass String '' CSS classes for the button Previous
prevButtonStyle Object {} Object with CSS properties and values for styling the button Previous
nextButtonText String Next The text that will be shown on the button Next
nextButtonClass String '' CSS classes for the button Next
nextButtonStyle Object {} Object with CSS properties and values for styling the button Next
skipButtonText String Skip The text that will be shown on the button Skip
skipButtonClass String '' CSS class name of the button Skip
skipButtonStyle Object {} Object with CSS properties and values for styling the button Skip
tooltipAlign String center Tooltip alignment relative to step
titleClass String '' CSS classes for the tooltip title
titleStyle String '' Object with CSS properties and values for styling the tooltip title
messageClass String '' CSS classes for the tooltip message
messageStyle String '' Object with CSS properties and values for styling the tooltip message
tooltipBgColor String '' Background color of tooltip
tooltipRadius String '' Border radius of tooltip in CSS units
tooltipPadding String '' Padding of tooltip in CSS units
tooltipShadow String '' Shadow of tooltip in CSS units
supportBgColor String '' Background color of the step backdrop
supportRadius String '' Border radius of the step backdrop in CSS units
supportShadow String '' Shadow of the step backdrop

Events

shown

Emitted after component has been shown to user

stepChanged

Emitted when currently step was changed

Payload

Current step index (after step was changed) Number

nextStep

Emitted when the user clicks Previous button

Payload

Current step index Number

prevStep

Payload

Current step index Number

beforeClose

Emitted immediately after the start of the closure of the guide

close

Emitted after the guide was closed

isBeginning

Emitted after the guide shown with initial-step is equal 0

isEnd

Emitted after the guide shown with initial-step is equal of index of the last step

reachBeginning

Emitted when guide reaches its initial step

reachEnd

Emitted when guide reaches its last step

Slots

default

Default slot used for pass the content

<vue-site-guide v-model="guide" :config="guideConfig">
  <div id="title">
    ...
  </div>
    
  <div id="start">
    ...
  </div>
    
  <div id="features">
    ...
  </div>
</vue-site-guide>

Scoped slots

buttonPrev

Slot for Previous button

Scope

Name Type Description
prev Function Go to previous step
canPrev Boolean Set false if step index number is 0

Example

<vue-site-guide :config="config" v-model="guide">
  <template #buttonPrev="{ prev, canPrev }">
    <button
      @click="prev"
      :disabled="!canPrev"
    >
      Back
    </button>
  </template>

  ...
</vue-site-guide>

buttonNext

Slot for Next button

Scope

Name Type Description
next Function Go to next step
canNext Boolean Set false if step index number is equal of index number of the last step

Example

<vue-site-guide :config="config" v-model="guide">
  <template #buttonNext="{ next, canNext }">
    <button
      @click="next"
      :disabled="!canNext"
    >
      Forward
    </button>
  </template>

  ...
</vue-site-guide>

buttonSkip

Slot for Next button

Scope

Name Type Description
skip Function Close guide

{stepIndex}Title

Slot for tooltip title

Example

<vue-site-guide :config="config" v-model="guide">
  <template #0Title>
    <h2 style="color: #fff">
      Doc title
    </h2>
  </template>

  <template #1Title>
    <h2 style="color: #fff">
      Features
    </h2>
  </template>

  ...
</vue-site-guide>

{stepIndex}Message

Slot for tooltip message

Example

<vue-site-guide :config="config" v-model="guide">
  <template #2Message>
    <div style="margin-bottom: 8px;">
      About your features
    </div>
    <img 
      style="max-width: 100%; border-radius: 3px; margin-bottom: 12px;" 
      src="https://picsum.photos/seed/picsum/400/200"
      alt=""
    >
  </template>

  ...
</vue-site-guide>