Security News
How Threat Actors are Abusing GitHub’s File Upload Feature to Host Malware
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
@nlo/onboarding-tour
Advanced tools
Readme
A vue plugin for a step by step interactive onboarding tour.
You can install the package through NPM.
npm install @nlo/onboarding-tour
Import and register the plugin:
import OnboardingTour from "@nlo/onboarding-tour";
Vue.use(OnboardingTour);
Include the tour component in the template of the page or view you want to use it. This must be in an overarching component which contains all the steps of that specific onboarding. Provide it with a unique name to distinguish it from other onboarding tours in your website.
<onboarding-tour name="myTour1" :steps="onboardingSteps"></onboarding-tour>
Provide an array of onboardingSteps
as vue component data:
export default {
data() {
return {
onboardingSteps: [
{ description: "New feature 1" },
{ description: "New feature 2" },
],
};
},
};
In your template add data attributes for each step in the same order that you defined your onboardingSteps
array:
Parameters:
data-tour-action-data
: Contains a string that is passed to the action that can be set in JS.data-tour-description-data
: Contains a JSON string that is used as input for making the description of the step dynamic (using {{my-variable}}
syntax)<template>
<div class="feature-1" data-tour-step="1"></div>
<div
class="feature-2"
data-tour-step="2"
data-tour-action-data="data that needs to be passed to the action of this step"
data-tour-description-data='{"my-variable": 12}'
></div>
<onboarding-tour name="myTour1" :steps="onboardingSteps"></onboarding-tour>
</template>
Finally start the onboarding when you want to present it to the user, for example in the mounted hook:
mounted() {
this.$onboarding.start('myTour1', { localStorageKey: 'myTour1' });
}
You can add some optional interface options
mounted() {
this.$onboarding.start('myTour1', {
localStorageKey: 'myTour1',
interfaceOptions: {
hideSteps: true, // default is false
hideStop: true, // default is false
stopText: 'Stop text', // default is 'Stoppen'
endText: 'The end', // default is 'Ok, klaar!'
nextText: 'Next' // default is 'Ok, ga verder'
}
});
}
A built in local storage mechanism is available if you pass a local storage key as part of the second options object argument. This allows you to easily show the tour to the user once.
The step object in the steps prop array you provide to the plugin has a few additional options to allow for more useful interaction.
{
// Description text for inside the tooltip for that step
description: 'New feature 1',
// Optional: Title for inside the tooltip fot that step, above the description
title: 'Title',
// Optional: See popper.js tooltip placement string options
tooltipPlacement: 'bottom-start',
// Optional: Execute code on the action hook to for example open a drawer for that specific feature highlight
action: () => {
this.openDrawer();
},
// Optional: Delay in milliseconds to for example wait for the action of the previous step to finish first
delay: 300.
// Optional: CSS selector to find the target element (overrides data-tour-step feature)
target: '#feature1-complex-control'
}
FAQs
A vue plugin for a step by step interactive onboarding tour.
The npm package @nlo/onboarding-tour receives a total of 69 weekly downloads. As such, @nlo/onboarding-tour popularity was classified as not popular.
We found that @nlo/onboarding-tour demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 11 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub is susceptible to a CDN flaw that allows attackers to host malware on any public repository.
Security News
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.