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
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',
]
})
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);
});
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>
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`
aaronksaunders
/
ionic-capacitor-nuxt-video-app
Ionic Capacitor VueJS Nuxt3 Starter Template
Ionic Capacitor VueJS Nuxt3 Supabase Starter Template
- Blog Post: https://dev.to/aaronksaunders/how-to-build-a-nuxt3-ionic-capacitor-starter-app-4d3k
- Video: https://youtu.be/tDYPZvjVTcc
Code For Each Video
There is a seperate branch for each video in the series
- Part One: https://github.com/aaronksaunders/ionic-capacitor-nuxt-video-app
- Part Two: https://github.com/aaronksaunders/ionic-capacitor-nuxt-video-app/tree/part-2
- Part Three: https://github.com/aaronksaunders/ionic-capacitor-nuxt-video-app/tree/part-3
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
Development Server
Start the development server on http://localhost:3000
npm run dev
Production
Build the application for production:
npm run build
Locally preview production build:
npm run preview
Checkout the deployment documentation for more information.
Top comments (5)
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.
Thanks, I am trying to figure out how to transition this series into a paid course 😬
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 ?
Can't believe I'm just now seeing this! Another great one Aaron!
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?