In this article, we will understand how to setup the Ionic Framework with Nuxt.js and build cross-platform apps using Capacitor.

Introduction

Nuxt.js is a free and open-source framework with an intuitive and extendable way to create type-safe, performant, and production-grade full-stack web applications and websites with Vue.js.

Ionic is an open source UI toolkit for building performant, high quality mobile apps using web technologies - HTML, CSS, JavaScript - with integrations for popular frameworks like Angular, React and Vue.

Capacitor is a cross-platform native runtime that makes it easy to build performant mobile applications that run natively on iOS, Android, and more using modern web tooling.

Create Nuxt.js Project

Prerequisites

• Node.js - v18.0.0 or newer

Once you have Node.js installed, open a terminal and use the following command to create a new project:

npx nuxi@latest init <project-name>

Open your project folder in your favourite Code Editor.

If you are using VS Code, then use the following command:

code <project-name>

We have created a Nuxt.js project; now let's install the Ionic module.

Install Ionic

Now, let's add the @nuxtjs/ionic module to our project's dev dependencies by using the following command:

npx nuxi@latest module add ionic

Once installed, next we have to add the module to our Nuxt configuration in nuxt.config.ts.

export default defineNuxtConfig({
  modules: ["@nuxtjs/ionic"]
})

If you are planning to deploy on iOS or Android, it's recommended to set ssr: false in the nuxt config.

export default defineNuxtConfig({
  modules: ['@nuxtjs/ionic'],
  ssr: false,
})

Please checkout the Deploying to both Web and Device for more information.

Updating app.vue

We need to add the necessary <ion-app> and <ion-router-outlet> tags to our app.vue to work with Ionic properly.

// app.vue

<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

<ion-app> tag is the container element of Ionic, and there should be only one in the project. Please check out the Ionic ion-app for more information.

The <ion-router-outlet> tag provides a mounting point for the route component as the Ionic router handles app routing.

Let's add a index.vue page in our pages directory

// ~/pages/index.vue

<template>
    <ion-page>
        <ion-header>
            <ion-toolbar>
                <ion-title>Home</ion-title>
            </ion-toolbar>
        </ion-header>
        <ion-content class="ion-padding">Hello World</ion-content>
    </ion-page>
</template>

<script setup>

</script>

Now let's run our app, use following command to run app

npm run dev

Open http://localhost:3000 in your browser, you will see it's showing our index.vue page.

To understand more about how to use Ionic components with Nuxt.js or Vue.js, please checkout official Ionic Vue documentation.

Enable Capacitor

Prerequisites

• Please checkout official Capacitor Environment Setup

We don't need to install Capacitor in our app, as it is installed by default with @nuxtjs/ionic. We just need to enable it in our Ionic app. Use the following command to enable capacitor in our app:

npx @ionic/cli integrations enable capacitor

Add support for platforms

To add build support for iOS:

npx @ionic/cli capacitor add ios

To add build support for Android:

npx @ionic/cli capacitor add android

Run app on iOS or Android

To run app on iOS or Android, first we have to create a web build. Use the following command to create a web build:

npx nuxi generate

Once we create a web build, we need to update our Capacitor project directories with our latest app build.

npx cap sync

It will update the capacitor project directories.

To run the app on iOS, use the following command:

npx cap run ios

To run the app on Android, use the following command:

npx cap run android

Make sure to run npx cap sync after every new build to keep your Android and/or iOS capacitor project up-to-date.

Wrapping Up

Thanks for reading. I hope you found this article helpful. Any suggestions or corrections are appreciated.

References

• https://nuxt.com

• https://ionic.nuxtjs.org

• https://ionicframework.com

• https://capacitorjs.com