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>
Source: stackoverflow.com
Related Query
- how to add this external vue component in my laravel5.3 project?
- How do I add time sourced from an external source as an X axis to a ChartJS graph?
- how to create multiple chart on one component vue
- How to add comma in this chart js
- How to add ChartJS code in Html2Pdf to view image
- Using chart js version 3, how to add custom data to external tooltip?
- How to make dynamic chart using Vue component with chart-js
- How to add external scripts and css in latest angular-cli
- Vue 2: How to unit test component that uses Chart.js (vue-chart-3)
- How do I destroy/update Chart Data in this chart.js code example?
- How to run Chart.js samples using source code
- How to add text inside the doughnut chart using Chart.js?
- How to add labels into Chart.js canvas plugin?
- How to modify chartjs tooltip so i can add customized strings in tooltips
- How to add tooltips to chart.js graph
- How to add an on click event to my Line chart using Chart.js
- How to add images as labels to Canvas Charts using chart.js
- How to add an offset to a dataset in Chart js
- How to add second Y-axis for Bar and Line chart in Chart.js?
- How to add text in centre of the doughnut chart using Chart.js?
- How to add OnClick Event on labels in Chart.js v2.0?
- How to add label for ChartJs Legend
- How to add text at end of each line in charts.js
- How to add datas to chart js from javascript array itself?
- How to change the color of legend in chartjs and be able to add one more legend?
- How to add panning to chart in chartjs?
- Reactive Vue Chart.js component using Typescript
- How to add an empty data point to a linechart on Chart.js?
- How to add padding to the vertical scale (X-axis) in Chart.js?
- Chart.js - How to Add Text in the Middle of the Chart?
More Query from same tag
- How to add new Line but not in the first x axes
- how to show several labels and data's in the chart.js similar to npmtrend website?
- How to customize Title position with ChartJS
- Django Chart.js
- vue-chartjs v4 reference to the chart object
- What's an efficient process for passing PHP arrays to to populate multiple ChartJS graphs?
- How to show stacked and unstacked bar graphs together in Chart.js
- Multiple labels for multiple data-sets in chart.js
- Using lodash to prepare data for "last day user registration" chart
- Chart.js Subtitle won't display
- grouped bar dataset in djanog template loop
- [MIXED CHART.JS]animation option screws up chart.js
- Charts.js Y-Axis whole Numbers
- Chart.js: Can I change the "OriginalOptions" variable within the chartjs-zoom-plugin?
- Adding additional data to chart
- onAnimationComplete is executed before animation is done
- Chart.js - Add gradient to bar chart
- Output (column bars) from Chart.js blurry in Opera browser?
- Frontend and backend for chart using chartjs, mongodb, and controller
- Have all label in Chartjs be at fixed positions
- Loop to create lines for graph chartjs
- Chart.js bar thickness
- how to show bar chart for every product
- Show ChartJS Stacked bar on another bar for Target vs Sales analysis
- chart.js label and value overlap issue
- Is it possible to avoid the shrinking of Chart.js pie charts when accompanied by labels?
- Chart.js date formatting use for
- Move chart x axis label and borders
- Chart.js only appears randomly, and disappears on page refresh
- Angular-chart.js Configuration