Capacitor + android gives a blank screen

Capacitor
1

Hi, I created a ionic/vue project with pre-configured template then added capacitor. The setup works OK on the browser but in android emulator I am only getting a blank screen.

I am using the latest version of everything. Android Studio was downloaded yesterday.
ionic 6.20.2
npm 8.19.2

package.json as follows:

  "dependencies": {
    "@capacitor/android": "^4.4.0",
    "@capacitor/app": "4.1.0",
    "@capacitor/core": "^4.4.0",
    "@capacitor/haptics": "4.0.1",
    "@capacitor/ios": "^4.4.0",
    "@capacitor/keyboard": "4.0.1",
    "@capacitor/status-bar": "4.0.1",
    "@ionic/vue": "^6.0.0",
    "@ionic/vue-router": "^6.0.0",
    "core-js": "^3.6.5",
    "ionicons": "^6.0.3",
    "vue": "^3.2.21",
    "vue-router": "^4.0.12"
  },
  "devDependencies": {
    "@capacitor/cli": "^4.4.0",
    "@types/jest": "^27.0.2",
    "@typescript-eslint/eslint-plugin": "^5.6.0",
    "@typescript-eslint/parser": "^5.6.0",
    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
    "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
    "@vue/cli-plugin-router": "~5.0.0-rc.1",
    "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
    "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
    "@vue/cli-service": "~5.0.0-rc.1",
    "@vue/eslint-config-typescript": "^9.1.0",
    "@vue/test-utils": "^2.0.0-rc.16",
    "@vue/vue3-jest": "^27.0.0-alpha.3",
    "babel-jest": "^27.3.1",
    "cypress": "^8.7.0",
    "eslint": "^8.4.1",
    "eslint-plugin-vue": "^8.2.0",
    "jest": "^27.3.1",
    "ts-jest": "^27.0.7",
    "typescript": "^4.3.5"
  },

Any suggestions? Thanks.