DEV Community

Aaron K Saunders
Aaron K Saunders

Posted on

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

#ionic #vue #javascript #nuxt

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



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


  

    

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

    

      Ionic Capacitor VueJS Nuxt3 Starter Template
    

  

  

    


Ionic Capacitor VueJS Nuxt3 Supabase Starter Template






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





    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.




  

  
View on GitHub





www.clearlyinnovative.com
Enter fullscreen mode Exit fullscreen mode

Top comments (5)

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 •

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

Collapse
 
elinardo10 profile image
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 ?

Collapse
 
tylerclark profile image
Tyler Clark •

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

Collapse
 
apluspluslabs profile image
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?

Read next

thisisjofrank profile image

An intro to TSConfig for JavaScript Developers

Jo Franchetti -

slobodan4nista profile image

The Compounded Interest of Good Software: An example of Carousel Components

Slobi -

paulund profile image

How to debug axios requests

Paulund -

ninjasoards profile image

Easy Forms for VueJS with Formspree

David Y Soards -