[brandyscarney]

What This Does

Updates the Angular, React, and Vue docs so their code matches what ionic start now generates and what the "Your First App" tutorial repos contain. The starters and tutorial apps now lint with @ionic/eslint-config, format with @ionic/prettier-config, and run end-to-end tests with Playwright instead of Cypress.

New Behavior

• Snippets in "Your First App" and the quickstarts follow the same formatting and lint rules as a newly generated app.
• The testing pages describe the setup the starters actually ship, with the same scripts on every framework.

Changes

• Your First App (Angular, React, Vue):
  • Snippets use the tutorial repos' import order and grouping, import type for type-only imports, and Prettier formatting.
  • Return types added: PhotoService and Tab2Page in Angular, usePhotoGallery in React and Vue.
  • The Camera.getPhoto options have inline comments explaining each one.
  • Fixed a few snippet bugs:
    • Vue step 7 was missing the IonGrid, IonRow, and IonCol imports.
    • React step 2's grid snippet was missing import './Tab2.css'.
    • Vue step 7 now calls deletePhoto() instead of deletePicture().
    • Angular step 5 said photos.service.ts instead of photo.service.ts.
• Angular tutorial: adds the missing tabs.page.ts step that registers the images icon. Without it, the Photos tab showed a blank icon after following the tutorial.
• React tutorial: Date.now() is now new Date().getTime(), which passes the starter's react-hooks/purity rule. The App.tsx snippet shows setupIonicReact().
• React and Vue tutorials: on native, savePicture() passes the data from Filesystem.readFile() straight to Filesystem.writeFile() as string | Blob, like Angular, instead of converting a Blob with .text() (which would save raw bytes as base64).
• Vue tutorial: removed unused icon imports in step 2 and leftover fetch lines in step 4. Step 7 keys photos by file path, like step 2, instead of switching to the index.
• Quickstarts:
  • Starter code snippets match the generated blank starter.
  • Vue's "Build with JavaScript" steps now work with the flat eslint.config.js and the current starter files.
• React testing:
  • The intro says what the CLI sets up.
  • Examples import test/expect from vitest, since the starter doesn't enable globals.
  • The setup page covers installing and configuring Vitest.
  • src/setupTests.ts now imports @testing-library/jest-dom/vitest instead of extend-expect, which jest-dom 6 removed.
  • user-event has its own install step, since starters don't include it.
• Vue testing: CLI-generated apps now use Playwright, not Cypress. The page also lists the test scripts.
• Vue troubleshooting: the vue/no-deprecated-slot-attribute tip now uses eslint.config.js.
• Vue navigation: import type { RouteRecordRaw } and RouteRecordRaw[], matching the quickstart.

Related PRs

Starters (merge before this PR):

• Angular: chore(angular): use Ionic lint and Prettier configs and add Playwright e2e tests starters#1916
• React: chore(react): use Ionic lint and Prettier configs and replace Cypress with Playwright starters#1915
• Vue: chore(vue): use Ionic lint and Prettier configs and replace Cypress with Playwright starters#1917

Tutorial apps (each a stack of five PRs: lint and Prettier, lint fixes, test infrastructure, test coverage, matching the docs):

• Angular:
  • chore(lint): add eslint and prettier with ionic configs and CI workflow tutorial-photo-gallery-angular#105
  • chore(lint): fix lint warnings and fail lint on warnings tutorial-photo-gallery-angular#106
  • chore(test): run unit tests with vitest and add playwright e2e tests tutorial-photo-gallery-angular#108
  • test: cover taking, saving, loading, and deleting photos tutorial-photo-gallery-angular#109
  • refactor: match the Your First App docs tutorial-photo-gallery-angular#112
• React:
  • chore(lint): add eslint and prettier with ionic configs and CI workflow tutorial-photo-gallery-react#72
  • chore(lint): fix lint warnings and fail lint on warnings tutorial-photo-gallery-react#73
  • chore(test): run unit tests with vitest and add playwright e2e tests tutorial-photo-gallery-react#75
  • test: cover taking, saving, loading, and deleting photos tutorial-photo-gallery-react#76
  • refactor: match the Your First App docs tutorial-photo-gallery-react#81
• Vue:
  • chore(lint): add eslint and prettier with ionic configs and CI workflow tutorial-photo-gallery-vue#51
  • chore(lint): fix lint warnings and fail lint on warnings tutorial-photo-gallery-vue#52
  • chore(test): run unit tests with vitest and add playwright e2e tests tutorial-photo-gallery-vue#54
  • test: cover taking, saving, loading, and deleting photos tutorial-photo-gallery-vue#55
  • refactor: match the Your First App docs tutorial-photo-gallery-vue#56

Notes

• Preview: https://ionic-docs-git-fw-7709-ionic1.vercel.app/docs
• Depends on the starters PRs above, which add Playwright and the new lint config. Merge this after them.
• The Angular testing guide rewrite is stacked on this PR in docs(angular): update testing guide for Vitest and Playwright #4806.
• Only the current docs are updated, not versioned_docs.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ionic-docs	Ready	Preview	Oct 26, 2026 3:35pm UTC