Posts Learn Components Snippets Categories Tags About
/

Building hybrid IOS and Android app with NuxtJS and Capacitor

Learn how to build IOS and Android. app with NuxtJS using Capacitor runtime for building Web Native apps.

6 months ago

8 mins read

287 views

CapacitorJS is an open-source native runtime that allows for building Web Native apps for cross-platform IOS and Android applications with HTML, CSS, and JavaScript. The underlying stack can use any front-end frameworks such as VueJS, React, Svelte, Angular, and more.
CapacitorJS Homepage

In this post, you'll be learning how to integrate a new or existing NuxtJS web-based application with Capacitor and to run it as IOS and Android application. If you are not using NuxtJS, Capacitor can be dropped into any existing web projects, and below are some of the frameworks/libraries ready to be used.
Web framework/library that works well with Capacitor

Install CapacitorJS on Existing NuxtJS Application


Install capacitor core and CLI in the existing NuxtJS application.
npm install @capacitor/core @capacitor/cli
Alternatively, if you are using yarn
yarn add @capacitor/core @capacitor/cli

Initialize CapacitorJS


Initialize the CapacitorJS and set dist as the web directory to which the runtime can refer to. 
npx cap init --web-dir=dist

Adding Android and IOS platform


To add the cross-platform that you want to support run the command below.
npx cap add android
npx cap add ios

Copy Web Code to Native App Directory


To copy all of your web code from the /dist directory into the appropriate native app directories run the following codes.
npx cap copy

Launch Application on Xcode or Andoird Studio


To open the IOS and Android development projet run the following code but ensure Xcode and Android Studio is installed and available in the system.
npx cap open ios
npx cap open android

Update package.json Scripts


Update package.json to add new script command which is to generate without ssr and right away copy the distribution folder for android and ios application files.
"scripts": {
    "generate-capacitor": "nuxt generate --no-ssr && npx cap copy"
}

Final Workflow (3 Commands)


During development run "yarn watch" to keep the live server running
yarn watch
Once the development is done generate NuxtJS for distribution and copy the generated directory to android
yarn generate-capacitor
Open the project in Xcode or Andorid Studio
npx cap open ios
npx cap open android
Run the application with the simulator.

Plugins


Capacitor comes with many plugins that enable JavaScript code to interface directly with Native APIs and you can visit directly on the Capacitor Plugin Listing page. They have both Official Plugins and Community Plugins available to use right if necessary.
Capacitor Plugins
new

PostSrc Code Snippets

Learn new snippets today, level up your Laravel, Alpine JS, Vue JS, Tailwind CSS skills and more.

Learn New Snippets

Authored by

PostSrc poster

PostSrc

Full stack developer mainly focusing on the front end side of the web. The main author of PostSrc and loves writing tutorial and guides online.

new

PostSrc Code Components

Collection of Tailwind CSS components for everyone to use. Browse all of the components that's right for your project.

View Components