DEV Community

Aaron K Saunders
Aaron K Saunders

Posted on • Edited on

19 1

How To Build A Nuxt 3 Ionic Capacitor Starter App

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

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`

```tsx


import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
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.

Setup

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

Production

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.




www.clearlyinnovative.com

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (5)

Collapse
 
aman_shaikh_91f6caf99e4b6 profile image
Aman Shaikh

I am facing one wierd issue.
To use Nuxtjs/ionic module in my Nuxt3 project i set the ssr:false and added the module inside the nuxt.config.ts.
Now whenever i am trying to run nuxt generate or npx nuxi generate. It doesn't generate .output/public folder it just creates the empty .output folder.

One workaround which i found was that run nuxt generate before adding the nuxtjs/ionic module that will generate .nuxt,.output and dist folder. Now keep that .nuxt and dist folder and delete .output folder. Now re-run the nuxt generate or npx nuxi generate and it will generate the .output/public folder.

I don't feel that this is the correct workaround can anyone please help me with finding the cause of that issue and best way to resolve it.

Collapse
 
aaronksaunders profile image
Aaron K Saunders

it has been a minute since i looked at this so it might take a while for me to respond, but i will check it out

Collapse
 
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?

Collapse
 
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

nuxt.com/docs/api/commands/generat...

Collapse
 
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 🤔

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more