Getting Started with Modus Ionic-Vue

Over the past few weeks, I have been working with a team of fellow developers (Michael Tintuic, Tom Collins, and Grgur Grisogono) on additions to the Modus Ionic-Vue 3 Connector library as well as an Ionic-Vue demo app (Vueport-Shop). This article will share some of my experiences, a basic guide starting from scratch, and help with common issues as you start developing with the Ionic-Vue library.

How To Initialize an Ionic Vue Application

We are going to use Vue CLI for the initial scaffolding. This is an excellent option because Vue CLI sets up a fantastic framework built on top of Webpack and is well optimized for both Vue and Ionic.

First, you want to make sure that the Vue 3 library and command line interface (Vue CLI) are installed globally on your computer by running the following command.

sudo npm install -g @vue/cli@next

Afterwards, you can run the following commands to set up the boilerplate code for your application as well as install the following dependencies: vue-next (aka Vue 3), TypeScript, Ionic Core, Vue 3 Router, latest version of Modus Ionic Vue.

vue create example_app
// select "Default (Vue 3 Preview) ([Vue 3] babel, eslint)"
cd example_app
vue add typescript -y
npm i -S @modus/ionic-vue@next vue-router@next @ionic/core

At this point, we are ready to open up our application in the IDE and start coding.

Adding Typescript to an Ionic Vue App

Right off the bat, we need to navigate to the src folder and open it. We will start off by doing 3 things.

1. Find the shims-tsx.d.ts file and delete it, as we will not be using tsx in our application.
2. Find the shims-vue.d.ts file and change the code to the following. This essentially allows us to import Vue files into our typescript code.

    
   // src/shims.vue.d.ts
   declare module '*.vue' {
    import { ComponentOptions } from 'vue';
    var component: ComponentOptions;
    export default component;
   }
   

3. Find the App.vue file and change the template and script code to the following. The App.Vue file serves as the highest level global component where routing is managed. You can also apply global styles here in between the style tags:

   // src/App.vue
   <template>
    <IonApp>
      <IonRouterView />
    </IonApp>
   </template>
   
   <script lang="ts">
   import { IonApp, IonRouterView } from '@modus/ionic-vue';
   import { defineComponent } from 'vue'
   export default defineComponent({
    name: "App",
    components: {
      IonApp,
      IonRouterView,
    },
   });
   </script>
   

Routing in Ionic Vue

Once you are finished with that, create a folder inside the src folder called router. Inside this folder, create a file called router.ts with the following code. This allows navigation between different pages which are separate vue components. In the following code, we have a root Home.vue component and a secondary HelloWorld.vue component which we are able to navigate to and pass in props to through our router.

// src/router/router.ts
import { createWebHistory } from 'vue-router'
import { createRouter } from '@modus/ionic-vue'
const home = () => import('@/components/Home.vue')
const hello = () => import('@/components/HelloWorld.vue')

const history = createWebHistory();
const router = createRouter({
  history,
  routes: [
      {path:"/", component: home},
      {path:"/hello", component: hello, props: {msg: "You are on the hello page"}},
      {path:"/hello2", component: hello, props: {msg: "You are on the hello2 page"}}
  ]
})
export default router;

Next, we need to create/edit our page components. Navigate into the components folder inside src, which will hold our two pages. Let’s do two things here.

1. Edit the template and script tags in HelloWorld.vue. As you can see in the following code, we are able to pass props to the component through the router.ts file (in this case, msg).

   // src/components/HelloWorld.vue
   <template>
    <div class="hello">
      <h1>
        <RouterLink to="/">Go back home</RouterLink>
      </h1>
      <h2>{{ msg }}</h2>
    </div>
   </template>
   
   <script lang="ts">
   import { defineComponent } from 'vue';
   export default defineComponent({
    name: 'HelloWorld',
    props: {
      msg: String,
    },
   });
   </script>
   

2. Create a file called Home.vue and copy the following. This will serve as our home page. As you can see in the script tags, we are able to import Ionic components (full list here) from the Modus Ionic-Vue library.

   <template>
     <div class="ion-page">
         <IonHeader>
             <IonToolbar>
                 <IonTitle>Example App</IonTitle>
             </IonToolbar>
         </IonHeader>
         <IonLabel class="link">
             <RouterLink to="/hello">Hello World</RouterLink>
         </IonLabel>
         
   
         <IonLabel class="link">
             <RouterLink to="/hello2">Hello World #2</RouterLink>
         </IonLabel>
     </div>
   </template>
   <script lang="ts">
   import {
     IonHeader,
     IonToolbar,
     IonTitle,
     IonLabel
   } from '@modus/ionic-vue';
   import { defineComponent } from 'vue'
   export default defineComponent({
    name: "Home",
    components: {
      IonHeader,
      IonToolbar,
      IonTitle,
      IonLabel
     }
   })
   </script>
   

For our final step, we will navigate back to the src folder and into the main.ts file. Replace the code there with the following snippet. This combines our App.vue component with our router in router.ts.

// src/main.ts
import { createApp } from 'vue'
import { IonicVue } from '@modus/ionic-vue'
//components
import App from './App.vue'
import router from '@/router/router'

const app = createApp(App).use(IonicVue).use(router)
router.isReady().then(() => {
 app.mount('#app')
})

Now, you are all set! Navigate to your command line and run the following!

npm run serve

You should see the following screens:

Home.vue (‘/’ path)

HelloWorld.vue (‘/hello’ path)

HelloWorld.vue (‘/hello2’ path)

This example demonstrates a very “boilerplate” template with routing and provides a good starting point to start working with the Ionic-Vue components and features. If you would like to check out all the code for this, you can find it at this repository.

IDE Fixes

Occasionally, the IDE will not recognize certain modules from Vue or Ionic-Vue libraries. This should not have any effect on the successful run of the sample application. However, it can be quite confusing. There are three simple solutions to this.

1. Restart the Typescript server
2. Restart IDE
3. Remove node_modules folder and run npm install in the terminal. Alternatively, execute “npm ci”, which will automatically discard the existing node_modules and reinstall dependencies.

Conclusion

In this blog post, we just learned how easy and streamlined it is to start using Ionic with your Vue application. Initially, I was intimidated by learning how to use Vue and Ionic together, but as we can see, their integration can be seamless and intuitive. Feel free to check out the Ionic-Vue library Github, Ionic components documentation, and our example app Vueport (and its Github page) to learn more about how to use this library. Special shoutout to the Ionic-Vue team: Michael, Grgur, and Tom for working with me and helping me learn as I continue my learning journey as a developer.