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

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





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?