DEV Community

Aaron K Saunders

Posted on May 9, 2022 • Edited on May 15, 2022

How To Build A Nuxt 3 Ionic Capacitor Starter App

#nuxt #vue #capacitor #ionic

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`

```tsx


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

aaronksaunders / ionic-capacitor-nuxt-video-app

Ionic Capacitor VueJS Nuxt3 Starter Template

Ionic Capacitor VueJS Nuxt3 Supabase Starter Template

Blog Post: https://dev.to/aaronksaunders/how-to-build-a-nuxt3-ionic-capacitor-starter-app-4d3k
Video: https://youtu.be/tDYPZvjVTcc

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

Development Server

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

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Checkout the deployment documentation for more information.

View on GitHub

www.clearlyinnovative.com

Top comments (3)

Walter Gandarella • Mar 8 '23

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?