Skip to content
  • Services
    • Strategy
    • Customer Experience
    • Agile Delivery
    • Security
  • About
  • Partners
    • Aha!
    • Amazon Web Services (AWS)
    • Atlassian
    • Cloudflare
    • GitHub
    • InVision
    • Ionic
    • Pendo
    • Radar
    • Vue.js
  • Work
    • Modus Create Labs
  • Insights
    • Blog
  • Careers
  • Contact
  • Services
    • Strategy
    • Customer Experience
    • Agile Delivery
    • Security
  • About
  • Partners
    • Aha!
    • Amazon Web Services (AWS)
    • Atlassian
    • Cloudflare
    • GitHub
    • InVision
    • Ionic
    • Pendo
    • Radar
    • Vue.js
  • Work
    • Modus Create Labs
  • Insights
    • Blog
  • Careers
  • Contact
August 19, 2020

Getting Started with Modus Ionic-Vue

Front End Development, JavaScript, 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
    
     
       
     
    
    
    
    import { IonApp, IonRouterView } from '@modus/ionic-vue';
    import { defineComponent } from 'vue'
    export default defineComponent({
     name: "App",
     components: {
       IonApp,
       IonRouterView,
     },
    });
    
    

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
    
     <div class="hello">
       <h1>
         Go back home
       </h1>
       <h2>{{ msg }}</h2>
     </div>
    
    
    
    import { defineComponent } from 'vue';
    export default defineComponent({
     name: 'HelloWorld',
     props: {
       msg: String,
     },
    });
    
    
  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.
    
      <div class="ion-page">
          
              
                  Example App
              
          
          
              Hello World
          
          
    
          
              Hello World #2
          
      </div>
    
    
    import {
      IonHeader,
      IonToolbar,
      IonTitle,
      IonLabel
    } from '@modus/ionic-vue';
    import { defineComponent } from 'vue'
    export default defineComponent({
     name: "Home",
     components: {
       IonHeader,
       IonToolbar,
       IonTitle,
       IonLabel
      }
    })
    
    

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)
Screen Example 1

HelloWorld.vue (‘/hello’ path)
Screen Example 2

HelloWorld.vue (‘/hello2’ path)
Screen Example 3

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.

Posted in Front End Development, JavaScript, Vue
Share this

Timmy Vu

Timmy Vu was a Project Intern at Modus Create. He started programming/software development during his freshman year of high school and has enjoyed it ever since. Timmy loves to solve problems and is interested in learning more about cloud technologies such as AWS and Azure and JavaScript frameworks. Outside of work, Timmy likes to run, spin vinyl, and play the piano. This fall, he will be attending Cornell University in Ithaca, NY.
Follow

Related Posts

  • The Ionic Vue Adapter
    Ionic Framework Officially Announces Vue.js Support

    Modus Create is extremely excited to announce that our contribution to Ionic Framework, the Ionic-Vue…

  • Using Ionic 4 in Vue applications with BEEP
    Using Ionic 4 in Vue applications with BEEP

    One of our core values is giving back to the open source community. To test…

Subscribe to the Modus Newsletter

Receive the latest blog articles and insights every month from the Modus team.

Join Our Global Team

Would you like to be a Modite? We are redefining distributed consultative services. We have open positions throughout the globe.

See Open Positions

Let's Chat

If forms aren’t your thing, you can always call us (+1-855-721-7223).

Modus-Logo-Primary-White.svg
  • Services
  • About
  • Partners
  • Work
  • Insights
  • Newsroom
  • Careers
  • Contact
Virginia (US)

12100 Sunset Hills Road
Suite 150
Reston, Virginia, 20190
Tel: +1-855-721-7223

California (US)
12130 Millennium Dr

Los Angeles, CA 90094

Missouri (US)
609 E High St

Jefferson City, MO 65101

Romania

Str. Mihai Veliciu, no. 17
Cluj-Napoca, Romania
Tel: +40-0786-887-444

Costa Rica

2nd Floor, Plaza Koros, Av 3
San José, Santa Ana, Costa Rica

© 2021 Modus. All Rights Reserved.

Privacy Policy | Accessibility Statement | Sitemap

This website uses cookies.
These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Accept
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled

Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.

Non-necessary

Any cookies that may not be particularly necessary for the website to function and is used specifically to collect user personal data via analytics, ads, other embedded contents are termed as non-necessary cookies. It is mandatory to procure user consent prior to running these cookies on your website.

Scroll To Top