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.
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.