DEV Community

Aaron K Saunders
Aaron K Saunders

Posted on • Updated on

How To Build A Nuxt 3 Ionic Capacitor Starter App

Nuxt - The Hybrid Vue Framework -
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. -

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

npx nuxi init nuxt-app
cd nuxt app
npm install
Enter fullscreen mode Exit fullscreen mode

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'

export default defineNuxtConfig({
  ssr : false,
  css: [
    // add required css:
Enter fullscreen mode Exit fullscreen mode
  • 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

Image description

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",
Enter fullscreen mode Exit fullscreen mode
  • change scripts in package.json
"ionic:build": "npm run build", // capacitor extension adds this form you
"ionic:serve": "npm run start"
Enter fullscreen mode Exit fullscreen mode

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"

Image description

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

Image description

  • 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

GitHub logo aaronksaunders / ionic-capacitor-nuxt-video-app

Ionic Capacitor VueJS Nuxt3 Starter Template

Ionic Capacitor VueJS Nuxt3 Supabase Starter Template

Code For Each Video

There is a seperate branch for each video in the series

Look at the nuxt 3 documentation to learn more.


Make sure to install the dependencies:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install --shamefully-hoist
Enter fullscreen mode Exit fullscreen mode

Development Server

Start the development server on http://localhost:3000

npm run dev
Enter fullscreen mode Exit fullscreen mode


Build the application for production:

npm run build
Enter fullscreen mode Exit fullscreen mode

Locally preview production build:

npm run preview
Enter fullscreen mode Exit fullscreen mode

Checkout the deployment documentation for more information.

Top comments (3)

wgbn profile image
Walter Gandarella

When running npx cap add android I get an error, because there is no index.html file in the .output/public folder, the nuxt build command does not create this file. How did you solve this?

aaronksaunders profile image
Aaron K Saunders

i would have to see your project, also I am working on an updated version of this series since nuxt3 was not released when I posted this originally.

try changing nuxt build to nuxt generate

93lucasp profile image
Luca Spezzano

Hey @aaron, news on the updated version? Running nuxt generate, when xcode open the app i see a white page ๐Ÿค”