
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.

Install CapacitorJS on Existing NuxtJS Application
Install capacitor core and CLI in the existing NuxtJS application.
npm install @capacitor/core @capacitor/cli
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
yarn generate-capacitor
npx cap open ios npx cap open android
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.
