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

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',
    ]
})

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);
});

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>

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>
```

##Add Ionic Components To App
Add some Ionic Framework Vue specific components to the application. First we will update the `index.vue` page
```vuejs
<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>
```
Now the `about.vue` page
```vuejs
<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>
```
###Source Code
Check branch `part 2`

  

    

      
      
        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.






  


  
View on GitHub




www.clearlyinnovative.com

Comments

[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.

[Aaron K Saunders]

Thanks, I am trying to figure out how to transition this series into a paid course 😬

[elinardo10]

nice tutorial. i have a question: in ionic i can't navegation outside ion-button o outher button component? like nuxt has :to, nunxtLink etc.. ion-button make a layout style different of my app with tailwind. how can i do. exemplo navigate with tag or ?

[Tyler Clark]

Can't believe I'm just now seeing this! Another great one Aaron!

[A++Labs]

thx for this, can i use ionic vue nuxt 3 to create a 1fits all project for web, android & ios.
and the web will it be seo friendly (ssr rendered)?
all from 1 source code?