[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.

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.
  • 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.
• 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 unit testing setup:
  • src/setupTests.ts now imports @testing-library/jest-dom/vitest instead of extend-expect, which jest-dom 6 removed.
  • The file name is now setupTests.ts instead of setupTest.ts.
  • 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 says where unit and e2e tests live and which scripts run them.
• Vue troubleshooting: the vue/no-deprecated-slot-attribute tip now uses eslint.config.js.

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 four PRs: lint and Prettier, lint fixes, test infrastructure, test coverage):

• 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
• 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
• 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

Notes

• Depends on the starters PRs above, which add Playwright and the new lint config. Merge this after them.
• docs/angular/testing.mdx is still outdated (Jasmine and Protractor). It needs its own rewrite in a follow-up PR.
• 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 23, 2026 8:23pm UTC