alex-oleshkevich / vue-introjs Goto Github PK

I recommend you to write in bold that it is necessary to install intro.js in addition to vue-introjs.
Now it is written in small letters. People may lost a lot of time on understanding why they get errors.

Thanks

Perhaps I'm missing something obvious, but I can't seem to get this plugin to work using the this.$intro().addSteps(steps) method. I can get it to work just fine only using the v-intro directives, but I wanted to source my steps from Vuex so that there was one central spot for step information and then I could import it into whichever components needed it and then just add id to elements.

I have an array in Vuex that looks like this:

steps: [
  {
    element: '#step1',
    intro: 'Click events to get started',
  },
  {
    element: '#step2',
    intro: `Search for your Organization's region by Zip or City`,
  },
],

And I have corresponding ids set on a pair of divs in a component. I then import the steps from Vuex. I checked that they came through with console log. In the mounted() lifecycle hook I have a pair of lines that I think should have kicked off the tour:

this.$intro().addSteps(this.steps)
this.$intro().start()

Nothing happens when I load that page and there are no errors in the console. Any ideas on what to do?

how to set exitOnEsc?

As title, the directive doesn't work wether you set the value to true or false, before or after the intro.

how to hear the callback onComplete in vue? would it be with watch? I need when I click the done button, it shows me that it is complete, but where is it in the vue? I'm kind of lost.

I have no idea why 'this.$intro().start()' can work, but 'setOptions()' can't

"dependencies": {
"vue-introjs": "^1.3.2",
"intro.js": "^2.9.3"
}

I start one tour on the first landing page after login. Then after that tour is over, I send the user to another page using vue-router. The tour on that second page is not started using auto start. However, if I do a refresh on that second page, the auto-tour starts as expected.

I'm using 'autostart' with vue-router, but intro doesn't show after router changes, I have to refresh the whole page to show it.
I've set the 'waitTimeout' value, but it doesn't work.
vue-introjs version: 1.3.0
intro.js version: 2.9.3

It would be great to easily autostart hints

The README of this library provides no information on how to get this library working with jest unit tests. This information should be provided.

How do you use your intro to boot between different components in vue?
I tried it as if he didn't recognize the component. Does your package take this into account?

        <book-card v-intro-autostart="true"
                   v-intro-if="index == 0"
                   v-intro="'The content of tooltip'"
                   v-on:remove="removeBook"
                   :book="book"></book-card>

This produces two steps, rather than one as expected.

Using the lastest version of Vue, IE11/Edge throws a polyfill event-souce missing.

It's there any events or attribute that I can use to forbid exit steps when I click the background mask, thanks.I compared with Options Props of intro.js and find it has props named exitOnOverlayClick. Thank you for you plugin that I don't want to use intro.js in vue project.Moreover, your work totally help me shorten my time in programming new tour function.

Vue introjs is not working correctly on IE 11. So it causes my site to display white screen. Is there any polyfills I need to add to make it work on IE/Safari?

I installed this package via npm but got this error:

Uncaught ReferenceError: introJs is not defined

getting the about error while starting introJS
it is because prevTooltipButton and nextTooltipButton buttons are null

Any help please?

this.intro = this.$intro();
this.intro.setOptions({
hideNext: true, // <-- not work, still shows the next button
hidePrev: true,
prevLabel: '上一步',
nextLabel: '下一步',
doneLabel: '完成',
showProgress: true,
showBullets: false,
exitOnOverlayClick: false,
// showButtons: false,
steps: [
{
intro: '点击按钮',
element: document.querySelector('.list-step0'),
},
{}
],
});
this.intro.start();

options is like above, but the next button is still visible.

As I understand, if an tour is started using the autostarted option, there is no way to configure it. It would be great to be able to configure it via a directive or directive paramter. Ideally, the directive or directive parameter would take an object with options.

This throws an error while using with nuxt.js. Since nuxt doesn't use webpack explicitly there is no way to define it the same way.

I'm trying to declare vue-introjs as a plugins in vuex.

Hi, i have a child component that receive a computed string to be displayed in the second step of my intro and only the default value is bound.
It would be nice if the value passed to v-intro could be updated.

Would be great to be able to provide a function to an auto started tour that takes an introjs instance as a parameter. That would open up the use of the whole intro.js API on auto started tours. The function could be provided a Component method.

ERROR in static/js/vendor.d59fade80353c4f96b45.js from UglifyJs
Unexpected token: punc (() [./node_modules/_vue-introjs@1.1.1@vue-introjs/src/index.js:10,0][static/js/vendor.d59fade80353c4f96b45.js:2710,11]

Build failed with errors.

and
npm run dev is good

My intro of app is working correctly but I am unable to listen to events.

In mounted of main App.js I have this code:

mounted: {

	this.$intro().onbeforechange(function (targetElement) {
	    console.log("before new step"); // no output
	    console.log(targetElement); // no output
	});

	this.$intro().onchange(function (targetElement) {
	    console.log("new step"); // no output
	});

	console.log('Post intro start', this.$intro()); // this prints some instance variables
}

I'm using electron-vue, which uses vue-cli + webpack.

I've added this in src/main.js:

import VueIntro from 'vue-introjs'
Vue.use(VueIntro)

then added the plugin in webpack.renderer.config.js and `webpack.main.config.js:

plugins: [
     [...]
     new webpack.ProvidePlugin({
        introJs: ['intro.js', 'introJs']
    })
],

Then when I use the intro directives in a component, I get the error: Error in mounted hook: "ReferenceError: introJs is not defined"

Both intro.js and vue-introjs have been installed via NPM

Any ideas?

Suddenly, I started to get this error on starting my project. Earlier (few days ago) everything was fine.

This dependency was not found:

• vue-introjs in ./src/main.js
  To install it, you can run: npm install --save vue-introjs

My current version of the package is: "vue-introjs": "^1.1.2"
Even if I execute npm install --save vue-introjs and update the package to version 1.3.1, it doesn't help.

Hi!

I got stuck into issues when trying to minify VueIntroJs. My solution was to point to the dist file, instead of the package.json main value, "src/index.js":

	resolve: {
		alias: {
			'vue-introjs': 'vue-introjs/dist/index.min.js',

Thank you!

1. Adding hints by using v-intro-hint:

<div v-intro-hint="'tooltip text'">
  ...
</div>

mounted() {
  this.$intro().addHints()
  this.$intro().showHints()
}

In the inspector i can see that v-intro-hint has been transpiled to data-hint but nothing else happens.

2. Adding hints programmatically:

<div id="hint-0">
  ...
</div>

mounted() {
  const hints = [
    {
      hint: 'tooltip text',
      element: document.querySelector('#hint-0')
    }
  ]
  this.$intro.setOptions({hints})
  this.$intro().addHints()
  this.$intro().showHints()
}

In the inspector i can't even see that v-intro-hint has been transpiled to data-hint.
Then i tried:

mounted() {
  ...
  this.$intro().showHintDialog(0)
}

i got an error: item is undefined
So just in case i tried as well:

mounted() {
  ...
  console.log(document.querySelector('#hint-0'))
  setTimeout(() => {
    this.$intro().showHintDialog(0)
  }, 1000)
}

console.log() prints <div id="hint-0>..
introjs outputs error item is undefined.

Notice a really odd behaviour, follows this pattern:

1. IntroJS runs the tour once my component has dynamically rendered
2. If I press back, and go to the homepage and enter a search again it will run the tour directly on the homepage view
   
   you can see that in localstorage first_tour is set to true which means the tour has already ran, so it should not be running at all.

Also, note how it has no elements to bind to on the homepage so it just attaches itself to the top left corner of the page, and for some reason starts on the second step.

For some reason, this is what I see when I inspect the element ... it appears to be binding to the CDN code in my index.html file, not sure if this is relevant:

Basic outline of my code:

watch: {
    myVar: { 
        handler: function(){
            /* only start the tour once the actual elements have finished dynamically loading in the DOM */
            /* otherwise, introJS does not have any elements to actually bind to, or gets the positions wrong */
            this.$nextTick(() => {    
                if (this.results.hits.length > 0 && !this.loggedIn && !first_tour){
                    /* dynamically load my steps */
                    this.$intro().addSteps(
                        [
                            {
                                intro: "Step 1",
                                element: this.$refs.step_1,
                                position: "right",
                                disableInteraction: true // don't let the user click inside of the highlighted element
                            },
                            {
                                intro: "Step 2",
                                element: this.$refs.step_2,
                                position: "left",
                                disableInteraction: true
                            },
                            {
                                intro: "Step 3",
                                element: this.$refs.step_3_parent.$refs.step3_child_element,
                                position: "right",
                                disableInteraction: true
                            }
                        ]
                    )
                    .setOptions({
                        exitOnOverlayClick: false, // don't let the user click "out" of the tour to exit
                        overlayOpacity: 0.5 // changed to 0.5 felt it was too dark by default
                    })
                    .start() // start the tour
                    .oncomplete(function () { // callback tour completion
                        console.log("done");
                    })
                    .onexit(function () {
                        console.log("exited"); // callback tour exit
                    });
                }
            });
        },
        deep: true,
        immediate: false // don't load the tour right away
    }

what can I do about this? Note how my code clearly specifies only create the tour if the user is not logged in or has not done the tour before (as per record in local storage).

Is there any work around to just disable the tour so that it doesn't run on other pages? I can't tell if it's loading on the homepage or just loading prematurely when its going to the next page ... still shouldn't be acting this way.

I've tried lots of things including removing steps from the introJS instance upon exit or completion, I've tried setting display:none to introJS classes on the homepage, I've tried setting introJS to null, I've also tried triggering alerts throughout the introJS instantiation but for whatever reason, this unexpected behaviour won't go away.

This unexpected behaviour appears once in a while on Chrome but occurs frequently on Safari.

Any ideas would be greatly appreciated.

vue-cli import VueIntro from 'vue-introJs'; Vue.use(VueIntro);
// error Uncaught SyntaxError: Unexpected token ( autostart.js?9e2a:29

Is there a default directive to append a CSS class to the numbering layer?

Requirement
Add a default CSS customization directive for introjs-helperNumberLayer (v-intro-number-class).

Similar to..

Optionally append a CSS class to the helperLayer.
<div v-intro="'The content of tooltip'" v-intro-highlight-class="'blue-bg'"></div>

Hi,
I'm having real trouble with IntoJs and testing. Can you have a look at:

https://forums.manning.com/posts/list/0/43203.page#p121739
vuejs/vue-test-utils#570

It seems somewhat related to #19

Thanks.

Hi, how can I make the Next button to browser to another page?

Hello, thank you so nice plugin. it really great plugin
I tired to read your document it seem likes I did not see any mention use on onComplete in methods

thank you

I'm using intro.js version 2.9.3. I got this error when call this.$intro().start(). But version 2.8 work well.

Would be great if the docs or the code could be updated to reflect this.

Has anyone been able to get the plugin to load steps on nested components or components which dynamically render? I have only been able to get the tour to run on parent component steps.

Not sure where I'm going wrong.

intro.js

if (el.dataset) {
el.dataset.intro = binding.value;
}else{
el.setAttribute("data-intro", binding.value);
}

Current examples are not working and integration instruction in README.md file is also not clear. Please add some nice integration document.

(Y)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/introjs.min.css" rel="stylesheet">
    <style type="text/css">
        .red-bg {
            background: red;
        }
        
        .blue-bg {
            background: blue;
        }
    </style>
</head>

<body>
    <div class="container" id="root">
        <br />
        <div>
            <button class="btn btn-primary" @click="startTour">Start tour</button>
        </div>
        <br />
        <div v-intro-autostart="autostart" v-intro-autostart.config="{ doneLabel: 'over!' }">>
            <h3 v-intro="'Step 1, default'">Intro step 1</h3>
            <div>
                Step 1, use of v-intro="'Message'".
            </div>
            <hr />

            <h3 v-intro="'Step 2, custom position'" v-intro-position="'top'">Intro step 2 (position "top")</h3>
            <div>
                Step 2, use of v-intro-position="'top'". <br /> Renders tooltip on the top of this element.
            </div>
            <hr />

            <h3 v-intro="'Step 3, custom priority'" v-intro-step="2">Intro step 3 (set priority)</h3>
            <div>
                Step 3, use of v-intro-step="2". <br /> This step defines step priority = 2, so intro for step #3 is rendered before step #2.
            </div>
            <hr />

            <h3 v-intro="'Step 4, tooltip class'" v-intro-tooltip-class="'red-bg'">Intro step 4 (tooltip class)</h3>
            <div>
                Step 4, use of v-intro-tooltip-class="'red-bg'". <br /> Custom CSS class for tooltip.
            </div>
            <hr />

            <h3 v-intro="'Step 5, highlight class'" v-intro-highlight-class="'blue-bg'">Intro step 5 (highlight class)</h3>
            <div>
                Step 5, use of v-highlight-tooltip-class="'blue-bg'". <br /> Custom CSS class for helper layer.
            </div>
            <hr />

            <h3 v-intro="'Step 6, scroll to'" v-intro-scroll-to="'element'">Intro step 6 (change scrollTo attribute)</h3>
            <div>
                Step 6, use of v-scroll-to="'element'". <br />
            </div>
            <hr />

            <h3 v-intro="'Step 7, disable-interaction'" v-intro-disable-interaction="true">Intro step 7 (change disable-interaction attribute)</h3>
            <div>
                Step 7, use of v-disable-interaction="true". <br />
            </div>
            <hr />

            <h3 v-intro-hint="'The hint'">A hint</h3>
            <div>
                Renders a hint
            </div>
            <hr />

            <h3 v-intro-hint="'The hint'" v-intro-hint-position="'top'">A hint (position = top)</h3>
            <div>
                Renders a hint on top of elemenet.
            </div>
            <hr />
        </div>

        <div>
            <button class="btn btn-primary" @click="showHints">Show hints</button>
        </div>
    </div>
    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/intro.min.js"></script>
    <script type="text/javascript" src="../node_modules/vue-introjs/dist/index.min.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#root',
            data() {
                return {
                    autostart: false,

                };
            },
            methods: {
                startTour() {
                    this.$intro().start();
                },
                showHints() {
                    this.$intro().showHints();
                },
                toggleAutostart() {
                    this.autostart = !this.autostart;
                }
            }
        });
    </script>
</body>

</html>

it is still display "Done" not replace......

Hi,

In the readme you have both:

import VueIntro from 'intro.js'; 

import VueIntro from 'vue-introjs';

I am seeing:

[Vue warn]: Error in mounted hook: "ReferenceError: intro is not defined"

after adding this to my webpack.dev.conf.js

  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env'),
       introJs: ['intro.js', 'introJs']
    }),