vue-step-progress

├── .babelrc ├── .env ├── .eslintrc.js ├── .github └── workflows │ └── main.yml ├── .gitignore ├── CHANGELOG.MD ├── LICENSE ├── README.md ├── demo.gif ├── dev ├── App.vue ├── dev-server.js ├── esm │ ├── index.html │ └── main.js ├── index.js └── views │ └── index.pug ├── docker-compose.dev.yml ├── git-conventional-commits.json ├── package-lock.json ├── package.json ├── source.sh ├── src ├── StepProgress.vue └── index.js ├── start.sh ├── webpack.dev.config.js └── webpack.prod.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | "targets": { 7 | "browsers": ["defaults"] 8 | } 9 | } 10 | ] 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | # node:18-bullseye @ 2022-07-10T19:41:00 2 | DOCKER_NODE_VERSION=@sha256:9029bbd08c882b874961793299a36276cc65f97012161c959e99e80a90055ca0 3 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "parser": "vue-eslint-parser", 3 | "parserOptions": { 4 | "parser": "babel-eslint", 5 | "sourceType": "module", 6 | "allowImportExportEverywhere": false 7 | }, 8 | "plugins": [ 9 | "vue", 10 | "import" 11 | ], 12 | "extends": [ 13 | "eslint:recommended", 14 | "plugin:vue/vue3-recommended", 15 | "plugin:import/errors", 16 | "plugin:import/warnings" 17 | ], 18 | "env": { 19 | "browser": true, 20 | "commonjs": true, 21 | "es6": true, 22 | "node": true 23 | }, 24 | "parserOptions": { 25 | "ecmaVersion": 2017, 26 | "ecmaFeatures": { 27 | "jsx": true 28 | }, 29 | "sourceType": "module" 30 | }, 31 | "rules": { 32 | "no-new": 0, 33 | "indent": [ 34 | "error", 35 | 2 36 | ], 37 | "linebreak-style": [ 38 | "error", 39 | "unix" 40 | ], 41 | "quotes": [ 42 | "error", 43 | "single" 44 | ], 45 | "semi": [ 46 | "error", 47 | "always" 48 | ], 49 | "no-console": [ 50 | "warn" 51 | ] 52 | } 53 | }; 54 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | steps: 10 | - name: checkout repo 11 | uses: actions/checkout@v1 12 | - name: build using docker 13 | run: | 14 | sudo chown -R 1000:1000 . 15 | ./start.sh build 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode 3 | .npmrc 4 | /dist/ 5 | -------------------------------------------------------------------------------- /CHANGELOG.MD: -------------------------------------------------------------------------------- 1 | ## **1.0.2** _{^{2022-09-26 ([d4627c5...e670157](https://github.com/bastidest/vue-step-progress/compare/d4627c5...e670157?diff=split))}} 2 | 3 | ### Bug Fixes 4 | * lowercase external Vue import in UMD webpack build ([d4627c5](https://github.com/bastidest/vue-step-progress/commit/d4627c5)) 5 | 6 | 7 | ## **1.0.2-rc1** _{^{2022-09-26 ([d4627c5...6f2b1f4](https://github.com/bastidest/vue-step-progress/compare/d4627c5...6f2b1f4?diff=split))}} 8 | 9 | ### Bug Fixes 10 | * lowercase external Vue import in UMD webpack build ([d4627c5](https://github.com/bastidest/vue-step-progress/commit/d4627c5)) 11 | 12 | 13 | ## **1.0.1** _{^{2022-07-28 ([8ea63f2...1f8f3e2](https://github.com/bastidest/vue-step-progress/compare/8ea63f2...1f8f3e2?diff=split))}} 14 | 15 | ### Bug Fixes 16 | * resolve vue as external library in prod build ([8ea63f2](https://github.com/bastidest/vue-step-progress/commit/8ea63f2)) 17 | 18 | 19 | ## **1.0.0** _{^{2022-07-28 ([97b9f4d...4a7d486](https://github.com/bastidest/vue-step-progress/compare/97b9f4d...4a7d486?diff=split))}} 20 | 21 | ### Features 22 | * add Vue 3 support (thanks @romanmartushev !) ([69bacbf](https://github.com/bastidest/vue-step-progress/commit/69bacbf)) 23 | 24 | 25 | ### BREAKING CHANGES 26 | * drop Vue 2 support ([69bacbf](https://github.com/bastidest/vue-step-progress/commit/69bacbf)) 27 | 28 | ## **0.3.8** _{^{2022-07-13 ([b6aa69c...b230632](https://github.com/bastidest/vue-step-progress/compare/b6aa69c...b230632?diff=split))}} 29 | 30 | ### Security 31 | * update outdated dev\-dependencies ([a3e6625](https://github.com/bastidest/vue-step-progress/commit/a3e6625)) 32 | 33 | 34 | ## [0.3.7] - 2021-08-15 35 | ### Added 36 | - Build scripts for developing inside docker containers 37 | ### Security 38 | - Update dependencies 39 | 40 | ## [0.3.6] - 2020-12-11 41 | ### Security 42 | - Update dependencies (webpack 5) 43 | 44 | ## [0.3.5] - 2020-08-26 45 | ### Security 46 | - Update vue dependency 47 | - Update dev dependencies 48 | 49 | ## [0.3.4] - 2020-07-18 50 | ### Security 51 | - Update dev dependencies 52 | 53 | ## [0.3.3] - 2020-03-19 54 | ### Added 55 | - Add description of additional props (#5) 56 | ### Security 57 | - Update dependencies 58 | 59 | ## [0.3.2] - 2020-02-24 60 | ### Security 61 | - Update dependencies 62 | - Replace UglifyJSPlugin by TerserPlugin 63 | 64 | ## [0.3.1] - 2019-08-27 65 | ### Security 66 | - Updated dependencies 67 | 68 | ## [0.3.0] - 2019-08-05 69 | ### Added 70 | - Custom CSS variables 71 | ### Security 72 | - Updated dependencies 73 | 74 | ## [0.2.0] - 2018-10-20 75 | ### Fixed 76 | - Rename and fix css classes 77 | 78 | ## [0.1.0] - 2018-03-01 79 | ### Added 80 | - Initial Release 81 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Sebastian Hiebl 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![CI](https://github.com/bastidest/vue-step-progress/workflows/CI/badge.svg) [![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Fbastidest%2Fvue-step-progress.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Fbastidest%2Fvue-step-progress?ref=badge_shield) 2 | # Vue Step Progress Bar 3 | 4 | ## Demo 5 | ![demo gif](./demo.gif) 6 | 7 | ## Installation 8 | 9 | Install the plugin with npm: 10 | ```shell 11 | # Vue 3.x 12 | npm install --save vue-step-progress 13 | 14 | # Vue 2.x 15 | npm install --save vue-step-progress@0 16 | ``` 17 | 18 | ## Usage 19 | ⚠️ The default settings use Font Awesome for the checkmark icon. You can change the css icon class by using the 20 | 'icon-class' prop. 21 | 22 | Add the Library import in the components you want to use the progress bar in: 23 | ```javascript 24 | import StepProgress from 'vue-step-progress'; 25 | 26 | // import the css (OPTIONAL - you can provide your own design) 27 | import 'vue-step-progress/dist/main.css'; 28 | 29 | // ... 30 | // register the component in your Vue instance 31 | components: { 32 | 'step-progress': StepProgress 33 | }, 34 | // ... 35 | ``` 36 | 37 | Put the `step-progress` element into your HTML where you want the Component to appear and pass the `steps` Array Prop 38 | and the `current-step` Number prop. 39 | ```html 40 |

41 | 42 |

43 | ``` 44 | 45 | ## Props 46 | 47 | #### `steps` 48 | 49 | A string array of all steps to be displayed. The Strings will be present as labels in the component. Example: 50 | 51 | ```javascript 52 | ['Step 1', 'Step 2', 'Step 3'] 53 | ``` 54 | 55 | #### `current-step` 56 | 57 | A simple Number prop that defines the index of the active step. Example: 58 | ``` 59 | 2 60 | ``` 61 | 62 | #### `icon-class` 63 | 64 | _Optional_ 65 | 66 | The css class of the checkmark icon. Default: 67 | ``` 68 | fa fa-check 69 | ``` 70 | 71 | #### `active-color` 72 | 73 | _Optional_ 74 | 75 | A String prop that defines the active step color. It is red by default. Example: 76 | ``` 77 | blue 78 | ``` 79 | 80 | #### `passive-color` 81 | 82 | _Optional_ 83 | 84 | A String prop that defines the passive step color. It is gray by default. Example: 85 | ``` 86 | black 87 | ``` 88 | 89 | #### `active-thickness` 90 | 91 | _Optional_ 92 | 93 | A Number prop that defines the active step thickness. It is 5 by default. Example: 94 | ``` 95 | 10 96 | ``` 97 | 98 | #### `passive-thickness` 99 | 100 | _Optional_ 101 | 102 | A Number prop that defines the passive step thickness. It is 5 by default. Example: 103 | ``` 104 | 10 105 | ``` 106 | 107 | #### `line-thickness` 108 | 109 | _Optional_ 110 | 111 | A Number prop that defines the line thickness. It is 12 by default. Example: 112 | ``` 113 | 10 114 | ``` 115 | ## Development 116 | It is recommended to develop and build inside a docker container. `start.sh` is a convenience script to help you with that. 117 | To start a development server, execute: 118 | ```bash 119 | ./start.sh dev-container 120 | ``` 121 | This will setup a new docker container, install npm dependencies and start the development server under http://localhost:3000 122 | 123 | Document all user-visible changes in the "Unreleased" section in `CHANGELOG.MD`. 124 | 125 | ## Publishing (maintainer only) 126 | Create a the `.npmrc` file: 127 | ``` 128 | //registry.npmjs.org/:_authToken= 129 | ``` 130 | 131 | Update package.json version, create tag, create changelog, push, npm publish: 132 | ```bash 133 | ./start.sh publish 134 | ``` 135 | -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bastidest/vue-step-progress/cdcaf1535cf93044b5c3d8ae2c864cfdbbd93b04/demo.gif -------------------------------------------------------------------------------- /dev/App.vue: -------------------------------------------------------------------------------- 1 | 29 | 30 | 56 | 57 | 65 | -------------------------------------------------------------------------------- /dev/dev-server.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const express = require('express'); 3 | const app = express(); 4 | const http = require('http'); 5 | const webpack = require('webpack'); 6 | const webpackMiddleware = require('webpack-dev-middleware'); 7 | 8 | app.set('views', path.resolve(__dirname, 'views')); 9 | app.set('view engine', 'pug'); 10 | 11 | app.use(webpackMiddleware(webpack( 12 | require('../webpack.dev.config.js') 13 | ), { 14 | publicPath: '/dist/' 15 | })); 16 | 17 | app.use('/esm', express.static(path.resolve(__dirname, 'esm'))); 18 | app.use('/dist-static', express.static(path.resolve(__dirname, '../dist'))); 19 | 20 | app.get('/', function (req, res) { 21 | res.render('index'); 22 | }); 23 | 24 | http.createServer(app).listen(3000); 25 | -------------------------------------------------------------------------------- /dev/esm/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | vue-step-progress 10 | 11 | 12 |

13 |

14 | 15 |

16 |

17 |

Thickness:

18 |

Active Step Thickness

19 |

Passive Step Thickness

20 |

21 |

22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /dev/esm/main.js: -------------------------------------------------------------------------------- 1 | const { createApp } = Vue 2 | 3 | createApp({ 4 | name: 'App', 5 | components: { 6 | 'step-progress': StepProgress.default 7 | }, 8 | data() { 9 | return { 10 | steps: [ 11 | 'Learn Vue', 12 | 'Open Source', 13 | '???', 14 | 'Profit' 15 | ], 16 | currentStep: 0, 17 | activeColor: 'red', 18 | passiveColor: 'gray', 19 | lineThickness: 12, 20 | activeThickness: 5, 21 | passiveThickness: 5 22 | }; 23 | } 24 | }).mount('#app') 25 | -------------------------------------------------------------------------------- /dev/index.js: -------------------------------------------------------------------------------- 1 | import {createApp} from 'vue'; 2 | 3 | import App from './App.vue'; 4 | 5 | let app = createApp(App); 6 | app.mount('#app'); 7 | -------------------------------------------------------------------------------- /dev/views/index.pug: -------------------------------------------------------------------------------- 1 | 2 | html(lang="en") 3 | head 4 | meta(charset="UTF-8") 5 | meta(name="viewport", content="width=device-width, initial-scale=1.0") 6 | meta(http-equiv="X-UA-Compatible", content="ie=edge") 7 | link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css") 8 | title vue-step-progress 9 | body 10 | #app 11 | script(src="/dist/bundle.js") -------------------------------------------------------------------------------- /docker-compose.dev.yml: -------------------------------------------------------------------------------- 1 | version: '3.7' 2 | 3 | services: 4 | node: 5 | image: node${DOCKER_NODE_VERSION} 6 | restart: 'never' 7 | ports: 8 | - '3000:3000' 9 | volumes: 10 | - ${DOCKER_PWD}:${DOCKER_PWD} 11 | user: ${DOCKER_USER:?docker user must be provided} 12 | working_dir: ${DOCKER_PWD:?docker pwd must be provided} 13 | -------------------------------------------------------------------------------- /git-conventional-commits.json: -------------------------------------------------------------------------------- 1 | { 2 | "convention" : { 3 | "commitTypes": [ 4 | "feat", 5 | "fix", 6 | "perf", 7 | "refactor", 8 | "style", 9 | "test", 10 | "build", 11 | "ops", 12 | "docs", 13 | "doc", 14 | "security", 15 | "merge", 16 | "revert" 17 | ], 18 | "commitScopes": [], 19 | "releaseTagGlobPattern": "v[0-9].*", 20 | "issueRegexPattern": "(^|\\s)#\\d+(\\s|$)" 21 | }, 22 | 23 | "changelog" : { 24 | "commitTypes": [ 25 | "feat", 26 | "fix", 27 | "perf", 28 | "merge", 29 | "security" 30 | ], 31 | "includeInvalidCommits": true, 32 | "commitIgnoreRegexPattern": "^WIP ", 33 | "headlines": { 34 | "feat": "Features", 35 | "fix": "Bug Fixes", 36 | "perf": "Performance Improvements", 37 | "merge": "Merged Branches", 38 | "security": "Security", 39 | "breakingChange": "BREAKING CHANGES" 40 | }, 41 | 42 | "commitUrl": "https://github.com/bastidest/vue-step-progress/commit/%commit%", 43 | "commitRangeUrl": "https://github.com/bastidest/vue-step-progress/compare/%from%...%to%?diff=split", 44 | "issueUrl": "https://github.com/bastidest/vue-step-progress/issues/%issue%" 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-step-progress", 3 | "version": "1.0.2", 4 | "repository": "bastidest/vue-step-progress", 5 | "description": "A Vue component to display a progressbar with labels", 6 | "main": "./dist/vue-step-progress.min.js", 7 | "scripts": { 8 | "dev": "node ./dev/dev-server.js", 9 | "build": "webpack-cli --progress --config webpack.prod.config.js" 10 | }, 11 | "author": "Basti Destruction ", 12 | "license": "MIT", 13 | "peerDependencies": { 14 | "vue": "3.x" 15 | }, 16 | "files": [ 17 | "/src", 18 | "/dist" 19 | ], 20 | "devDependencies": { 21 | "@babel/core": "^7.12.10", 22 | "@babel/preset-env": "^7.12.10", 23 | "babel-eslint": "^10.1.0", 24 | "babel-loader": "^8.2.2", 25 | "css-loader": "^6.7.1", 26 | "css-minimizer-webpack-plugin": "^4.0.0", 27 | "cssnano": "^5.1.12", 28 | "eslint": "^8.19.0", 29 | "eslint-plugin-vue": "^9.3.0", 30 | "express": "^4.17.1", 31 | "mini-css-extract-plugin": "^2.6.1", 32 | "pug": "^3.0.0", 33 | "pug-plain-loader": "^1.1.0", 34 | "sass": "^1.37.5", 35 | "sass-loader": "^13.0.2", 36 | "style-loader": "^3.3.1", 37 | "vue": "^3.2.37", 38 | "vue-loader": "^17.0.0", 39 | "webpack": "^5.10.0", 40 | "webpack-cli": "^4.2.0", 41 | "webpack-dev-middleware": "^5.3.3" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /source.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | source .env 4 | 5 | export COMPOSE_PROJECT_NAME=vue-step-progress 6 | 7 | export DOCKER_PWD=$(pwd) 8 | export DOCKER_USER="$(id -u):$(id -g)" 9 | 10 | function _docker_cmd() { 11 | local ti_arg="-t" 12 | 13 | # if tty is available also open input 14 | if [ -t 1 ] ; then 15 | ti_arg="${ti_arg}i" 16 | fi 17 | 18 | docker run "$ti_arg" --rm -u "$DOCKER_USER" -v "$(pwd)":"$(pwd)" -w "$(pwd)" "$@" 19 | } 20 | 21 | function _npm() { 22 | _docker_cmd "node${DOCKER_NODE_VERSION}" npm "$@" 23 | } 24 | 25 | function _node() { 26 | _docker_cmd "node${DOCKER_NODE_VERSION}" node "$@" 27 | } 28 | 29 | function _node_run() { 30 | _docker_cmd "node${DOCKER_NODE_VERSION}" "$@" 31 | } 32 | 33 | # if is interactive shell, define aliases 34 | if [[ $- == *i* ]] ; then 35 | alias npm="_npm" 36 | alias node="_node" 37 | fi 38 | -------------------------------------------------------------------------------- /src/StepProgress.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 87 | 88 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import StepProgress from './StepProgress.vue'; 2 | 3 | export default StepProgress; -------------------------------------------------------------------------------- /start.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | set -eo pipefail 3 | 4 | source ./source.sh 5 | 6 | function dev() { 7 | if [ ! -d node_modules ] ; then 8 | _npm install 9 | fi 10 | docker-compose -f docker-compose.dev.yml run --service-ports --rm node npm run dev 11 | } 12 | 13 | function build() { 14 | if [ "$(id -u)" == "0" ] ; then 15 | echo 'warning: trying to build as root user, falling back to user 1000' 16 | export DOCKER_USER='1000:1000' 17 | fi 18 | if [ "$(id -u)" == "1001" ] && [ "$(id -g)" == "121" ] ; then 19 | echo 'warning: trying to build as CI user, falling back to user 1000' 20 | export DOCKER_USER='1000:1000' 21 | fi 22 | docker-compose -f docker-compose.dev.yml run --rm node rm -rf node_modules 23 | docker-compose -f docker-compose.dev.yml run --rm node npm install 24 | docker-compose -f docker-compose.dev.yml run --rm node npm run build 25 | } 26 | 27 | case "${1-}" in 28 | "dev" ) 29 | dev;; 30 | "build" ) 31 | build;; 32 | "release" ) 33 | if [[ ! -f .npmrc ]] ; then 34 | echo "no .npmrc file exists, please create it (//registry.npmjs.org/:_authToken=)" 35 | exit 1 36 | fi 37 | 38 | if ! _npm whoami ; then 39 | echo "you need to be logged into the npm registry before creating a release" 40 | exit 1 41 | fi 42 | 43 | if [[ -n "$2" ]] ; then 44 | VERSION="$2" 45 | else 46 | VERSION=$(git-conventional-commits version) 47 | fi 48 | echo "-- creating release for version ${VERSION}" 49 | 50 | echo "-- patching package{,-lock}.json" 51 | jq ".version=\"${VERSION}\"" package.json > package.json.tmp && mv package.json.tmp package.json 52 | _npm i >/dev/null 53 | 54 | echo "-- building release artifacts" 55 | build 56 | 57 | echo "-- creating release commit" 58 | git commit -am"build(release): bump project version to ${VERSION}" 59 | 60 | echo "-- creating changelog" 61 | git-conventional-commits changelog --release "$VERSION" --file CHANGELOG.MD 62 | 63 | read -r -p "-- changelog ok? [Y/n]" response 64 | response=${response,,} # tolower 65 | if [[ $response =~ ^(no|n) ]] ; then 66 | echo "aborting" 67 | exit 1 68 | fi 69 | 70 | echo "-- creating commit for changelog" 71 | git commit -am"doc(release): create ${VERSION} change log entry" 72 | 73 | echo "-- tagging version" 74 | git tag -a -m"build(release): ${VERSION}" "v${VERSION}" 75 | 76 | read -r -p "-- git push? [Y/n]" response 77 | response=${response,,} # tolower 78 | if [[ $response =~ ^(yes|y| ) ]] || [[ -z $response ]]; then 79 | git push --atomic origin master "v${VERSION}" 80 | fi 81 | 82 | read -r -p "-- npm publish? [Y/n]" response 83 | response=${response,,} # tolower 84 | if [[ $response =~ ^(yes|y| ) ]] || [[ -z $response ]]; then 85 | _npm publish 86 | fi 87 | 88 | echo "-- RELEASE DONE" 89 | ;; 90 | 91 | *) 92 | if [ -z ${1+x} ]; then 93 | echo "no command given" 94 | else 95 | echo "invalid command '${1-}'" 96 | fi 97 | exit 1;; 98 | esac 99 | -------------------------------------------------------------------------------- /webpack.dev.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | const { VueLoaderPlugin } = require('vue-loader'); 5 | 6 | module.exports = { 7 | mode: 'development', 8 | entry: './dev/index.js', 9 | output: { 10 | path: path.resolve('dist') + '/', 11 | publicPath: 'dist', 12 | filename: 'bundle.js' 13 | }, 14 | module: { 15 | rules: [ 16 | { 17 | test: /\.js$/, 18 | exclude: /node_modules/, 19 | loader: 'babel-loader' 20 | }, 21 | { 22 | test: /\.css$/, 23 | use: [ 24 | 'style-loader', 25 | 'css-loader' 26 | ] 27 | }, 28 | { 29 | test: /\.sass$/, 30 | use: [ 31 | 'style-loader', 32 | 'css-loader', 33 | { 34 | loader: 'sass-loader', 35 | options: { 36 | sassOptions: { 37 | indentedSyntax: true 38 | } 39 | } 40 | } 41 | ] 42 | }, 43 | { 44 | test: /\.pug$/, 45 | loader: 'pug-plain-loader' 46 | }, 47 | { 48 | test: /\.vue$/, 49 | loader: 'vue-loader' 50 | } 51 | ], 52 | }, 53 | resolve: { 54 | modules: [ 55 | 'node_modules', 56 | 'vue' 57 | ] 58 | }, 59 | plugins: [ 60 | new VueLoaderPlugin(), 61 | new webpack.DefinePlugin({ 62 | __VUE_OPTIONS_API__: true, 63 | __VUE_PROD_DEVTOOLS__: false, 64 | }), 65 | ], 66 | devtool: 'source-map', 67 | target: 'web' 68 | }; 69 | -------------------------------------------------------------------------------- /webpack.prod.config.js: -------------------------------------------------------------------------------- 1 | const TerserPlugin = require('terser-webpack-plugin'); 2 | const { VueLoaderPlugin } = require('vue-loader'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); 5 | const webpack = require('webpack'); 6 | 7 | module.exports = { 8 | mode: 'production', 9 | entry: './src/index.js', 10 | output: { 11 | filename: 'vue-step-progress.min.js', 12 | library: 'StepProgress', 13 | libraryTarget: 'umd' 14 | }, 15 | optimization: { 16 | minimizer: [ 17 | new TerserPlugin({ 18 | parallel: true, 19 | terserOptions: { 20 | compress: { 21 | drop_console: true, 22 | } 23 | } 24 | }), 25 | new CssMinimizerPlugin(), 26 | ] 27 | }, 28 | module: { 29 | rules: [ 30 | { 31 | test: /\.js$/, 32 | exclude: /node_modules/, 33 | loader: 'babel-loader' 34 | }, 35 | { 36 | test: /\.css$/, 37 | use: [ 38 | MiniCssExtractPlugin.loader, 39 | 'css-loader' 40 | ] 41 | }, 42 | { 43 | test: /\.sass$/, 44 | use: [ 45 | MiniCssExtractPlugin.loader, 46 | 'css-loader', 47 | { 48 | loader: 'sass-loader', 49 | options: { 50 | sassOptions: { 51 | indentedSyntax: true 52 | } 53 | } 54 | } 55 | ] 56 | }, 57 | { 58 | test: /\.pug$/, 59 | loader: 'pug-plain-loader' 60 | }, 61 | { 62 | test: /\.vue$/, 63 | loader: 'vue-loader' 64 | } 65 | ], 66 | }, 67 | externals: { 68 | 'vue': 'vue', 69 | }, 70 | plugins: [ 71 | new VueLoaderPlugin(), 72 | new webpack.DefinePlugin({ 73 | __VUE_OPTIONS_API__: true, 74 | __VUE_PROD_DEVTOOLS__: false, 75 | }), 76 | new MiniCssExtractPlugin(), 77 | ], 78 | devtool: 'source-map', 79 | target: 'web' 80 | }; 81 | --------------------------------------------------------------------------------