Using The Ionic Framework with Webpack, Capacitor & Vue To Build PWAs, iOS & Android Apps

This article outlines how to use the Ionic Framework with Webpack, Capacitor and Vue, including setting up vue router, vuex, and ionicons to make your life a little easier for building PWAs, iOS and Android apps. Enjoy!

Create Vue Project

First create a vue project using the webpack-simple template.

vue init webpack-simple my-app

Setup Environment Variables

Next create .env file for your production variables.

VUE_APP_NAME=MyApp

Then create .env.dev file for your development variables.

VUE_APP_NAME=MyApp Dev

Update Webpack Package

Make sure to update to the latest webpack.

npm install webpack@latest --save-dev

Add Vue Packages

Now let’s add some vue packages.

npm install @vue/cli-service @vue/cli-plugin-babel @vue/cli-plugin-eslint vue-cli-plugin-route --save-dev

Update Package Json