Get started with Nuxt 3 & Ionic 7

Creating an app with Ionic in Nuxt has never been easier. This is made possible by the phenomenal Nuxt/Ionic module, which allows harnessing the full potential of Nuxt and the excellent cross-platform user experience of Ionic. For these we will use the starters I created, don't forget to give me a start on Github here.

Create a app with blank starter

Open a terminal an run the following command:

npx nuxi init -t "gh:luisbytes/nuxt-ionic-starters#blank" <app>

Create a app with tabs starter

Open a terminal an run the following command:

npx nuxi init -t "gh:luisbytes/nuxt-ionic-starters#tabs" <app>

Dependencies

Next, go to to app directory and install the dependencies:

npm install

Development

Start the development server on port 3000:

npm run dev

Enable Capacitor

After completing the application development process, it's an exciting moment to generate the builds for iOS and Android. This stage is crucial as it allows us to bring our app to different platforms and reach a broader audience.

Thanks to the versatility and power of Ionic, combined with the efficiency of Nuxt, we can easily generate the necessary builds for iOS and Android. With just a few specific commands and configurations, we will be ready to bring our app to life on both operating systems.

This capability enables us to expand our reach and target a wider audience by making our app accessible across various platforms.

npx @ionic/cli integrations enable capacitor # or ionic integrations enable capacitor
npx @ionic/cli capacitor add ios # or ionic capacitor add ios
npx @ionic/cli capacitor add android # or ionic capacitor add android

Run App

Once an Android or iOS project is added with Capacitor, you can run your app on an iOS or Android emulator.

To build, sync, and run your app:

1. Create a web build with npx nuxi generate or npx nuxi build.
2. Run npx cap sync to update your Capacitor project directories with your latest app build.
3. Run npx cap run android or npx cap run ios to run the app from the command line using an installed device OR
4. (Optional) Run npx cap open android or npx cap open ios to open the project in Android Studio or XCode, respectively.

Remember to run npx cap sync after every new build to ensure your Android and/or iOS project is up-to-date.

Learn More

And that's it! You are now ready to start implementing your next app using the wonderful technology of the Nuxt framework. I invite you to explore the documentation of the Nuxt/Ionic module and visit its GitHub repository for more information.