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:
]
})
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.jsonfile was missingnameandversionproperties. After I added them to the package.json then the extension could run the build scripts and deploy to the 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
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
- Part One: https://github.com/aaronksaunders/ionic-capacitor-nuxt-video-app
- Part Two: https://github.com/aaronksaunders/ionic-capacitor-nuxt-video-app/tree/part-2
- Part Three: https://github.com/aaronksaunders/ionic-capacitor-nuxt-video-app/tree/part-3
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.
Top comments (3)
When running
npx cap add androidI get an error, because there is no index.html file in the .output/public folder, thenuxt buildcommand does not create this file. How did you solve this?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 buildtonuxt generatenuxt.com/docs/api/commands/generat...
Hey @aaron, news on the updated version? Running
nuxt generate, when xcode open the app i see a white page 🤔