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

santanaluc94 profile image

Como funcionam Bindings de Fluxo de Controle no KnockoutJs

Lucas Teixeira dos Santos Santana -

dhruvikdonga profile image

SimplySocket: A Lightweight WebSocket Wrapper for Go

Dhruvik Donga -

hamzakhan profile image

🌀 State Management in React: Comparing Redux Toolkit vs. Zustand 📊

Hamza Khan -

siisee11 profile image

Langgraph Human In The Loop with socket

Jaeyoun Nam -