Vue 3, Ionic 6 menu component shows black screen - vue.js

Question

Project was setup using Ionic's CLI, nothing custom, except some linter configs.
The problem: every time i try to use IonMenu, it just breaks the whole page.
Page Component:
<template>
<ion-page>
<ion-menu
side="start"
content-id="menuContent"
>
<ion-header>
<ion-toolbar color="secondary">
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<ion-label>START MENU CONTENTS</ion-label>
</ion-content>
</ion-menu>
<ion-router-outlet id="menuContent" />
</ion-page>
</template>
<script>
import {
IonPage,
IonRouterOutlet,
IonContent,
IonHeader,
IonMenu,
IonTitle,
IonToolbar
} from '#ionic/vue';
import { defineComponent } from 'vue';
export default defineComponent({
name: 'index-page',
components: {
IonPage,
IonRouterOutlet,
IonContent,
IonHeader,
IonMenu,
IonTitle,
IonToolbar
}
});
</script>
Result (it's identical in browser and in emulator): nested menu content renders, but the page looks like this
If I remove <ion-menu> component, everything works just fine
My package.json
{
"name": "notes",
"version": "0.0.1",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"test:e2e": "vue-cli-service test:e2e",
"lint:eslint": "./node_modules/.bin/eslint -c .eslintrc.js .",
"lint:eslint:fix": "npm run lint:eslint -- --fix",
"lint:stylelint": "./node_modules/.bin/stylelint --config stylelint.config.js .",
"lint:stylelint:fix": "npm run lint:stylelint -- --fix"
},
"dependencies": {
"#capacitor/app": "1.1.1",
"#capacitor/core": "3.5.1",
"#capacitor/haptics": "1.1.4",
"#capacitor/keyboard": "1.2.2",
"#capacitor/status-bar": "1.0.8",
"#ionic/vue": "6.0.0",
"#ionic/vue-router": "6.0.0",
"core-js": "3.6.5",
"vue": "3.2.21",
"vue-router": "4.0.12"
},
"devDependencies": {
"#capacitor/cli": "3.5.1",
"#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",
"#vuebits/bem": "1.2.2",
"babel-jest": "27.3.1",
"cypress": "8.7.0",
"eslint": "8.4.1",
"eslint-config-airbnb-base": "15.0.0",
"eslint-plugin-unused-imports": "2.0.0",
"eslint-plugin-vue": "8.2.0",
"jest": "27.3.1",
"npm-run-all": "4.1.5",
"sass": "1.52.2",
"sass-loader": "13.0.0",
"stylelint": "13.13.1",
"stylelint-config-rational-order": "0.1.2",
"stylelint-config-standard": "22.0.0",
"stylelint-order": "4.1.0",
"stylelint-webpack-plugin": "2.1.1",
"ts-jest": "27.0.7",
"typescript": "4.3.5",
"vue-auto-routing": "1.0.1",
"vue-eslint-parser": "9.0.2"
},
"description": "An Ionic project"
}
My vue.config.js
const VueAutoRoutingPlugin = require('vue-auto-routing/lib/webpack-plugin');
const { definePlugin } = require('./config/webpack/define-plugin');
const { linterPlugins } = require('./config/webpack/linter-plugins');
const { getWebpackAliases } = require('./config/webpack/aliases');
module.exports = {
configureWebpack: config => {
config.stats = 'normal';
const routerPlugin = new VueAutoRoutingPlugin({
pages: 'src/pages',
importPrefix: '~/src/pages/'
});
config.plugins = config.plugins.concat([definePlugin, routerPlugin]);
if (process.env.LINT_ON_BUILD === 'true') {
plugins.push(...linterPlugins);
}
config.resolve.alias = { ...config.resolve.alias, ...getWebpackAliases() };
}
};