score:0

as the example says on the intro page you have to import them from a subdirectory of the plugin.

the example given on their website is for their toast component which has a default export, however, because wizard is made up of two components it uses named exports instead so the syntax for importing them is slightly different.

importing default export

import foo from "somecomponent"

importing named exports

import {bar, baz} from "someothercomponent"

so, for your situation you should be able to do:

require('./bootstrap');

import {wizard, wizardstep} from "gritcode-components/src/components/wizard";

const app = new vue({
    el: '#app',
    components: {
        'vs-wizard': wizard,
        'vs-wizard-step': wizardstep
    }
});

hope this helps!

score:0

i had a similar issue and this worked for me.

import { wizard as vswizard } from 'gritcode-components/dist/gritcode-components';
import { wizardstep as vswizardstep } from 'gritcode-components/dist/gritcode-components';
import { toast as vstoast } from 'gritcode-components/dist/gritcode-components';

note that we are loading this from "gritcode-components/dist/gritcode-components" not from "gritcode-components/src/components/wizard" as suggested in one of the answers.

then in your vue instance you can do something like this to load the components:

require('./bootstrap');

const app = new vue({
    el: '#app',
    components: {
        vswizard,
        vswizardstep,
        vstoast
    },
    data: {
        currentstep: 0
    },
    computed: {
        progress: function() {
            return {
               step1: this.getsteppercentage(1),
               step2: this.getsteppercentage(2),
               step3: this.getsteppercentage(3)
            };
        }
    },
    methods: {
        getsteppercentage: function(stepnumber) {

                if (stepnumber == 1) {
                    //depending on your requirements you will return
                    //a value between 0 and 100 that describe
                    //the completion status of the step 1
                }

                if (stepnumber == 2) {
                    //depending on your requirements you will return
                    //a value between 0 and 100 that describes
                    //the completion status of the step 2
                }

                if (stepnumber == 3) {
                    //depending on your requirements you will return
                    //a value between 0 and 100 that describes the   
                    //completion status of the step 3
                }

        }
    }
});

also in your question, you have two vue instances: one for which you load the components, and another one bound to the element with id #app. the one with the #app element is the one that will be managing your html from the blade file. the problem you will run into, once this code loads is that you are adding the components on the vue instance that is not bound to your #app div, and therefore the vue instance designated for managing your #app element will not have access to them. so i suggest using only one instance of vue like in the example above unless you have a good reason for using more

lastly, i would advise you against wrapping your 'vs-wizard' tag element with 'vs-toast', unless you are trying to display the wizard in your toast, which i am not sure is possible.

you can do something like this instead:

<div id="app">

  <vs-toast></vs-toast>

  <vs-wizard :current-index.sync="currentstep">
      <vs-wizard-step 
        title="personal information" 
        description="enter your details"
        :progress="progress.step1" 
        icon="person">
      </vs-wizard-step>
      <vs-wizard-step 
        title="payment" 
        description="pay with credit card or paypal" 
        :progress="progress.step2"
        icon="credit-card">
      </vs-wizard-step>
      <vs-wizard-step 
        title="confirmation" 
        description="your order details" 
        :progress="progress.step3"
        :disable-previous="true"
        icon="check">
      </vs-wizard-step>
    </vs-wizard>
</div>

Related Query

More Query from same tag