Using Capacitor with Ionic Framework
Capacitor can quickly be installed directly into any new or existing Ionic app by using the Ionic CLI.
Installing Capacitor in a new Ionic Project
For new Ionic projects, Capacitor already installed in new Ionic apps by default! All you have to do is start a new project. To create a new Ionic project, run the following command:
ionic start
If you'd like a tutorial for building your first Capacitor-based Ionic app, check out this tutorial by the Ionic Framework team.
Installing Capacitor to an existing Ionic Project
If you have an existing Ionic project that doesn't have Capacitor enabled, you can enable Capacitor by running the following command.
ionic integrations enable capacitor
Install Capacitor Plugin Dependencies
Ionic Framework makes use of the APIs in the following Capacitor plugins:
For the best user experience, you should make sure these plugins are installed even if you don't import them in your app. To install these plugins, run the following command in the root of your project:
npm i @capacitor/app @capacitor/haptics @capacitor/keyboard @capacitor/status-bar
Add Platforms
After Capacitor installed and its plugins are installed, you can add mobile platforms to your app:
ionic capacitor add android
ionic capacitor add ios
This will create a new directory in the root of your project for the native platform. This directory is a native project that should be considered a source artifact. Learn more about native project management.
info
If your Ionic app uses Cordova, we have a guide on how to migrate from Cordova to Capacitor as well.
Ionic CLI Capacitor Commands
The Ionic CLI has a variety of high-level commands that wrap the Capacitor CLI for convenience. See the documentation for each below. Help output is also available by using the --help flag after each command.
For more information on the Ionic CLI, and how to use it with Capacitor, you can see the documentation here.