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.

https://app.egghead.io/api/v1/lessons/vue-js-create-an-ionic-4-application-with-vue-js/subtitles

Create an Ionic 4 application with Vue.js

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.

Create an Ionic 4 application with Vue.js

Share this video with your friends