- Introduction
- Current Status
- Customize configuration
- Project Setup
- Install
- Development
- Production
- Lint
- Testing
- Unit Tests
- E2E Tests
- Recommended IDE Setup
- Learning Branches
- Resources & Notes
- VTK.js
- ITK-wasm
MIQA Vue is an attempt to rewrite the Vue 2.x UI provided with MIQA in Vue 3.x.
NOTE: This means significant portions of the code base are pulled from the official MIQA repository.
Currently:
- VTK and ITK have been successfully added to and configured for the project.
- A slightly modified version of the code found in the official VTK/Vue tutorial has been implemented.
- A slightly modified version of the Vite ITK-wasm example has been implemented in Vue.
- A modified version of the VTK.js Proxy Manager example is now wired up to display the images that are loaded by ITK-wasm and converted by VTK.js.
This means the basic code/setup for Vue/ITK is operational.
See Vite Configuration Reference.
npm install
npm run dev
npm run build
Lint with ESLint
npm run lint
Run Unit Tests with Vitest
npm run test:unit
Run End-to-End Tests with Playwright
# Install browsers for the first run
npx playwright install
# When testing on CI, must build the project first
npm run build
# Runs the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debug
- VSCode
- Volar (and disable Vetur)
- TypeScript Vue Plugin (Volar).
I'm attempting to implement one feature at a time so you can look at various branches to learn various aspects of how this app works as well as how the technologies it utilizes work - especially ITK-wasm and VTK.js.
add-itk
- Covers the integration of ITM-wasm into the project, which can be a challenge. See the README in that branch for additional details on the issues and how to work around them.add-nii-gz
- Adds a basic implementation of ITK within the Vue app.load-image
- Wired a modified version of the VTK.js ProxyManager example up to the ITK loader/VTK converter, now renders an image.add-pinia
- Refactors project to make use of Pinia, basic implementation.
- The README varies based on the branch one is currently on. Please see the Learning Branches section to learn more about the various branches and what they cover.
- How to Handle State Management in Vue using Pinia
- There seems to be a number of articles covering using Pinia with the options style but very few covering using it with the composition style. This article starts with the options style but then addresses the composition style with some detail.