Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Create an Ionic 4 application with Vue.js


    Creating cross-platform web-based applications with Ionic 4 and Vue is easy thanks to the Stencil compiler and the Vue.js CLI.

    We look at how to combine these together to use Ionic 4 components within our Vue.js applications.



    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In




    Instructor: 0:00 Using the Vue CLI, create a new project called IonicVue. Select default from the preset options. From within the IonicVue directory, install @ionic/vue, @ionic/core, and the vue-router. Then start your project with npm run serv.

    0:20 We can then add the styling for Ionic inside of Main.js. We can then import IonicVue from @ionic/vue. Register this as a Vue plug-in by using Vue.use. This allows us to use the web components for Ionic anywhere inside of our application.

    0:41 Therefore, inside of App.vue, we can now go ahead and create an Ion app inside of our App.vue. Inside of the Ion app, add a variety of different ionic elements. We can now use the Ionic for web components, inside of our Vue application.