| # Contributing | |
| Hi! We are really excited that you are interested in contributing to the Vue devtools. Before submitting your contribution, please make sure to take a moment and read through the following guide. | |
| ## Monorepo | |
| The repository is a monorepo with several nested packages: | |
| |Package|Description| | |
| |-------|-----------| | |
| [api](https://github.com/vuejs/devtools/tree/main/packages/api) | The public devtools API that can be installed in Vue plugins | | |
| [app-backend-api](https://github.com/vuejs/devtools/tree/main/packages/app-backend-api) | Abstract API to link the Public API, the core and Vue handlers | | |
| [app-backend-core](https://github.com/vuejs/devtools/tree/main/packages/app-backend-core) | The main logic injected in the page to interact with Vue apps | | |
| [app-backend-vue1](https://github.com/vuejs/devtools/tree/main/packages/app-backend-vue1) | Decoupled handlers to support Vue 1 (soon) | | |
| [app-backend-vue2](https://github.com/vuejs/devtools/tree/main/packages/app-backend-vue2) | Decoupled handlers to support Vue 2 | | |
| [app-backend-vue3](https://github.com/vuejs/devtools/tree/main/packages/app-backend-vue3) | Decoupled handlers to support Vue 3 | | |
| [app-frontend](https://github.com/vuejs/devtools/tree/main/packages/app-frontend) | Vue app displayed in the browser devtools pane | | |
| [shell-chrome](https://github.com/vuejs/devtools/tree/main/packages/shell-chrome) | Chrome/Firefox extension | | |
| [shell-electron](https://github.com/vuejs/devtools/tree/main/packages/shell-electron) | Electron standalone app | | |
| [shell-host](https://github.com/vuejs/devtools/tree/main/packages/shell-host) | Development environment | | |
| [shell-dev-vue2](https://github.com/vuejs/devtools/tree/main/packages/shell-dev-vue2) | Demo app for development (Vue 2) | | |
| [shell-dev-vue3](https://github.com/vuejs/devtools/tree/main/packages/shell-dev-vue3) | Demo app for development (Vue 3) | | |
| ## Development | |
| 1. Clone [this repo](https://github.com/vuejs/devtools) | |
| 2. Run `yarn install` in the repository root to install dependencies. | |
| 3. Run `yarn run build:watch` (compiles and watch the packages) and then `yarn run dev:vue3` (run the development shell) in two different terminals. Wait for the initial compilation in the first terminal to finish before running the second command. | |
| 4. A plain shell with a test app will be available at `http://localhost:8090`. | |
| ## Pull Request Guidelines | |
| Thank you for your code contribution! Before opening a PR, please make sure to read the following: | |
| - Checkout a topic branch from a base branch, e.g. `main`, and merge back against that branch. For example: `feat/my-new-feature`. | |
| - Please make sure that you allow maintainers to push changes to your branch when you create your PR. | |
| - If adding a new feature: | |
| <!-- @TODO Add accompanying test case.--> | |
| - Provide a convincing reason to add this feature. Ideally, you should open a suggestion issue first and have it approved before working on it. | |
| - If fixing bug: | |
| - If you are resolving a special issue, add `(fix #xxxx[,#xxxx])` (#xxxx is the issue id) in your PR title for a better release log, e.g. `fix: update entities encoding/decoding (fix #3899)`. | |
| - Provide a detailed description of the bug in the PR. Live demo preferred. | |
| <!-- @TODO - Add appropriate test coverage if applicable.--> | |
| - It's OK to have multiple small commits as you work on the PR - GitHub can automatically squash them before merging. | |
| <!-- @TODO - Make sure tests pass!--> | |
| - Commit messages must follow the [commit message convention](https://github.com/vuejs/devtools/blob/main/.github/commit-convention.md) so that changelogs can be automatically generated. | |
| ## Running tests | |
| 1. Run `yarn lint` to check code quality with ESLint. | |
| 2. Run `yarn test` to run all tests. (@TODO) | |
| ## Testing as Chrome addon | |
| This is useful when you want to build the extension with the source repo to get not-yet-released features. | |
| 1. Clone this repo | |
| 2. `cd devtools` the newly created folder | |
| 3. run `yarn install` | |
| 4. then run `yarn run build:watch` & `yarn run dev:chrome` in parallel | |
| 5. Open the Chrome extension page (currently under `Menu` > `More Tools` > `Extensions`) | |
| 6. Check "developer mode" on the top-right corner | |
| 7. Click the "load unpacked" button on the left, and choose the folder: `devtools/packages/shell-chrome/` (it will have an orange disk icon) | |
| 8. Make sure you disable all other versions of the extension | |
| ## Testing as Firefox addon | |
| 1. Install `web-ext` | |
| ~~~~ | |
| $ yarn global add web-ext | |
| ~~~~ | |
| Also, make sure `PATH` is set up. Something like this in `~/.bash_profile`: | |
| ~~~~ | |
| $ PATH=$PATH:$(yarn global bin) | |
| ~~~~ | |
| 2. Clone this repo | |
| 3. run `yarn install` | |
| 4. then run `yarn run build:watch` and `yarn run dev:firefox` in parallel | |
| 5. run `yarn run:firefox` | |
| ## Docs development | |
| 1. Clone this repo | |
| 2. `cd devtools` the newly created folder | |
| 3. run `yarn install` | |
| 4. run `docs:dev` | |