Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

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

Autoplay

    Create an Ionic 4 application with Vue.js

    Paul HallidayPaul Halliday
    vueVue.js
    ionicIonic

    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.

    Code

    Code

    Become a Member to view code

    You must be a 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
    Transcript

    Transcript

    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.

    Discuss

    Discuss