DEV Community

Aaron K Saunders
Aaron K Saunders

Posted on

How To Build A Nuxt 3 Ionic Capacitor Starter App - Adding Ionic Vue Components

Nuxt - The Hybrid Vue Framework - https://v3.nuxtjs.org/
Ionic Framework - An open source mobile toolkit for building high quality, cross-platform native and web app experiences. Move faster with a single code base, running everywhere with JavaScript and the Web. https://ionicframework.com/
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/

Install Ionic and Ionic Core

npm install @ionic/core @ionic/vue
Enter fullscreen mode Exit fullscreen mode

Add Styles

Update your nuxt.config.ts to include the required CSS files for Ionic.

import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
    ssr: false,
    css: [
        '@ionic/core/css/core.css',
        '@ionic/core/css/normalize.css',
        '@ionic/core/css/structure.css',
        '@ionic/core/css/typography.css',
        '@ionic/core/css/ionic.bundle.css',
    ]
})
Enter fullscreen mode Exit fullscreen mode

Add The Ionic Framework Vue Plugin

Create a new directory called plugins in the root of the project and create a file ionic.js and add the following code. This code installs the IonicVue plugin in the vue app

import { IonicVue } from "@ionic/vue";
export default defineNuxtPlugin((nuxtApp) => {
  // Doing something with nuxtApp
  nuxtApp.vueApp.use(IonicVue);
});
Enter fullscreen mode Exit fullscreen mode

Create A NuxtJS Layout For Ionic Framework

The application needs to be wrapped in the IonApp component and since we don't have a router, we need to create a Layout that will wrap all of the pages in the application.

create a new directory in the root of the project called Layouts and add a newfile ionicapp.vue. Add the following code in the new file.

<template>
  <IonApp >
    <!-- page content will appear here -->
    <slot />
  </IonApp>
</template>

<script setup>
import { IonApp } from "@ionic/vue"
useHead({
  viewport: 'width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover',
})
</script>
Enter fullscreen mode Exit fullscreen mode

We wrap all of the pages and we also set the meta tag for. the viewport of the application

Use Layout In Root Of Application

Create / Update the app.vue file in the root of the project to use the new ionicapp.vue layout that you created

<template>
    <NuxtLayout name="ionicapp">
        <NuxtPage />
    </NuxtLayout>
</template>
Enter fullscreen mode Exit fullscreen mode

Add Ionic Components To App

Add some Ionic Framework Vue specific components to the application. First we will update the index.vue page

<template>
  <IonPage>
    <IonHeader :translucent="true">
      <IonToolbar>
        <IonTitle>Home</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent class="ion-padding">
      <h1>WELCOME HOME on IOS AND ANDROID</h1>
      <IonButton @click="router.push('/about')">
        Goto About Page
      </IonButton>
    </IonContent>
  </IonPage>
</template>
<script setup lang="ts">
import {
  IonPage,
  IonHeader,
  IonTitle,
  IonToolbar,
  IonContent,
  IonButton
} from "@ionic/vue"
const router = useRouter();
</script>
Enter fullscreen mode Exit fullscreen mode

Now the about.vue page

<template>
  <IonPage>
    <IonHeader :translucent="true">
      <IonToolbar>
        <IonTitle>Home</IonTitle>
      </IonToolbar>
    </IonHeader>
    <IonContent class="ion-padding">
      <h1>This is the about page</h1>
      <IonButton @click="router.back()">
        Go Home
      </IonButton>
    </IonContent>
  </IonPage>
</template>
<script setup lang="ts">
import {
  IonPage,
  IonHeader,
  IonTitle,
  IonToolbar,
  IonContent,
  IonButton
} from "@ionic/vue"
const router = useRouter();
</script>
Enter fullscreen mode Exit fullscreen mode

Source Code

Check branch part 2

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

Ionic Capacitor VueJS Nuxt3 Starter Template

Ionic Capacitor VueJS Nuxt3 Starter Template



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

Discussion (2)

Collapse
aekasitt profile image
Sitt Guruvanich

This is a nice tutorial! thank you. Also checked out your YouTube video series for this as well. I think you can definitely turn this into a course and all power to you if you do.

Collapse
aaronksaunders profile image
Aaron K Saunders Author

Thanks, I am trying to figure out how to transition this series into a paid course ๐Ÿ˜ฌ