From d34ef15bbec10f7880cadfc5a3ff4f4732c6a11a Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Tue, 22 Jul 2025 14:11:55 -0400 Subject: [PATCH 01/19] docs(guide): update framework overview files for consistency --- docs/angular/overview.md | 38 +++++-- docs/index.md | 4 +- docs/react.md | 147 ------------------------- docs/react/overview.md | 60 ++++++++++ docs/vue/overview.md | 38 +++---- sidebars.js | 2 +- static/icons/guide-components-icon.png | Bin 0 -> 6694 bytes 7 files changed, 106 insertions(+), 183 deletions(-) delete mode 100644 docs/react.md create mode 100644 docs/react/overview.md create mode 100644 static/icons/guide-components-icon.png diff --git a/docs/angular/overview.md b/docs/angular/overview.md index 4b1182bb76a..f8f0b4edf05 100644 --- a/docs/angular/overview.md +++ b/docs/angular/overview.md @@ -14,33 +14,47 @@ sidebar_label: Overview import DocsCard from '@components/global/DocsCard'; import DocsCards from '@components/global/DocsCards'; -`@ionic/angular` combines the core Ionic experience with the tooling and APIs that are tailored to Angular Developers. +`@ionic/angular` brings the full power of the Ionic Framework to Angular developers. It offers seamless integration with the Angular ecosystem, so you can build high-quality cross-platform apps using familiar Angular tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities. ## Angular Version Support -Ionic v7 supports Angular v14+. As part of their upgrade strategy, Angular has built-in tooling to help automate upgrades and provide feedback to developers whenever changes to an API occurred. This reduces update friction and keeps the ecosystem in a evergreen state. +Ionic Angular supports the latest versions of Angular. For detailed information on supported versions and our support policy, see the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). ## Angular Tooling -With Ionic 4+, the official Angular stack for building an app and routing are used, so your app can fall in-line with the rest of the great Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps. +Ionic uses the official Angular stack for building apps and routing, so your app can fall in line with the rest of the Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps. + +## Native Tooling + +[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Angular, enabling your apps to run natively on iOS, Android, and the web with a single codebase. + +## Installation + +```shell-session +$ npm install -g @ionic/cli +$ ionic start myApp tabs --type angular + +$ ionic serve █ +``` ## Resources - -

Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.

-
- -

Learn the basics of navigation inside your app with Ionic and Angular Router

+ +

Quickly set up your first Ionic Angular app and learn the basics of the framework and CLI.

+
+ + +

Build a real Photo Gallery app with Ionic Angular and native device features.

- -

Learn about using Ionic lifecycle events in class components and with hooks

+ +

Master navigation in Ionic Angular using Angular Router.

- -

Learn about using Modules or Standalone Components in Ionic.

+ +

Explore Ionic’s rich library of UI components for building beautiful apps.

diff --git a/docs/index.md b/docs/index.md index b49b366f28e..1979dcc7560 100644 --- a/docs/index.md +++ b/docs/index.md @@ -22,7 +22,7 @@ import DocsCards from '@components/global/DocsCards'; -Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.md), [React](react.md), and [Vue](vue/overview.md). +Ionic is an open source UI toolkit for building performant, high-quality mobile apps using web technologies — HTML, CSS, and JavaScript — with integrations for popular frameworks like [Angular](angular/overview.md), [React](react/overview.md), and [Vue](vue/overview.md). Get started building by [installing Ionic](intro/cli.md) or following our [First App Tutorial](intro/next.md#build-your-first-app) to learn the main concepts. @@ -58,7 +58,7 @@ Get started building by [installing Ionic](intro/cli.md) or following our [First ## Overview -Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.md), [React](react.md), or [Vue](vue/overview.md). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics. +Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as [Angular](angular/overview.md), [React](react/overview.md), or [Vue](vue/overview.md). Alternatively, it can be used standalone without any frontend framework using a simple [script include](intro/cdn.md). If you’d like to learn more about Ionic before diving in, we created a video to walk you through the basics. ### One codebase, running everywhere diff --git a/docs/react.md b/docs/react.md deleted file mode 100644 index 9c08d456016..00000000000 --- a/docs/react.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Ionic React -sidebar_label: Overview -hide_title: true -hide_table_of_contents: true ---- - -import PageStyles from '@components/page/react/PageStyles'; - -import DocsCard from '@components/global/DocsCard'; -import DocsCards from '@components/global/DocsCards'; - - - Create an Ionic React App: Framework and Documentation - - - - - -
-
-

One Codebase
Any Platform
Just React

- -- ✓ 100+ mobile optimized React UI components -- ✓ Standard React tooling with react-dom -- ✓ iOS / Android / Electron / PWA - -[Get Started](#installation) - -
- -
- -
-
- -### Build awesome apps across mobile and web, with the React you know and love. - -Ionic React is native React version of Ionic Framework, the free, open source SDK powering millions of mission-critical apps all over the world. - -It's everything you need to ship award-winning apps for any platform, with React. - -
- -
- -## Amazing Design - -Choose from over 100 beautiful, mobile-ready UI components, animations, and gestures, lightweight and customized to fit your brand. - -[Explore UI components](/docs/components) - -
- -
- -
- -
- -
- -
- -## Familiar tooling - -Ionic React projects are just like React projects, leveraging [react-dom](https://react.dev/reference/react-dom) and with setup normally found in a [Create React App (CRA)](https://github.com/facebook/create-react-app) app. For [routing and navigation](/docs/react/navigation), React Router is used under the hood. -Compatible with React version 16.8 and above. - -
- -
- -
- -
- -
- -
- -## More than mobile - -Deploy your Ionic React projects to native iOS, Android, Electron, and the web as a Progressive Web App, using [Capacitor](https://capacitorjs.com), a modern native runtime. All with one shared codebase. - -
- -
- -
- -
- -
- -
- -## Just React - -At the end of the day, it's just React. Ionic React uses open web standards and built-in browser capabilities, so it's compatible with any of the millions of web libraries out there. - -
- -
- -
- -
- -## Installation - -```shell-session -$ npm install -g @ionic/cli -$ ionic start myApp tabs --type react - -$ ionic serve █ -``` - -## Resources - - - -

Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.

-
- - -

Use individual components or the complete app experience.

-
- - -

Learn the basics of navigation inside your app with Ionic and React Router

-
- - -

Learn about using Ionic lifecycle events in class components and with hooks

-
- -
- -
diff --git a/docs/react/overview.md b/docs/react/overview.md new file mode 100644 index 00000000000..3a5082bccda --- /dev/null +++ b/docs/react/overview.md @@ -0,0 +1,60 @@ +--- +title: 'Ionic React Overview' +sidebar_label: Overview +--- + + + Ionic React Overview | React Version Support and Tooling + + + +import DocsCard from '@components/global/DocsCard'; +import DocsCards from '@components/global/DocsCards'; + +`@ionic/react` brings the full power of the Ionic Framework to React developers. It offers seamless integration with the React ecosystem, so you can build high-quality cross-platform apps using familiar React tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities. + +## React Version Support + +Ionic React supports the latest versions of React. For detailed information on supported versions and our support policy, see the [Ionic React Support Policy](/docs/reference/support#ionic-react). + +## React Tooling + +Ionic React works seamlessly with the React CLI and popular React tooling. You can use your favorite libraries for state management, testing, and more. Ionic React is designed to fit naturally into the React ecosystem, so you can use tools like Create React App, Vite, or Next.js to scaffold and build your apps. + +## Native Tooling + +[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Angular, enabling your apps to run natively on iOS, Android, and the web with a single codebase. + +## Installation + +```shell-session +$ npm install -g @ionic/cli +$ ionic start myApp tabs --type react + +$ ionic serve █ +``` + +## Resources + + + + +

Quickly set up your first Ionic React app and learn the basics of the framework and CLI.

+
+ + +

Build a real Photo Gallery app with Ionic React and native device features.

+
+ + +

Master navigation in Ionic React using React Router.

+
+ + +

Explore Ionic’s rich library of UI components for building beautiful apps.

+
+ +
diff --git a/docs/vue/overview.md b/docs/vue/overview.md index 045cb75b123..16fb55ef155 100644 --- a/docs/vue/overview.md +++ b/docs/vue/overview.md @@ -14,30 +14,21 @@ sidebar_label: Overview import DocsCard from '@components/global/DocsCard'; import DocsCards from '@components/global/DocsCards'; -`@ionic/vue` combines the core Ionic Framework experience with the tooling and APIs that are tailored to Vue Developers. +`@ionic/vue` brings the full power of the Ionic Framework to Vue developers. It offers seamless integration with the Vue ecosystem, so you can build high-quality cross-platform apps using familiar Vue tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities. ## Vue Version Support -Ionic Vue is built on top of Vue 3.0.0. If you've built an app with early versions of Ionic Vue, you'll want to upgrade to the latest release and upgrade your Vue dependencies. +Ionic Vue supports the latest versions of Vue. For detailed information on supported versions and our support policy, see the [Ionic Vue Support Policy](/docs/reference/support#ionic-vue). ## Vue Tooling -Ionic Vue projects ship with the same tooling as regular Vue CLI projects. Meaning you'll be building with the Vue CLI and all of it's features. In addition, starter projects also ship with few features enabled by default, like Routing and TypeScript support. +Ionic Vue projects use the same tooling as standard Vue CLI projects, so you can take advantage of the full Vue CLI feature set for building, testing, and deploying your apps. Starter projects come with useful features enabled by default, such as Vue Router for navigation and TypeScript support for type safety and improved developer experience. ## Native Tooling -[Capacitor](https://capacitorjs.com) is the official cross-platform app runtime used to make your `Ionic Vue` web app run natively on iOS, Android, and the web. +[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Vue, enabling your apps to run natively on iOS, Android, and the web with a single codebase. -While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.md) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova). - -## From the Community - - - -- [Using Vue.js with Ionic & Capacitor](https://dev.to/aaronksaunders/using-vue-js-v3-beta-with-ionic-components-capacitor-plugins-2b6f) - Aaron Saunders -- [Building Mobile Apps With Vue3 and Ionic](https://soshace.com/building-mobile-apps-with-vue3-and-ionic/) - Oluwaseun Raphael Afolayan - - +While you can use many [Cordova](https://cordova.apache.org/) plugins with Ionic Vue, Capacitor is the recommended and fully supported solution. The [Ionic CLI](../cli.md) does not provide official Cordova integration for Ionic Vue projects. For more information on using Cordova plugins with Capacitor, see the [Capacitor documentation](https://capacitorjs.com/docs/cordova). ## Installation @@ -51,16 +42,21 @@ $ ionic serve █ ## Resources - -

Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.

-
- -

Learn the basics of navigation inside your app with Ionic and Vue Router

+ +

Quickly set up your first Ionic Vue app and learn the basics of the framework and CLI.

+
+ + +

Build a real Photo Gallery app with Ionic Vue and native device features.

+
+ + +

Master navigation in Ionic Vue using Vue Router.

- -

Learn about using Ionic lifecycle events in class components and with hooks

+ +

Explore Ionic’s rich library of UI components for building beautiful apps.

diff --git a/sidebars.js b/sidebars.js index bbcc8f72b49..fc29945182c 100644 --- a/sidebars.js +++ b/sidebars.js @@ -99,7 +99,7 @@ module.exports = { label: 'React', collapsed: false, items: [ - 'react', + 'react/overview', 'react/quickstart', { type: 'category', diff --git a/static/icons/guide-components-icon.png b/static/icons/guide-components-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..364e38c150f55646f85d4aae7718b6da75aa9fc6 GIT binary patch literal 6694 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 literal 0 HcmV?d00001 From a8addf38dd211e5b6b3b34a6e5e4bc5af4d155b8 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Tue, 22 Jul 2025 15:04:48 -0400 Subject: [PATCH 02/19] chore(vercel): add redirects for framework slugs to their overview --- vercel.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/vercel.json b/vercel.json index 5ea8e94a238..d484f17b271 100644 --- a/vercel.json +++ b/vercel.json @@ -1,6 +1,10 @@ { "redirects": [ { "source": "/", "destination": "/docs" }, + { + "source": "/docs/angular", + "destination": "/docs/angular/overview" + }, { "source": "/docs/angular/your-first-app/2-taking-photos", "destination": "/docs/angular/your-first-app/taking-photos" @@ -36,6 +40,10 @@ }, { "source": "/docs/next/:match*", "destination": "/docs/:match*" }, { "source": "/docs/v8/:match*", "destination": "/docs/:match*" }, + { + "source": "/docs/react", + "destination": "/docs/react/overview" + }, { "source": "/docs/react/your-first-app/2-taking-photos", "destination": "/docs/react/your-first-app/taking-photos" @@ -57,6 +65,10 @@ "destination": "/docs/react/your-first-app/deploying-mobile" }, { "source": "/docs/react/your-first-app/7-live-reload", "destination": "/docs/react/your-first-app/live-reload" }, + { + "source": "/docs/vue", + "destination": "/docs/vue/overview" + }, { "source": "/docs/vue/your-first-app/2-taking-photos", "destination": "/docs/vue/your-first-app/taking-photos" }, { "source": "/docs/vue/your-first-app/3-saving-photos", "destination": "/docs/vue/your-first-app/saving-photos" }, { "source": "/docs/vue/your-first-app/4-loading-photos", "destination": "/docs/vue/your-first-app/loading-photos" }, From aa8c2e6d1d67ca2764d79628f63a07e4b1e64126 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Tue, 22 Jul 2025 17:25:39 -0400 Subject: [PATCH 03/19] fix(icons): update components icon --- static/icons/guide-components-icon.png | Bin 6694 -> 6768 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/static/icons/guide-components-icon.png b/static/icons/guide-components-icon.png index 364e38c150f55646f85d4aae7718b6da75aa9fc6..3d7e0cb8883333eadf0024b0494c62aebf8892bc 100644 GIT binary patch delta 6742 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 delta 6668 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 W;KU9`T_XSh002ovP6b4+LSTY25MtW^ From 05f6530af56c5022f8d0ef0acd9e8081155022b6 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Wed, 23 Jul 2025 09:42:41 -0400 Subject: [PATCH 04/19] docs(guide): update versioned overviews for angular and vue --- docs/angular/overview.md | 4 +- docs/vue/overview.md | 2 +- versioned_docs/version-v6/angular/overview.md | 38 ++++++++++++++----- versioned_docs/version-v6/vue/overview.md | 38 +++++++++---------- versioned_docs/version-v7/angular/overview.md | 38 +++++++++++++------ versioned_docs/version-v7/vue/overview.md | 38 +++++++++---------- 6 files changed, 91 insertions(+), 67 deletions(-) diff --git a/docs/angular/overview.md b/docs/angular/overview.md index f8f0b4edf05..65ab06a7c78 100644 --- a/docs/angular/overview.md +++ b/docs/angular/overview.md @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; ## Angular Version Support -Ionic Angular supports the latest versions of Angular. For detailed information on supported versions and our support policy, see the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). +Ionic Angular v8 supports Angular versions 16 and above. For detailed information on supported versions and our support policy, see the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). ## Angular Tooling @@ -54,7 +54,7 @@ $ ionic serve █ -

Explore Ionic’s rich library of UI components for building beautiful apps.

+

Explore Ionic's rich library of UI components for building beautiful apps.

diff --git a/docs/vue/overview.md b/docs/vue/overview.md index 16fb55ef155..1f4a53b16b3 100644 --- a/docs/vue/overview.md +++ b/docs/vue/overview.md @@ -18,7 +18,7 @@ import DocsCards from '@components/global/DocsCards'; ## Vue Version Support -Ionic Vue supports the latest versions of Vue. For detailed information on supported versions and our support policy, see the [Ionic Vue Support Policy](/docs/reference/support#ionic-vue). +Ionic Vue v8 supports Vue 3.x. For detailed information on supported versions and our support policy, see the [Ionic Vue Support Policy](/docs/reference/support#ionic-vue). ## Vue Tooling diff --git a/versioned_docs/version-v6/angular/overview.md b/versioned_docs/version-v6/angular/overview.md index b457d1c402b..4d5960c0790 100644 --- a/versioned_docs/version-v6/angular/overview.md +++ b/versioned_docs/version-v6/angular/overview.md @@ -14,29 +14,47 @@ sidebar_label: Overview import DocsCard from '@components/global/DocsCard'; import DocsCards from '@components/global/DocsCards'; -`@ionic/angular` combines the core Ionic experience with the tooling and APIs that are tailored to Angular Developers. +`@ionic/angular` brings the full power of the Ionic Framework to Angular developers. It offers seamless integration with the Angular ecosystem, so you can build high-quality cross-platform apps using familiar Angular tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities. ## Angular Version Support -Ionic v6 supports Angular v12-v15. As part of their upgrade strategy, Angular has built-in tooling to help automate upgrades and provide feedback to developers whenever changes to an API occurred. This reduces update friction and keeps the ecosystem in a evergreen state. +Ionic Angular v6 supports Angular versions 12 through 15. For detailed information on supported versions and our support policy, see the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). ## Angular Tooling -With Ionic 4+, the official Angular stack for building an app and routing are used, so your app can fall in-line with the rest of the great Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps. +Ionic uses the official Angular stack for building apps and routing, so your app can fall in line with the rest of the Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps. + +## Native Tooling + +[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Angular, enabling your apps to run natively on iOS, Android, and the web with a single codebase. + +## Installation + +```shell-session +$ npm install -g @ionic/cli +$ ionic start myApp tabs --type angular + +$ ionic serve █ +``` ## Resources - -

Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.

-
- -

Learn the basics of navigation inside your app with Ionic and Angular Router

+ +

Quickly set up your first Ionic Angular app and learn the basics of the framework and CLI.

+
+ + +

Build a real Photo Gallery app with Ionic Angular and native device features.

+
+ + +

Master navigation in Ionic Angular using Angular Router.

- -

Learn about using Ionic lifecycle events in class components and with hooks

+ +

Explore Ionic's rich library of UI components for building beautiful apps.

diff --git a/versioned_docs/version-v6/vue/overview.md b/versioned_docs/version-v6/vue/overview.md index 045cb75b123..745975878e2 100644 --- a/versioned_docs/version-v6/vue/overview.md +++ b/versioned_docs/version-v6/vue/overview.md @@ -14,30 +14,21 @@ sidebar_label: Overview import DocsCard from '@components/global/DocsCard'; import DocsCards from '@components/global/DocsCards'; -`@ionic/vue` combines the core Ionic Framework experience with the tooling and APIs that are tailored to Vue Developers. +`@ionic/vue` brings the full power of the Ionic Framework to Vue developers. It offers seamless integration with the Vue ecosystem, so you can build high-quality cross-platform apps using familiar Vue tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities. ## Vue Version Support -Ionic Vue is built on top of Vue 3.0.0. If you've built an app with early versions of Ionic Vue, you'll want to upgrade to the latest release and upgrade your Vue dependencies. +Ionic Vue v6 supports Vue 3.x. For detailed information on supported versions and our support policy, see the [Ionic Vue Support Policy](/docs/reference/support#ionic-vue). ## Vue Tooling -Ionic Vue projects ship with the same tooling as regular Vue CLI projects. Meaning you'll be building with the Vue CLI and all of it's features. In addition, starter projects also ship with few features enabled by default, like Routing and TypeScript support. +Ionic Vue projects use the same tooling as standard Vue CLI projects, so you can take advantage of the full Vue CLI feature set for building, testing, and deploying your apps. Starter projects come with useful features enabled by default, such as Vue Router for navigation and TypeScript support for type safety and improved developer experience. ## Native Tooling -[Capacitor](https://capacitorjs.com) is the official cross-platform app runtime used to make your `Ionic Vue` web app run natively on iOS, Android, and the web. +[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Vue, enabling your apps to run natively on iOS, Android, and the web with a single codebase. -While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.md) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova). - -## From the Community - - - -- [Using Vue.js with Ionic & Capacitor](https://dev.to/aaronksaunders/using-vue-js-v3-beta-with-ionic-components-capacitor-plugins-2b6f) - Aaron Saunders -- [Building Mobile Apps With Vue3 and Ionic](https://soshace.com/building-mobile-apps-with-vue3-and-ionic/) - Oluwaseun Raphael Afolayan - - +While you can use many [Cordova](https://cordova.apache.org/) plugins with Ionic Vue, Capacitor is the recommended and fully supported solution. The [Ionic CLI](../cli.md) does not provide official Cordova integration for Ionic Vue projects. For more information on using Cordova plugins with Capacitor, see the [Capacitor documentation](https://capacitorjs.com/docs/cordova). ## Installation @@ -51,16 +42,21 @@ $ ionic serve █ ## Resources - -

Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.

-
- -

Learn the basics of navigation inside your app with Ionic and Vue Router

+ +

Quickly set up your first Ionic Vue app and learn the basics of the framework and CLI.

+
+ + +

Build a real Photo Gallery app with Ionic Vue and native device features.

+
+ + +

Master navigation in Ionic Vue using Vue Router.

- -

Learn about using Ionic lifecycle events in class components and with hooks

+ +

Explore Ionic’s rich library of UI components for building beautiful apps.

diff --git a/versioned_docs/version-v7/angular/overview.md b/versioned_docs/version-v7/angular/overview.md index 4b1182bb76a..a23249aa7c8 100644 --- a/versioned_docs/version-v7/angular/overview.md +++ b/versioned_docs/version-v7/angular/overview.md @@ -14,33 +14,47 @@ sidebar_label: Overview import DocsCard from '@components/global/DocsCard'; import DocsCards from '@components/global/DocsCards'; -`@ionic/angular` combines the core Ionic experience with the tooling and APIs that are tailored to Angular Developers. +`@ionic/angular` brings the full power of the Ionic Framework to Angular developers. It offers seamless integration with the Angular ecosystem, so you can build high-quality cross-platform apps using familiar Angular tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities. ## Angular Version Support -Ionic v7 supports Angular v14+. As part of their upgrade strategy, Angular has built-in tooling to help automate upgrades and provide feedback to developers whenever changes to an API occurred. This reduces update friction and keeps the ecosystem in a evergreen state. +Ionic Angular v7 supports Angular versions 14 through 17. For detailed information on supported versions and our support policy, see the [Ionic Angular Support Policy](/docs/reference/support#ionic-angular). ## Angular Tooling -With Ionic 4+, the official Angular stack for building an app and routing are used, so your app can fall in-line with the rest of the great Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps. +Ionic uses the official Angular stack for building apps and routing, so your app can fall in line with the rest of the Angular ecosystem. In cases where more opinionated features are needed, Ionic provides `@ionic/angular-toolkit`, which builds and integrates with the [official Angular CLI](https://angular.io/cli) and provides features that are specific to `@ionic/angular` apps. + +## Native Tooling + +[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Angular, enabling your apps to run natively on iOS, Android, and the web with a single codebase. + +## Installation + +```shell-session +$ npm install -g @ionic/cli +$ ionic start myApp tabs --type angular + +$ ionic serve █ +``` ## Resources - -

Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.

-
- -

Learn the basics of navigation inside your app with Ionic and Angular Router

+ +

Quickly set up your first Ionic Angular app and learn the basics of the framework and CLI.

+
+ + +

Build a real Photo Gallery app with Ionic Angular and native device features.

- -

Learn about using Ionic lifecycle events in class components and with hooks

+ +

Master navigation in Ionic Angular using Angular Router.

- -

Learn about using Modules or Standalone Components in Ionic.

+ +

Explore Ionic's rich library of UI components for building beautiful apps.

diff --git a/versioned_docs/version-v7/vue/overview.md b/versioned_docs/version-v7/vue/overview.md index 045cb75b123..2a231e8520c 100644 --- a/versioned_docs/version-v7/vue/overview.md +++ b/versioned_docs/version-v7/vue/overview.md @@ -14,30 +14,21 @@ sidebar_label: Overview import DocsCard from '@components/global/DocsCard'; import DocsCards from '@components/global/DocsCards'; -`@ionic/vue` combines the core Ionic Framework experience with the tooling and APIs that are tailored to Vue Developers. +`@ionic/vue` brings the full power of the Ionic Framework to Vue developers. It offers seamless integration with the Vue ecosystem, so you can build high-quality cross-platform apps using familiar Vue tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities. ## Vue Version Support -Ionic Vue is built on top of Vue 3.0.0. If you've built an app with early versions of Ionic Vue, you'll want to upgrade to the latest release and upgrade your Vue dependencies. +Ionic Vue v7 supports Vue 3.x. For detailed information on supported versions and our support policy, see the [Ionic Vue Support Policy](/docs/reference/support#ionic-vue). ## Vue Tooling -Ionic Vue projects ship with the same tooling as regular Vue CLI projects. Meaning you'll be building with the Vue CLI and all of it's features. In addition, starter projects also ship with few features enabled by default, like Routing and TypeScript support. +Ionic Vue projects use the same tooling as standard Vue CLI projects, so you can take advantage of the full Vue CLI feature set for building, testing, and deploying your apps. Starter projects come with useful features enabled by default, such as Vue Router for navigation and TypeScript support for type safety and improved developer experience. ## Native Tooling -[Capacitor](https://capacitorjs.com) is the official cross-platform app runtime used to make your `Ionic Vue` web app run natively on iOS, Android, and the web. +[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Vue, enabling your apps to run natively on iOS, Android, and the web with a single codebase. -While there are no known technical limitations to using `Ionic Vue` with [Cordova](https://cordova.apache.org/) plugins, Capacitor is officially recommended. There are no plans to support a Cordova integration for `Ionic Vue` in the [Ionic CLI tooling](../cli.md) at this time. For more details, please [see here](https://capacitorjs.com/docs/cordova). - -## From the Community - - - -- [Using Vue.js with Ionic & Capacitor](https://dev.to/aaronksaunders/using-vue-js-v3-beta-with-ionic-components-capacitor-plugins-2b6f) - Aaron Saunders -- [Building Mobile Apps With Vue3 and Ionic](https://soshace.com/building-mobile-apps-with-vue3-and-ionic/) - Oluwaseun Raphael Afolayan - - +While you can use many [Cordova](https://cordova.apache.org/) plugins with Ionic Vue, Capacitor is the recommended and fully supported solution. The [Ionic CLI](../cli.md) does not provide official Cordova integration for Ionic Vue projects. For more information on using Cordova plugins with Capacitor, see the [Capacitor documentation](https://capacitorjs.com/docs/cordova). ## Installation @@ -51,16 +42,21 @@ $ ionic serve █ ## Resources - -

Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.

-
- -

Learn the basics of navigation inside your app with Ionic and Vue Router

+ +

Quickly set up your first Ionic Vue app and learn the basics of the framework and CLI.

+
+ + +

Build a real Photo Gallery app with Ionic Vue and native device features.

+
+ + +

Master navigation in Ionic Vue using Vue Router.

- -

Learn about using Ionic lifecycle events in class components and with hooks

+ +

Explore Ionic’s rich library of UI components for building beautiful apps.

From 7535b26418961335ca735c36cb9b73ccc524c4f1 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Wed, 23 Jul 2025 09:54:14 -0400 Subject: [PATCH 05/19] docs(guide): update versioned overviews for react --- versioned_docs/version-v6/react.md | 147 -------------------- versioned_docs/version-v6/react/overview.md | 60 ++++++++ versioned_docs/version-v7/react.md | 147 -------------------- versioned_docs/version-v7/react/overview.md | 60 ++++++++ versioned_sidebars/version-v6-sidebars.json | 2 +- versioned_sidebars/version-v7-sidebars.json | 2 +- 6 files changed, 122 insertions(+), 296 deletions(-) delete mode 100644 versioned_docs/version-v6/react.md create mode 100644 versioned_docs/version-v6/react/overview.md delete mode 100644 versioned_docs/version-v7/react.md create mode 100644 versioned_docs/version-v7/react/overview.md diff --git a/versioned_docs/version-v6/react.md b/versioned_docs/version-v6/react.md deleted file mode 100644 index 38f187d4545..00000000000 --- a/versioned_docs/version-v6/react.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Ionic React -sidebar_label: Overview -hide_title: true -hide_table_of_contents: true ---- - -import PageStyles from '@components/page/react/PageStyles'; - -import DocsCard from '@components/global/DocsCard'; -import DocsCards from '@components/global/DocsCards'; - - - Create an Ionic React App: Framework and Documentation - - - - - -
-
-

One Codebase
Any Platform
Just React

- -- ✓ 100+ mobile optimized React UI components -- ✓ Standard React tooling with react-dom -- ✓ iOS / Android / Electron / PWA - -[Get Started](#installation) - -
- -
- -
-
- -### Build awesome apps across mobile, desktop, and web, with the React you know and love. - -Ionic React is native React version of Ionic Framework, the free, open source SDK powering millions of mission-critical apps all over the world. - -It's everything you need to ship award-winning apps for any platform, with React. - -
- -
- -## Amazing Design - -Choose from over 100 beautiful, mobile-ready UI components, animations, and gestures, lightweight and customized to fit your brand. - -[Explore UI components](/docs/components) - -
- -
- -
- -
- -
- -
- -## Familiar tooling - -Ionic React projects are just like React projects, leveraging [react-dom](https://reactjs.org/docs/react-dom.html) and with setup normally found in a [Create React App (CRA)](https://github.com/facebook/create-react-app) app. For [routing and navigation](/docs/react/navigation), React Router is used under the hood. -Compatible with React version 16.8 and above. - -
- -
- -
- -
- -
- -
- -## More than mobile - -Deploy your Ionic React projects to native iOS, Android, Electron, and the web as a Progressive Web App, using [Capacitor](https://capacitorjs.com), a modern native runtime. All with one shared codebase. - -
- -
- -
- -
- -
- -
- -## Just React - -At the end of the day, it's just React. Ionic React uses open web standards and built-in browser capabilities, so it's compatible with any of the millions of web libraries out there. - -
- -
- -
- -
- -## Installation - -```shell-session -$ npm install -g @ionic/cli -$ ionic start myApp tabs --type react - -$ ionic serve █ -``` - -## Resources - - - -

Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.

-
- - -

Use individual components or the complete app experience.

-
- - -

Learn the basics of navigation inside your app with Ionic and React Router

-
- - -

Learn about using Ionic lifecycle events in class components and with hooks

-
- -
- -
diff --git a/versioned_docs/version-v6/react/overview.md b/versioned_docs/version-v6/react/overview.md new file mode 100644 index 00000000000..3a5082bccda --- /dev/null +++ b/versioned_docs/version-v6/react/overview.md @@ -0,0 +1,60 @@ +--- +title: 'Ionic React Overview' +sidebar_label: Overview +--- + + + Ionic React Overview | React Version Support and Tooling + + + +import DocsCard from '@components/global/DocsCard'; +import DocsCards from '@components/global/DocsCards'; + +`@ionic/react` brings the full power of the Ionic Framework to React developers. It offers seamless integration with the React ecosystem, so you can build high-quality cross-platform apps using familiar React tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities. + +## React Version Support + +Ionic React supports the latest versions of React. For detailed information on supported versions and our support policy, see the [Ionic React Support Policy](/docs/reference/support#ionic-react). + +## React Tooling + +Ionic React works seamlessly with the React CLI and popular React tooling. You can use your favorite libraries for state management, testing, and more. Ionic React is designed to fit naturally into the React ecosystem, so you can use tools like Create React App, Vite, or Next.js to scaffold and build your apps. + +## Native Tooling + +[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Angular, enabling your apps to run natively on iOS, Android, and the web with a single codebase. + +## Installation + +```shell-session +$ npm install -g @ionic/cli +$ ionic start myApp tabs --type react + +$ ionic serve █ +``` + +## Resources + + + + +

Quickly set up your first Ionic React app and learn the basics of the framework and CLI.

+
+ + +

Build a real Photo Gallery app with Ionic React and native device features.

+
+ + +

Master navigation in Ionic React using React Router.

+
+ + +

Explore Ionic’s rich library of UI components for building beautiful apps.

+
+ +
diff --git a/versioned_docs/version-v7/react.md b/versioned_docs/version-v7/react.md deleted file mode 100644 index 82da9dfb8be..00000000000 --- a/versioned_docs/version-v7/react.md +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: Ionic React -sidebar_label: Overview -hide_title: true -hide_table_of_contents: true ---- - -import PageStyles from '@components/page/react/PageStyles'; - -import DocsCard from '@components/global/DocsCard'; -import DocsCards from '@components/global/DocsCards'; - - - Create an Ionic React App: Framework and Documentation - - - - - -
-
-

One Codebase
Any Platform
Just React

- -- ✓ 100+ mobile optimized React UI components -- ✓ Standard React tooling with react-dom -- ✓ iOS / Android / Electron / PWA - -[Get Started](#installation) - -
- -
- -
-
- -### Build awesome apps across mobile, desktop, and web, with the React you know and love. - -Ionic React is native React version of Ionic Framework, the free, open source SDK powering millions of mission-critical apps all over the world. - -It's everything you need to ship award-winning apps for any platform, with React. - -
- -
- -## Amazing Design - -Choose from over 100 beautiful, mobile-ready UI components, animations, and gestures, lightweight and customized to fit your brand. - -[Explore UI components](/docs/components) - -
- -
- -
- -
- -
- -
- -## Familiar tooling - -Ionic React projects are just like React projects, leveraging [react-dom](https://reactjs.org/docs/react-dom.html) and with setup normally found in a [Create React App (CRA)](https://github.com/facebook/create-react-app) app. For [routing and navigation](/docs/react/navigation), React Router is used under the hood. -Compatible with React version 16.8 and above. - -
- -
- -
- -
- -
- -
- -## More than mobile - -Deploy your Ionic React projects to native iOS, Android, Electron, and the web as a Progressive Web App, using [Capacitor](https://capacitorjs.com), a modern native runtime. All with one shared codebase. - -
- -
- -
- -
- -
- -
- -## Just React - -At the end of the day, it's just React. Ionic React uses open web standards and built-in browser capabilities, so it's compatible with any of the millions of web libraries out there. - -
- -
- -
- -
- -## Installation - -```shell-session -$ npm install -g @ionic/cli -$ ionic start myApp tabs --type react - -$ ionic serve █ -``` - -## Resources - - - -

Learn the fundamentals you need to know to start building amazing apps with Ionic Framework.

-
- - -

Use individual components or the complete app experience.

-
- - -

Learn the basics of navigation inside your app with Ionic and React Router

-
- - -

Learn about using Ionic lifecycle events in class components and with hooks

-
- -
- -
diff --git a/versioned_docs/version-v7/react/overview.md b/versioned_docs/version-v7/react/overview.md new file mode 100644 index 00000000000..3a5082bccda --- /dev/null +++ b/versioned_docs/version-v7/react/overview.md @@ -0,0 +1,60 @@ +--- +title: 'Ionic React Overview' +sidebar_label: Overview +--- + + + Ionic React Overview | React Version Support and Tooling + + + +import DocsCard from '@components/global/DocsCard'; +import DocsCards from '@components/global/DocsCards'; + +`@ionic/react` brings the full power of the Ionic Framework to React developers. It offers seamless integration with the React ecosystem, so you can build high-quality cross-platform apps using familiar React tools, components, and best practices. You also get access to Ionic's extensive UI library and native capabilities. + +## React Version Support + +Ionic React supports the latest versions of React. For detailed information on supported versions and our support policy, see the [Ionic React Support Policy](/docs/reference/support#ionic-react). + +## React Tooling + +Ionic React works seamlessly with the React CLI and popular React tooling. You can use your favorite libraries for state management, testing, and more. Ionic React is designed to fit naturally into the React ecosystem, so you can use tools like Create React App, Vite, or Next.js to scaffold and build your apps. + +## Native Tooling + +[Capacitor](https://capacitorjs.com) is the official cross-platform runtime for Ionic Angular, enabling your apps to run natively on iOS, Android, and the web with a single codebase. + +## Installation + +```shell-session +$ npm install -g @ionic/cli +$ ionic start myApp tabs --type react + +$ ionic serve █ +``` + +## Resources + + + + +

Quickly set up your first Ionic React app and learn the basics of the framework and CLI.

+
+ + +

Build a real Photo Gallery app with Ionic React and native device features.

+
+ + +

Master navigation in Ionic React using React Router.

+
+ + +

Explore Ionic’s rich library of UI components for building beautiful apps.

+
+ +
diff --git a/versioned_sidebars/version-v6-sidebars.json b/versioned_sidebars/version-v6-sidebars.json index 7f8677c4d35..ae22d7d8e70 100644 --- a/versioned_sidebars/version-v6-sidebars.json +++ b/versioned_sidebars/version-v6-sidebars.json @@ -244,7 +244,7 @@ "items": [ { "type": "doc", - "id": "react" + "id": "react/overview" }, { "type": "doc", diff --git a/versioned_sidebars/version-v7-sidebars.json b/versioned_sidebars/version-v7-sidebars.json index a0fa29d70cf..39c8307ed07 100644 --- a/versioned_sidebars/version-v7-sidebars.json +++ b/versioned_sidebars/version-v7-sidebars.json @@ -110,7 +110,7 @@ "label": "React", "collapsed": false, "items": [ - "react", + "react/overview", "react/quickstart", { "type": "category", From 77b5d191d02371a7491aa570c01083fb6ef0f866 Mon Sep 17 00:00:00 2001 From: Brandy Smith <6577830+brandyscarney@users.noreply.github.com> Date: Wed, 23 Jul 2025 10:35:21 -0400 Subject: [PATCH 06/19] docs(guide): update quickstart image with updated starters view --- docs/react/quickstart.md | 2 +- docs/vue/quickstart.md | 2 +- static/img/guides/quickstart/home-page.png | Bin 0 -> 348437 bytes .../img/guides/react/first-app/home-route.png | Bin 355530 -> 0 bytes static/img/guides/vue/first-app/home-route.png | Bin 131659 -> 0 bytes versioned_docs/version-v5/react/quickstart.md | 2 +- versioned_docs/version-v5/vue/quickstart.md | 2 +- versioned_docs/version-v6/react/quickstart.md | 2 +- versioned_docs/version-v6/vue/quickstart.md | 2 +- versioned_docs/version-v7/react/quickstart.md | 2 +- versioned_docs/version-v7/vue/quickstart.md | 2 +- 11 files changed, 8 insertions(+), 8 deletions(-) create mode 100644 static/img/guides/quickstart/home-page.png delete mode 100644 static/img/guides/react/first-app/home-route.png delete mode 100644 static/img/guides/vue/first-app/home-route.png diff --git a/docs/react/quickstart.md b/docs/react/quickstart.md index 3361e6df34f..0fd0168ad74 100644 --- a/docs/react/quickstart.md +++ b/docs/react/quickstart.md @@ -127,7 +127,7 @@ Now the `App` does not really have a lot to modify here. It's a basic example of Currently, the `Home` component looks like so: -![The Home component displayed in a web browser with the text 'The world is your oyster'.](/img/guides/react/first-app/home-route.png 'Ionic React Home Component') +![Screenshot of the Ionic React Home page showing the message "Ready to create an app? Start with Ionic UI Components"](/img/guides/quickstart/home-page.png 'Ionic React Home Component') ```tsx import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; diff --git a/docs/vue/quickstart.md b/docs/vue/quickstart.md index b8d46d14c84..505a6a09bc6 100644 --- a/docs/vue/quickstart.md +++ b/docs/vue/quickstart.md @@ -189,7 +189,7 @@ Now the `App` component does not really have a lot to modify here. It is a basic Currently, the `Home` component looks like so: -![A web browser displaying the Ionic Vue home route with a header titled 'Blank' and a message 'Ready to create an app? Start with Ionic UI Components'.](/img/guides/vue/first-app/home-route.png 'Ionic Vue Home Route Interface') +![Screenshot of the Ionic Vue Home page showing the message "Ready to create an app? Start with Ionic UI Components"](/img/guides/quickstart/home-page.png 'Ionic Vue Home Component') ```html