{"id":4763,"date":"2023-06-23T10:14:27","date_gmt":"2023-06-23T14:14:27","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=4763"},"modified":"2023-06-29T09:49:23","modified_gmt":"2023-06-29T13:49:23","slug":"build-and-deploy-mobile-apps-with-nuxt-ionic","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic","title":{"rendered":"Build and Deploy Mobile Apps with Nuxt Ionic"},"content":{"rendered":"\n<p>The <a href=\"https:\/\/ionic.nuxtjs.org\/\">Nuxt Ionic Module<\/a> lets you combine the power of Nuxt and Ionic to quickly build performant cross-platform apps. Whether you are new to Nuxt or Ionic (or familiar with both), the module provides an out-of-the-box solution to code your app once and deploy to iOS, Android, and web.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><a href=\"https:\/\/nuxt.com\/\">Nuxt.js<\/a> is a powerful meta-framework for building applications with Vue.js. The Ionic framework provides a comprehensive set of UI components and tools that make it easy to build and deploy high-quality mobile apps. The Nuxt Ionic Module works alongside Capacitor to provide native APIs and plugins, as well as build to native iOS and Android from your web app codebase.<\/p>\n\n\n\n<p>There are several benefits to using Nuxt and Ionic together. Nuxt offers a simple and easy-to-use structure with file-system routing, auto-imported components, and more. Ionic provides a native look-and-feel, adaptive styling for iOS and Android platforms, and built-in gestures and animations. Both provide an intuitive developer experience, and the ability to use a single codebase for multiple platforms can save time and resources during development.<\/p>\n\n\n\n<p>In this blog post, we&#8217;ll explore the features of the Nuxt Ionic Module and learn how to get started with building your own Nuxt Ionic mobile app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Nuxt Ionic Module<\/h2>\n\n\n\n<p>Nuxt applications are extendable using modules. There are 160+ modules in the Nuxt ecosystem, including popular ones for content, images, and state management. Nuxt Ionic is a module, and can be added to an existing Nuxt application.<\/p>\n\n\n\n<p>The Nuxt Ionic Module provides some key features:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>No\/low configuration required<\/li>\n\n\n\n<li>Auto-import of Ionic components and icons<\/li>\n\n\n\n<li>Out-of-the-box page routing and access to both Nuxt and Ionic routing utilities<\/li>\n\n\n\n<li>Theming support<\/li>\n\n\n\n<li>Built-in Ionic utilities for gestures and animation<\/li>\n\n\n\n<li>Capacitor support for native APIs and builds<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<p>The source code to accompany this blog post can be found on GitHub <a href=\"https:\/\/github.com\/ceceliacreates\/nuxt-ionic-demo\">here<\/a>. Feel free to fork the repo or follow along below to build from scratch.<\/p>\n\n\n\n<p>We\u2019ll start with a Nuxt 3 starter app. In your terminal, run the following:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npx nuxi init nuxt-ionic-app<\/code><\/pre>\n\n\n\n<p>Once the app is generated, open in your code editor to start building with Nuxt Ionic.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Installing the Ionic Module<\/h2>\n\n\n\n<p>Install the Nuxt Ionic Module with the following command:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npm install @nuxtjs\/ionic -D<\/code><\/pre>\n\n\n\n<p>Then, update the <code>nuxt.config.ts<\/code> file in the root of your project to add <code>\u201d@nuxtjs\/ionic\u201d<\/code> to your <code>modules<\/code> array. This is how you configure any Nuxt module added to your project.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">export default defineNuxtConfig({\n  modules: [&quot;@nuxtjs\/ionic&quot;],\n});<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Add Page Routing<\/h2>\n\n\n\n<p>Nuxt provides a file-based routing system. This means that any files within a <code>pages<\/code> directory will automatically be generated as routes in our application. When using Nuxt Ionic, we combine the file-based routing with the Ionic Router for a mobile-like navigation experience with animations.<\/p>\n\n\n\n<p>First, change the <code>app.vue<\/code> file to the following:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">&lt;template&gt;\n  &lt;ion-app&gt;\n    &lt;ion-router-outlet \/&gt;\n  &lt;\/ion-app&gt;\n&lt;\/template&gt;<\/code><\/pre>\n\n\n\n<p>This wraps our app in the root <code>&lt;ion-app&gt;<\/code> component and the <code>&lt;ion-router-outlet&gt;<\/code>.<\/p>\n\n\n\n<p>Then, create a <code>pages<\/code> directory in the root of the project and add an <code>index.vue<\/code> and <code>resources.vue<\/code> file within the directory. An <code>index.vue<\/code> file is required for file-based routing unless you override the default. Now we have two pages for our app with built-in routing.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Add Ionic Components and Icons<\/h2>\n\n\n\n<p>Ionic components and icons are automatically imported to all our components. This makes it easy for us to create a mobile UI for the app. You can see the documentation here for all the available components.<\/p>\n\n\n\n<p>Update the <code>index.vue<\/code> file to create the landing page of our app, matching <a href=\"https:\/\/github.com\/ceceliacreates\/nuxt-ionic-demo\/blob\/main\/pages\/index.vue\">the code found here<\/a>. Snippet below:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">&lt;template&gt;\n  &lt;ion-page&gt;\n    &lt;ion-header :translucent=&quot;true&quot;&gt;\n      &lt;ion-toolbar&gt;\n        &lt;ion-title&gt;Nuxt Ionic&lt;\/ion-title&gt;\n      &lt;\/ion-toolbar&gt;\n    &lt;\/ion-header&gt;\n    &lt;ion-content :fullscreen=&quot;true&quot;&gt;\n      &lt;ion-header collapse=&quot;condense&quot;&gt;\n        &lt;ion-toolbar&gt;\n          &lt;ion-title size=&quot;large&quot;&gt;Nuxt Ionic&lt;\/ion-title&gt;\n        &lt;\/ion-toolbar&gt;\n      &lt;\/ion-header&gt;\n      &lt;div id=&quot;container&quot;&gt;\n        &lt;h1&gt;Nuxt Ionic Module&lt;\/h1&gt;\n        &lt;ion-button router-link=&quot;\/resources&quot;&gt;Get Started&lt;\/ion-button&gt;\n      &lt;\/div&gt;\n    &lt;\/ion-content&gt;\n  &lt;\/ion-page&gt;\n&lt;\/template&gt;\n...<\/code><\/pre>\n\n\n\n<p>You\u2019ll notice there is no <code>&lt;script&gt;<\/code> tag needed &#8212; we can use any Ionic component without importing. This page has the standard structure for an Ionic app, with <code>&lt;ion-page&gt;<\/code> at the root, then <code>&lt;ion-header&gt;<\/code> and <code>&lt;ion-content&gt;<\/code> at the same level inside. Make sure to use <code>router-link=&quot;&quot;<\/code> for navigation to leverage Ionic\u2019s built-in navigation animations.<\/p>\n\n\n\n<p>Next, update the <code>resources.vue<\/code> file to create a list of links using the <code>&lt;ion-list&gt;<\/code> component, matching <a href=\"https:\/\/github.com\/ceceliacreates\/nuxt-ionic-demo\/blob\/main\/pages\/resources.vue\">the source code here<\/a>. Snippet below:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">...\n&lt;ion-list :inset=&quot;true&quot;&gt;\n  &lt;ion-item&gt;\n    &lt;ion-icon :icon=&quot;ioniconsBookOutline&quot; slot=&quot;start&quot;&gt;&lt;\/ion-icon&gt;\n    &lt;ion-label&gt;\n      &lt;a target=&quot;_blank&quot; rel=&quot;noopener noreferrer&quot;      href=&quot;https:\/\/ionic.nuxtjs.org\/&quot;&gt;Nuxt Ionic Documentation&lt;\/a&gt;\n    &lt;\/ion-label&gt;\n  &lt;\/ion-item&gt;\n...<\/code><\/pre>\n\n\n\n<p>Here we are using <code>&lt;ion-icon&gt;<\/code> with auto-import, so we have access to 1,300 icons with no configuration needed. Check out <a href=\"https:\/\/ionic.io\/blog\/ionicons\">the documentation here<\/a> for a complete list of available icons.<\/p>\n\n\n\n<p>Note that the anchor <code>&lt;a&gt;<\/code> tag with <code>href<\/code> is used for external links while <code>router-link<\/code> is used for navigation.<\/p>\n\n\n\n<p>After these updates, run <code>npx nuxi dev<\/code> to build the app locally in the browser and navigate between pages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Add Theme<\/h2>\n\n\n\n<p>To add themes, such as a dark theme, create a <code>.css<\/code> file that overrides the default Ionic theme variables. In this example, we\u2019ll create a <code>themes<\/code> directory and a `variables.css` file within. Then, update the `variables.css` file to match <a href=\"https:\/\/github.com\/ceceliacreates\/nuxt-ionic-demo\/blob\/main\/theme\/variables.css\">the source code here<\/a>, which comes from the <a href=\"https:\/\/github.com\/ionic-team\/starters\">Ionic starter app<\/a>.<\/p>\n\n\n\n<p>Snippet:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">...\n  \/*\n   * iOS Dark Theme\n   * -------------------------------------------\n   *\/\n  .ios body {\n    --ion-background-color: #000000;\n    --ion-background-color-rgb: 0, 0, 0;\n    --ion-text-color: #ffffff;\n    --ion-text-color-rgb: 255, 255, 255;\n    --ion-color-step-50: #0d0d0d;\n    --ion-color-step-100: #1a1a1a;\n    --ion-color-step-150: #262626;\n    --ion-color-step-200: #333333;\n    --ion-color-step-250: #404040;\n    --ion-color-step-300: #4d4d4d;\n    --ion-color-step-350: #595959;\n    --ion-color-step-400: #666666;\n    --ion-color-step-450: #737373;\n    --ion-color-step-500: #808080;\n    --ion-color-step-550: #8c8c8c;\n    --ion-color-step-600: #999999;\n    --ion-color-step-650: #a6a6a6;\n    --ion-color-step-700: #b3b3b3;\n    --ion-color-step-750: #bfbfbf;\n    --ion-color-step-800: #cccccc;\n    --ion-color-step-850: #d9d9d9;\n    --ion-color-step-900: #e6e6e6;\n    --ion-color-step-950: #f2f2f2;\n    --ion-item-background: #000000;\n    --ion-card-background: #1c1c1d;\n  }\n  .ios ion-modal {\n    --ion-background-color: var(--ion-color-step-100);\n    --ion-toolbar-background: var(--ion-color-step-150);\n    --ion-toolbar-border-color: var(--ion-color-step-250);\n  }\n...<\/code><\/pre>\n\n\n\n<p>Wherever you create the <code>.css<\/code> file, you\u2019ll need to add it to your <code>nuxt.config.ts<\/code> file in the <code>css<\/code> array.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">export default defineNuxtConfig({\n  modules: [&quot;@nuxtjs\/ionic&quot;],\n  css: [&quot;@\/theme\/variables.css&quot;],\n});<\/code><\/pre>\n\n\n\n<p>Ionic has built-in CSS variables that can be customized to create a theme. Learn more about <a href=\"https:\/\/ionicframework.com\/docs\/theming\/basics\">theming with Ionic here<\/a>.<\/p>\n\n\n\n<p>Once updated, restart the app and update the browser or system theme to see the app change from light to dark mode.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Native Builds with Capacitor<\/h2>\n\n\n\n<p>Now that our app is developed, it\u2019s time to build for iOS and Android devices using Capacitor. Built by Ionic, Capacitor provides a native runtime and native APIs for accessing device functionality like camera or location.<\/p>\n\n\n\n<p>Capacitor is installed by default with Nuxt Ionic Module, but must be configured. Using the Ionic CLI is recommended. It can be installed globally with <code>npm install -g @ionic\/cli<\/code> or <code>yarn global add @ionic\/cli<\/code> or is available via <code>npx<\/code>.<\/p>\n\n\n\n<p>First enable Capacitor, then add the Android and\/or iOS platform(s) you wish to use for your app.<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-\">npx @ionic\/cli integrations enable capacitor # or ionic integrations enable capacitor\n\nnpx @ionic\/cli capacitor add ios # or ionic capacitor add ios\n\nnpx @ionic\/cli capacitor add android # or ionic capacitor add android<\/code><\/pre>\n\n\n\n<p>There are system requirements for building and running iOS and Android apps locally. See the <a href=\"https:\/\/capacitorjs.com\/docs\/getting-started\/environment-setup\">Capacitor environment setup documentation here for more details<\/a>.<\/p>\n\n\n\n<p>Once your environment is set up and Capacitor enabled, you can build, sync, and run your app with the following steps:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create a web build with <code>npx nuxi generate<\/code> or <code>npx nuxi build<\/code>.<\/li>\n\n\n\n<li>Run <code>npx cap sync<\/code> to update your Capacitor project directories with your latest app build.<\/li>\n\n\n\n<li>Run <code>npx cap run android<\/code> or <code>npx cap run ios<\/code> to run the app from the command line using an installed device OR<\/li>\n\n\n\n<li>(Optional) Run <code>npx cap open android<\/code> or <code>npx cap open ios<\/code> to open the project in Android Studio or XCode, respectively.<\/li>\n<\/ol>\n\n\n\n<p>Now you can see your app run on an emulated iOS or Android device!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"461\" height=\"1024\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/androidscreenshot-461x1024.png\" alt=\"\" class=\"wp-image-5356 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/androidscreenshot-461x1024.png 461w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/androidscreenshot-135x300.png 135w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/androidscreenshot-768x1707.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/androidscreenshot-691x1536.png 691w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/androidscreenshot-922x2048.png 922w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/androidscreenshot.png 1080w\" data-sizes=\"auto, (max-width: 461px) 100vw, 461px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 461px; --smush-placeholder-aspect-ratio: 461\/1024;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"461\" height=\"1024\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/androidscreenshot-461x1024.png\" alt=\"\" class=\"wp-image-5356\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/androidscreenshot-461x1024.png 461w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/androidscreenshot-135x300.png 135w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/androidscreenshot-768x1707.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/androidscreenshot-691x1536.png 691w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/androidscreenshot-922x2048.png 922w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/androidscreenshot.png 1080w\" sizes=\"auto, (max-width: 461px) 100vw, 461px\" \/><\/noscript><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\">Deploying with Appflow<\/h2>\n\n\n\n<p>Your app is now running locally, but how do you get it in the hands of users? Appflow, the mobile DevOps solution from Ionic, lets you create web and native builds in the cloud and deploy to Google Play and Apple App Store. You can even push live updates to apps built with Ionic or Capacitor.<\/p>\n\n\n\n<p>For this post, we\u2019ll walk through connecting your app and creating an Android debug build.<\/p>\n\n\n\n<p>Start by creating a repository in the Git provider of your choice (we\u2019ll use GitHub) and pushing your local project to the remote repository.<\/p>\n\n\n\n<p>Log in or create an account at ionic.io to get started with Appflow. Then, use <a href=\"https:\/\/ionic.io\/docs\/appflow\/quickstart\/github\">the instructions here<\/a> to import an existing app and select the repository for your Nuxt project.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"783\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/image-1024x783.png\" alt=\"\" class=\"wp-image-5355 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/image-1024x783.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/image-300x229.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/image-768x587.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/image.png 1251w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/783;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"783\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/image-1024x783.png\" alt=\"\" class=\"wp-image-5355\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/image-1024x783.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/image-300x229.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/image-768x587.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/image.png 1251w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n\n\n\n<p>Once connected, you\u2019ll see the most recent commit in the Commits screen in Appflow. Select \u2018Start build\u2019 from the latest commit.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"351\" data-src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/commits-list-1024x351.png\" alt=\"\" class=\"wp-image-5357 lazyload\" data-srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/commits-list-1024x351.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/commits-list-300x103.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/commits-list-768x263.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/commits-list-1536x526.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/commits-list.png 1600w\" data-sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 1024px; --smush-placeholder-aspect-ratio: 1024\/351;\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"351\" src=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/commits-list-1024x351.png\" alt=\"\" class=\"wp-image-5357\" srcset=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/commits-list-1024x351.png 1024w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/commits-list-300x103.png 300w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/commits-list-768x263.png 768w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/commits-list-1536x526.png 1536w, https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/06\/commits-list.png 1600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/noscript><\/figure>\n<\/div>\n\n\n<p>This brings you to the build screen. Select the Android platform, and the default latest Build stack and Debug build type will pre-select. For this build type, no signing certificates, custom environments, or native configs are needed. Just click build!<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/lh5.googleusercontent.com\/oYpI2-fl8q3OgNsRdM1H6PuitzzDJKpniuOrT8KXk-ucsMSnOULjxQnKtaEHYAQqFLCMX67mRraXvFj-hiBId8bg2IGtfOuTKUgqNifcEZJIe1Fv5ZT3VAHw0yQtxNDAVFBwBLw5xPjJ-JFHzQTvfpg\" width=\"624\" height=\"597\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/597;\"><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh5.googleusercontent.com\/oYpI2-fl8q3OgNsRdM1H6PuitzzDJKpniuOrT8KXk-ucsMSnOULjxQnKtaEHYAQqFLCMX67mRraXvFj-hiBId8bg2IGtfOuTKUgqNifcEZJIe1Fv5ZT3VAHw0yQtxNDAVFBwBLw5xPjJ-JFHzQTvfpg\" width=\"624\" height=\"597\"><\/noscript><\/p>\n\n\n\n<p>This kicks off the process for a cloud native build of the app for Android devices. Once the build is complete, you can download the <code>.apk<\/code> and <code>.aab<\/code> files to run in an emulator or on a device.<\/p>\n\n\n\n<p><img loading=\"lazy\" decoding=\"async\" data-src=\"https:\/\/lh3.googleusercontent.com\/uwQo0bJBH7RLHuS75DOIztapN14c9InTLItCh2FAVmmqegLHBdd5ntQ3p17GWDMt6CpRgYUkjXnauhOVgzuNzH_XbAKf4R_9yDcWx7pRe8wnf20o51NEifY2D3Eandi-TGwKjw8wxPORTyJtncpjjy0\" width=\"624\" height=\"451\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 624px; --smush-placeholder-aspect-ratio: 624\/451;\"><noscript><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lh3.googleusercontent.com\/uwQo0bJBH7RLHuS75DOIztapN14c9InTLItCh2FAVmmqegLHBdd5ntQ3p17GWDMt6CpRgYUkjXnauhOVgzuNzH_XbAKf4R_9yDcWx7pRe8wnf20o51NEifY2D3Eandi-TGwKjw8wxPORTyJtncpjjy0\" width=\"624\" height=\"451\"><\/noscript><\/p>\n\n\n\n<p>When your app is ready for a production build, you can store <a href=\"https:\/\/ionic.io\/docs\/appflow\/package\/adding-credentials\">signing certificates<\/a>, provisioning profiles, and <a href=\"https:\/\/ionic.io\/docs\/appflow\/destinations\/destinations\">app store credentials<\/a> in Appflow to easily build and deploy for end users.<\/p>\n\n\n\n<p>You can get started with cloud native builds in Appflow by starting a free trial today.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Learn More<\/h2>\n\n\n\n<p>You now have everything you need to get started with building and deploying Nuxt Ionic apps. To learn more, check out the Nuxt Ionic <a href=\"https:\/\/ionic.nuxtjs.org\/\">documentation<\/a> and the <a href=\"https:\/\/github.com\/nuxt-modules\/ionic\">GitHub repository<\/a> for the module.&nbsp;<br>Make sure to share your own Nuxt Ionic app with the Ionic community in our <a href=\"https:\/\/ionic.link\/discord\">Discord<\/a> or <a href=\"https:\/\/forum.ionicframework.com\/\">Forum<\/a>!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Nuxt Ionic Module lets you combine the power of Nuxt and Ionic to quickly build performant cross-platform apps. Whether you are new to Nuxt or Ionic (or familiar with both), the module provides an out-of-the-box solution to code your app once and deploy to iOS, Android, and web.<\/p>\n","protected":false},"author":98,"featured_media":4764,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"1","publish_post_category":"12","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"565008","discourse_permalink":"http:\/\/forum.ionicframework.com\/t\/build-and-deploy-mobile-apps-with-nuxt-ionic\/234399","wpdc_publishing_response":"success","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[124],"tags":[128,151,3,147],"class_list":["post-4763","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-appflow","tag-capacitor","tag-ionic","tag-vue"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Build and Deploy Mobile Apps with Nuxt Ionic - Ionic Blog<\/title>\n<meta name=\"description\" content=\"Use Nuxt to build a mobile app for iOS and Android with the Nuxt Ionic module, then deploy easily with Appflow.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build and Deploy Mobile Apps with Nuxt Ionic\" \/>\n<meta property=\"og:description\" content=\"Use Nuxt to build a mobile app for iOS and Android with the Nuxt Ionic module, then deploy easily with Appflow.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-23T14:14:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-29T13:49:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/01\/nuxtionic-feature-image-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2240\" \/>\n\t<meta property=\"og:image:height\" content=\"1120\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cecelia Martinez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ceceliacreates\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cecelia Martinez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic\"},\"author\":{\"name\":\"Cecelia Martinez\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/5e1062699fd542f5a6fe4c72879c1637\"},\"headline\":\"Build and Deploy Mobile Apps with Nuxt Ionic\",\"datePublished\":\"2023-06-23T14:14:27+00:00\",\"dateModified\":\"2023-06-29T13:49:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic\"},\"wordCount\":1328,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/01\/nuxtionic-feature-image-1.png\",\"keywords\":[\"Appflow\",\"Capacitor\",\"Ionic\",\"Vue\"],\"articleSection\":[\"Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic\",\"url\":\"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic\",\"name\":\"Build and Deploy Mobile Apps with Nuxt Ionic - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/01\/nuxtionic-feature-image-1.png\",\"datePublished\":\"2023-06-23T14:14:27+00:00\",\"dateModified\":\"2023-06-29T13:49:23+00:00\",\"description\":\"Use Nuxt to build a mobile app for iOS and Android with the Nuxt Ionic module, then deploy easily with Appflow.\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic#primaryimage\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/01\/nuxtionic-feature-image-1.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/01\/nuxtionic-feature-image-1.png\",\"width\":2240,\"height\":1120},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build and Deploy Mobile Apps with Nuxt Ionic\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/5e1062699fd542f5a6fe4c72879c1637\",\"name\":\"Cecelia Martinez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/IMG_4815-150x150.jpeg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/IMG_4815-150x150.jpeg\",\"caption\":\"Cecelia Martinez\"},\"description\":\"Developer Advocate\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ceceliamartinez\/\",\"https:\/\/x.com\/ceceliacreates\"],\"jobTitle\":\"Developer Advocate\",\"url\":\"https:\/\/ionic.io\/blog\/author\/cecelia\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build and Deploy Mobile Apps with Nuxt Ionic - Ionic Blog","description":"Use Nuxt to build a mobile app for iOS and Android with the Nuxt Ionic module, then deploy easily with Appflow.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic","og_locale":"en_US","og_type":"article","og_title":"Build and Deploy Mobile Apps with Nuxt Ionic","og_description":"Use Nuxt to build a mobile app for iOS and Android with the Nuxt Ionic module, then deploy easily with Appflow.","og_url":"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic","og_site_name":"Ionic Blog","article_published_time":"2023-06-23T14:14:27+00:00","article_modified_time":"2023-06-29T13:49:23+00:00","og_image":[{"width":2240,"height":1120,"url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/01\/nuxtionic-feature-image-1.png","type":"image\/png"}],"author":"Cecelia Martinez","twitter_card":"summary_large_image","twitter_creator":"@ceceliacreates","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Cecelia Martinez","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic"},"author":{"name":"Cecelia Martinez","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/5e1062699fd542f5a6fe4c72879c1637"},"headline":"Build and Deploy Mobile Apps with Nuxt Ionic","datePublished":"2023-06-23T14:14:27+00:00","dateModified":"2023-06-29T13:49:23+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic"},"wordCount":1328,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"image":{"@id":"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/01\/nuxtionic-feature-image-1.png","keywords":["Appflow","Capacitor","Ionic","Vue"],"articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic","url":"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic","name":"Build and Deploy Mobile Apps with Nuxt Ionic - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic#primaryimage"},"image":{"@id":"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic#primaryimage"},"thumbnailUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/01\/nuxtionic-feature-image-1.png","datePublished":"2023-06-23T14:14:27+00:00","dateModified":"2023-06-29T13:49:23+00:00","description":"Use Nuxt to build a mobile app for iOS and Android with the Nuxt Ionic module, then deploy easily with Appflow.","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic#primaryimage","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/01\/nuxtionic-feature-image-1.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/01\/nuxtionic-feature-image-1.png","width":2240,"height":1120},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/build-and-deploy-mobile-apps-with-nuxt-ionic#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Build and Deploy Mobile Apps with Nuxt Ionic"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/5e1062699fd542f5a6fe4c72879c1637","name":"Cecelia Martinez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/IMG_4815-150x150.jpeg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2022\/09\/IMG_4815-150x150.jpeg","caption":"Cecelia Martinez"},"description":"Developer Advocate","sameAs":["https:\/\/www.linkedin.com\/in\/ceceliamartinez\/","https:\/\/x.com\/ceceliacreates"],"jobTitle":"Developer Advocate","url":"https:\/\/ionic.io\/blog\/author\/cecelia"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2023\/01\/nuxtionic-feature-image-1.png","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4763","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/98"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=4763"}],"version-history":[{"count":10,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4763\/revisions"}],"predecessor-version":[{"id":5469,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/4763\/revisions\/5469"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media\/4764"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=4763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=4763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=4763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}