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

Collapse
 
tylerclark profile image
Tyler Clark •

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