Nuxt - The Hybrid Vue Framework - https://v3.nuxtjs.org/
Capacitor - Drop Capacitor into any existing web project, framework or library. Convert an existing React, Svelte, Vue (or your preferred Web Framework) project to native mobile. - https://capacitorjs.com/

This is a walkthrough of how to get started with building a mobile application with nuxt3 and Ionic Capacitor. In this video, we create the basic project and then using the Ionic VS Code Extension, add IOS and Android libraries so we can deploy the application on mobile devices.

Install Nuxt3

Pretty straight forward, we will just follow the guide listed below

• Nuxt 3 - Quick Start (nuxtjs.org)

npx nuxi init nuxt-app
cd nuxt app
npm install

Run with Ionic Capacitor

To get the app to run with ionic capacitor we need to make a change in the nuxt configuration

• change config to set ssr to false in nuxt.config.ts

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  ssr : false,
  css: [
    // add required css:
  ]
})

• We are going to use the Visual Studio Code Ionic Extension for installing Capacitor and running the app on a device.
  Capacitor works by wrapping the web site in a container and providing access through APIs and plugins to native device functionality.

• use extension to Add Capacitor

Click Add Capacitor Integration

Nuxt outputs in build to the directory .output so we need to make the following change:

• change webDir directory in the capacitor.config.json

"webDir": ".output/public",

• change scripts in package.json

"ionic:build": "npm run build", // capacitor extension adds this form you
"ionic:serve": "npm run start"

Running On Device

To run on device you can also using the Ionic Extension. Just select the platform you want to use by clicking "Add IOS Project" or "Add Android Project" under "Recommendations"

After adding the specific Project, you can Run by choosing an option in the extension

• Issue Running On Device
  • I had a problem getting everything to run initially due to an error I was getting from the ionic extension. It did not like that the package.json file was missing name and version properties. After I added them to the package.json then the extension could run the build scripts and deploy to the device

Source Code

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install --shamefully-hoist

npm run dev

npm run build

npm run preview

www.clearlyinnovative.com