{"id":20619822,"url":"https://github.com/tauromachian/vue-simple-stepper","last_synced_at":"2026-03-19T16:45:34.936Z","repository":{"id":168372842,"uuid":"644124487","full_name":"Tauromachian/vue-simple-stepper","owner":"Tauromachian","description":"Modular stepper component made with Vue3 and CSS","archived":false,"fork":false,"pushed_at":"2023-12-11T01:34:32.000Z","size":561,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-21T22:33:19.939Z","etag":null,"topics":["component","stepper","vue3"],"latest_commit_sha":null,"homepage":"https://stepper.jose-garcia.net/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tauromachian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-05-22T21:48:07.000Z","updated_at":"2024-09-01T15:26:01.000Z","dependencies_parsed_at":"2023-11-10T14:13:18.262Z","dependency_job_id":"c92d5331-1a73-4ece-ad91-d38916f13e07","html_url":"https://github.com/Tauromachian/vue-simple-stepper","commit_stats":null,"previous_names":["tauromachian/vuestepper","tauromachian/vue-simple-stepper"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Tauromachian/vue-simple-stepper","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tauromachian%2Fvue-simple-stepper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tauromachian%2Fvue-simple-stepper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tauromachian%2Fvue-simple-stepper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tauromachian%2Fvue-simple-stepper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tauromachian","download_url":"https://codeload.github.com/Tauromachian/vue-simple-stepper/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tauromachian%2Fvue-simple-stepper/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30236042,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T19:01:10.287Z","status":"ssl_error","status_checked_at":"2026-03-07T18:59:58.103Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["component","stepper","vue3"],"created_at":"2024-11-16T12:12:36.487Z","updated_at":"2026-03-07T23:01:20.591Z","avatar_url":"https://github.com/Tauromachian.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stepper Component\n\nStepper component designed to guide users through a multi-step process, like a registration form or setup process. It provides a clear indication of the current, completed, and upcoming steps, and also allows for navigating between these steps.\n\n## Features\n\n- Dynamically renders a specified number of steps based on the `steps` prop.\n- Keeps track of the current step and which steps have been visited.\n- Allows for customization of the action buttons via slots.\n- Emits events when the user navigates through the steps.\n- Handles step navigation logic, showing and hiding appropriate elements as needed.\n- Lazy loads content components as needed\n\n## Installation\n\nInstall it from npm\n\n`npm install vue-simple-stepper`\n\nYou need to import the component doing:\n\n`import VueSimpleStepper from 'vue-simple-stepper'`\n\nAnd its styles like this:\n\n`import \"vue-simple-stepper/dist/style.css\";`\n\n## Use\n\nThe easiest way to use is to copy and throw this in your code:\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue-simple-stepper\n    :steps=\"state.steps\"\n    :step=\"state.step\"\n    @click:next=\"nextStep\"\n    @click:previous=\"previousStep\"\n    @click:submit=\"submitStep\"\n  \u003e\n    \u003cdiv class=\"content first\"\u003easdfasd\u003c/div\u003e\n    \u003cdiv class=\"content second\"\u003easdfasd\u003c/div\u003e\n    \u003cdiv class=\"content third\"\u003easdfasd\u003c/div\u003e\n  \u003c/vue-simple-stepper\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { reactive } from \"vue\";\n\nimport \"vue-simple-stepper/dist/style.css\";\n\nimport VueSimpleStepper from \"vue-simple-stepper\";\n\nconst state = reactive({\n  steps: [\"Step 1\", \"Step 2\", \"Step 3\"],\n  step: 1,\n});\n\nconst nextStep = () =\u003e {\n  state.step++;\n};\n\nconst previousStep = () =\u003e {\n  state.step--;\n};\n\nconst submitStep = () =\u003e {\n  console.log(\"Step submitted\");\n};\n\u003c/script\u003e\n```\n\nAny element found in the default slot of the component will be automatically added to the stepper.\nNotice that the steps data prop number coincides with the number of elements in the stepper.\n\nYou can set a default starting point of the component with the step prop. With it you can also control the stepper programmatically.\n\nAny time the actions of the stepper are clicked the events:\n\n- click:next\n- click:previous\n- click:submit\n  Are going to be emitted in by the stepper on click of the respective action.\n\nOne common problem is the customization of the stepper to fit the framework or styles of choice.\nIn that case you can do it by using the CSS variables:\n\n```CSS\n:root {\n  --vue-simple-stepper-primary-color: #c724f0;\n  --vue-simple-stepper-primary-color-contrast: white;\n\n  --vue-simple-stepper-button-hover-color: #b11dd6;\n\n  --vue-simple-stepper-secondary-color: #d8ceda;\n  --vue-simple-stepper-secondary-color-contrast: black;\n\n  --vue-simple-stepper-divider-color: var(--vue-simple-stepper-primary-color);\n  --vue-simple-stepper-divider-color-neutral: var(\n    --vue-simple-stepper-secondary-color\n  );\n}\n```\n\nOr in case you want to further customize the buttons you can overwrite or extend these classes:\n\n```CSS\n.vue-simple-stepper-button {\n  border-radius: 8px;\n  padding: 0.6em 1.2em;\n  border: 0;\n  font-size: 1em;\n  font-weight: 500;\n  font-family: inherit;\n  background-color: var(--vue-simple-stepper-primary-color);\n  cursor: pointer;\n  transition: border-color 0.25s;\n}\n.vue-simple-stepper-button:hover {\n  background-color: var(--vue-simple-stepper-button-hover-color);\n}\n\n.vue-simple-stepper-button--outlined {\n  border: 1px solid var(--vue-simple-stepper-primary-color);\n  color: black;\n  background-color: transparent;\n}\n\n.vue-simple-stepper-button--outlined:hover {\n  background-color: transparent;\n  border-color: var(--vue-simple-stepper-button-hover-color);\n}\n\n.vue-simple-stepper-button:focus,\n.vue-simple-stepper-button:focus-visible {\n  outline: 4px auto -webkit-focus-ring-color;\n}\n```\n\nIn case that you need to overwrite completely the action buttons do it by using the `actions` slot like so:\n\n```vue\n\u003ctemplate\u003e\n  \u003cvue-simple-stepper\n    :steps=\"state.steps\"\n    :step=\"state.step\"\n    @click:next=\"nextStep\"\n    @click:previous=\"previousStep\"\n    @click:submit=\"submitStep\"\n  \u003e\n    \u003cdiv class=\"content first\"\u003easdfasd\u003c/div\u003e\n    \u003cdiv class=\"content second\"\u003easdfasd\u003c/div\u003e\n    \u003cdiv class=\"content third\"\u003easdfasd\u003c/div\u003e\n\n    \u003ctemplate\n      #actions=\"{\n        clickNext,\n        clickPrevious,\n        clickSubmit,\n        isFirstStep,\n        isLastStep,\n      }\"\n    \u003e\n      \u003cdiv\u003e\n        \u003cbutton @click=\"clickPrevious\" v-if=\"!isFirstStep\"\u003ePrevious\u003c/button\u003e\n        \u003cbutton @click=\"clickNext\" v-if=\"!isLastStep\"\u003eNext\u003c/button\u003e\n        \u003cbutton @click=\"clickSubmit\" v-if=\"isLastStep\"\u003eSubmit\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/template\u003e\n  \u003c/vue-simple-stepper\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nimport { reactive } from \"vue\";\n\nimport \"vue-simple-stepper/dist/style.css\";\n\nimport VueSimpleStepper from \"vue-simple-stepper\";\n\nconst state = reactive({\n  steps: [\"Step 1\", \"Step 2\", \"Step 3\"],\n  step: 1,\n});\n\nconst nextStep = () =\u003e {\n  state.step++;\n};\n\nconst previousStep = () =\u003e {\n  state.step--;\n};\n\nconst submitStep = () =\u003e {\n  console.log(\"Step submitted\");\n};\n\u003c/script\u003e\n```\n\n## Props\n\n- `steps`: An array that defines the steps in the stepper. The length of the array determines the number of steps. Default is an empty array.\n- `step`: A number indicating the current step. Starts from 1 and default is 1.\n\n## Events\n\n- `click:next`: Triggered when the next button is clicked.\n- `click:previous`: Triggered when the previous button is clicked.\n- `click:submit`: Triggered when the submit button is clicked.\n\n## Slots\n\n- `actions`: For customizing the action buttons (next, previous, submit) of the stepper.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftauromachian%2Fvue-simple-stepper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftauromachian%2Fvue-simple-stepper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftauromachian%2Fvue-simple-stepper/lists"}