{"id":13535819,"url":"https://github.com/xaksis/vue-good-wizard","last_synced_at":"2025-04-04T21:08:02.149Z","repository":{"id":57396072,"uuid":"92636826","full_name":"xaksis/vue-good-wizard","owner":"xaksis","description":"An easy and clean VueJS 2.x wizard plugin","archived":false,"fork":false,"pushed_at":"2023-03-04T01:26:24.000Z","size":1532,"stargazers_count":288,"open_issues_count":22,"forks_count":43,"subscribers_count":13,"default_branch":"master","last_synced_at":"2024-04-24T19:06:00.420Z","etag":null,"topics":["plugin","step-wizard","vue","vuejs","wizard"],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xaksis.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-05-28T03:05:00.000Z","updated_at":"2024-03-29T03:05:50.000Z","dependencies_parsed_at":"2024-01-07T01:52:08.443Z","dependency_job_id":null,"html_url":"https://github.com/xaksis/vue-good-wizard","commit_stats":{"total_commits":54,"total_committers":3,"mean_commits":18.0,"dds":0.03703703703703709,"last_synced_commit":"f4424111206fb0f23489b8cc6aea2cb0770a0b03"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaksis%2Fvue-good-wizard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaksis%2Fvue-good-wizard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaksis%2Fvue-good-wizard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xaksis%2Fvue-good-wizard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xaksis","download_url":"https://codeload.github.com/xaksis/vue-good-wizard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247249525,"owners_count":20908212,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["plugin","step-wizard","vue","vuejs","wizard"],"created_at":"2024-08-01T09:00:28.855Z","updated_at":"2025-04-04T21:08:02.106Z","avatar_url":"https://github.com/xaksis.png","language":"Vue","funding_links":["https://www.buymeacoffee.com/68BUXR1d9"],"categories":["Vue","UI组件"],"sub_categories":[],"readme":"# vue-good-wizard\n\n[![npm](https://img.shields.io/npm/dm/vue-good-wizard.svg?style=flat-square)](https://www.npmjs.com/package/vue-good-wizard)\n[![npm](https://img.shields.io/github/package-json/v/xaksis/vue-good-wizard.svg?style=flat-square)](https://github.com/xaksis/vue-good-wizard/releases)\n[![npm](https://img.shields.io/github/license/xaksis/vue-good-wizard.svg?style=flat-square)](https://github.com/xaksis/vue-good-wizard/blob/master/LICENSE)\n[![](https://data.jsdelivr.com/v1/package/npm/vue-good-wizard/badge)](https://www.jsdelivr.com/package/npm/vue-good-wizard)\n\nAn easy and clean VueJS 2.x wizard plugin\n\n![Basic Screenshot](README/images/vue-good-wizard.gif)\n\n## Live Demo\n\n[vue-good-wizard Demo](https://jsfiddle.net/aks9800/ygkruetq/)\n\n\u003ca href=\"https://www.buymeacoffee.com/68BUXR1d9\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/purple_img.png\" alt=\"Buy Me A Coffee\" style=\"height: auto !important;width: auto !important;\" \u003e\u003c/a\u003e\n\n## Follow the project progress live\n[Vue-good-wizard Project](https://timerbit.com/#/public/U1kivTdfbz4T3hJ3E7BJ)\n\n## Getting Started\n\n### Installing\n\nInstall with npm:\n```bash\nnpm install --save vue-good-wizard\n```\n\nimport into project:\n```js\nimport Vue from 'vue';\nimport VueGoodWizard from 'vue-good-wizard';\n\nVue.use(VueGoodWizard);\n```\n\n**or**\n\nimport into component: \n\n```js\n// within your component script tag\nimport { GoodWizard } from 'vue-good-wizard';\n\n// in your components\ncomponents: {\n  'vue-good-wizard': GoodWizard,\n}\n```\n\n## Example Usage\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cvue-good-wizard \n      :steps=\"steps\"\n      :onNext=\"nextClicked\" \n      :onBack=\"backClicked\"\u003e\n      \u003cdiv slot=\"page1\"\u003e\n        \u003ch4\u003eStep 1\u003c/h4\u003e\n        \u003cp\u003eThis is step 1\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv slot=\"page2\"\u003e\n        \u003ch4\u003eStep 2\u003c/h4\u003e\n        \u003cp\u003eThis is step 2\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv slot=\"page3\"\u003e\n        \u003ch4\u003eStep 3\u003c/h4\u003e\n        \u003cp\u003eThis is step 3\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv slot=\"page4\"\u003e\n        \u003ch4\u003eStep 4\u003c/h4\u003e\n        \u003cp\u003eThis is step 4\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/vue-good-wizard\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  name: 'demo',\n  data(){\n    return {\n      steps: [\n        {\n          label: 'Select Items',\n          slot: 'page1',\n        },\n        {\n          label: 'Add Constraints',\n          slot: 'page2',\n        },\n        {\n          label: 'Review',\n          slot: 'page3',\n        },\n        {\n          label: 'Apply',\n          slot: 'page4',\n          options: {\n            nextDisabled: true, // control whether next is disabled or not\n          },\n        }\n      ],\n    };\n  },\n  methods: {\n    nextClicked(currentPage) {\n      console.log('next clicked', currentPage)\n      return true; //return false if you want to prevent moving to next page\n    },\n    backClicked(currentPage) {\n      console.log('back clicked', currentPage);\n      return true; //return false if you want to prevent moving to previous page\n    }\n  },\n};\n\u003c/script\u003e\n```\nThis should result in the screenshot seen above\n\n### Component Options\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eOption\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n      \u003cth\u003eType, Example\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003esteps (required)\u003c/td\u003e\n      \u003ctd\u003eArray of objects that specify step titles and page id\u003c/td\u003e\n      \u003ctd\u003e\n\u003cpre lang=\"javascript\"\u003e\n[\n  {\n    label: 'Add Constraints', // title for wizard step\n    page: 'page2', //id for div to show for this step\n  },\n  //...\n]\n\u003c/pre\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        onNext (optional)\n      \u003c/td\u003e\n      \u003ctd\u003e\n        function called before next page is shown. This is a good place to do validation etc. Return true to proceed, or false to stay on the same page.\n      \u003c/td\u003e\n      \u003ctd\u003e\n        function ex: \n\u003cpre lang=\"javascript\"\u003e\nfunction(currentPage){\n  console.log(currentPage);\n  return true;\n}\n\u003c/pre\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        onBack (optional)\n      \u003c/td\u003e\n      \u003ctd\u003e\n        function called before previous page is shown. Return true to proceed, or false to stay on the same page.\n      \u003c/td\u003e\n      \u003ctd\u003e\n        function ex: \n\u003cpre lang=\"javascript\"\u003e\nfunction(currentPage){\n  console.log(currentPage);\n  return true;\n}\n\u003c/pre\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"3\"\u003e\n        \u003cstrong\u003eLabel options\u003c/strong\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        previousStepLabel\n      \u003c/td\u003e\n      \u003ctd\u003e\n        label for previous step\n      \u003c/td\u003e\n      \u003ctd\u003e\n       default: 'Back'\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        nextStepLabel\n      \u003c/td\u003e\n      \u003ctd\u003e\n        label for next step\n      \u003c/td\u003e\n      \u003ctd\u003e\n       default: 'Next'\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        finalStepLabel\n      \u003c/td\u003e\n      \u003ctd\u003e\n        label for final step\n      \u003c/td\u003e\n      \u003ctd\u003e\n       default: 'Save'\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd colspan=\"3\"\u003e\n        \u003cstrong\u003eUseful internal functions\u003c/strong\u003e\n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        goNext()\n      \u003c/td\u003e\n      \u003ctd\u003e\n        for async usecase, you'd want to go next only after your async function is done. See [advanced usecase](https://github.com/xaksis/vue-good-wizard#advanced-usecase---call-next-or-back-asynchronously)\n      \u003c/td\u003e\n      \u003ctd\u003e\n       `this.$refs['my-wizard'].goNext(true)` \n      \u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\n        goTo(step)\n      \u003c/td\u003e\n      \u003ctd\u003e\n        if you want to go to a step programmatically, you can use this method\n      \u003c/td\u003e\n      \u003ctd\u003e\n       `this.$refs['my-wizard'].goTo(2)` // go to 3rd step.\n      \u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Advanced usecase - Call next or back asynchronously \nIn some cases, you might want to change step programmatically. The most common usecase for this is if you want to call an asynchronous action on next/back click and then in the callback want to either go to the next step or stay on the same step. \n\nFollowing is an example of how this can be done using *vue-good-wizard*\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cvue-good-wizard \n      ref=\"wizard\"\n      :steps=\"steps\"\n      :onNext=\"nextClicked\" \n      :onBack=\"backClicked\"\u003e\n      \u003cdiv slot=\"page1\"\u003e\n        \u003ch4\u003eStep 1\u003c/h4\u003e\n        \u003cp\u003eThis is step 1\u003c/p\u003e\n      \u003c/div\u003e\n      \u003cdiv slot=\"page2\"\u003e\n        \u003ch4\u003eStep 2\u003c/h4\u003e\n        \u003c!-- lets say, this is where my form is that needs to be validated --\u003e\n        \u003cel-form :model=\"myForm\" ref=\"myForm\"\u003e\n        \u003c/el-form\u003e\n      \u003c/div\u003e\n      \u003cdiv slot=\"page3\"\u003e\n        \u003ch4\u003eStep 3\u003c/h4\u003e\n        \u003cp\u003eThis is step 3\u003c/p\u003e\n      \u003c/div\u003e\n    \u003c/vue-good-wizard\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nexport default {\n  name: 'demo',\n  data(){\n    return {\n      steps: [\n        {\n          label: 'Select Items',\n          slot: 'page1',\n        },\n        {\n          label: 'My form',\n          slot: 'page2',\n        },\n        {\n          label: 'Review',\n          slot: 'page3',\n        },\n      ],\n    };\n  },\n  methods: {\n    nextClicked(currentPage) {\n      const _this = this;\n\n      // if we're on the form page\n      if (currentPage == 1) {\n\n        // on next, we need to validate the form\n        _this.$refs.myForm.validate((valid) =\u003e {\n          if (valid) {\n\n            //all is good, lets proceed to next step\n            _this.$refs.wizard.goNext(true);\n          } else {\n\n            //error. don't proceed.\n            console.log('error submit!!');\n            return false;\n          }\n        });\n        return false; //don't proceed by default. \n      }\n      return true; //return false if you want to prevent moving to next page\n    },\n    backClicked(currentPage) {\n      console.log('back clicked', currentPage);\n      return true; //return false if you want to prevent moving to previous page\n    }\n  },\n};\n\u003c/script\u003e\n```\n\n## Authors\n\n* **Akshay Anand** - [xaksis](https://github.com/xaksis)\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE.md](LICENSE) file for details\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxaksis%2Fvue-good-wizard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxaksis%2Fvue-good-wizard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxaksis%2Fvue-good-wizard/lists"}