How To Build A Nuxt 3 Ionic Capacitor Starter App - Adding Ionic Vue Components
Tags: ionic, vue, javascript, nuxt
Published: 2022-05-15 03:55:31

**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/

{% youtube jwntqsrTXc4 %}

##Install Ionic and Ionic Core
```shell
npm install @ionic/core @ionic/vue
```
##Add Styles
Update your nuxt.config.ts to include the required CSS files for Ionic.
```javascript
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
```javascript
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.
```vuejs
<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
````vuejs
<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 aaronksaunders/ionic-capacitor-nuxt-video-app %}

www.clearlyinnovative.com