NcContent wrong position

[holger-dev]

I try to build a minimal vue-example and did a lot of reading, but: NcContent makes me crazy. The App-Generatpr creates an App with NcAppContent, but the documentation and NcAppNavigation says, i MUST use NcContent as the main wrapper. But look at the result:

And here is the code of my App.vue

<template>
	<NcContent app-name="forms">
		<NcAppNavigation />
		<NcAppContent>
			<h2>Your main app content here</h2>
		</NcAppContent>
	</NcContent>
</template>
<script>
import { NcContent, NcAppContent, NcAppNavigation } from '@nextcloud/vue'
export default {
	components: {
		NcAppContent,
		NcAppNavigation,
		NcContent,
	},
	data() {
		return {
			opened: false,
		}
	},
}
</script>

And package (standard from the app-generated stuff)

"dependencies": {
    "@nextcloud/vue": "^8.11.2",
    "vue": "^2.7.16"
  },
  "devDependencies": {
    "@nextcloud/browserslist-config": "^3.0.1",
    "@nextcloud/eslint-config": "^8.3.0",
    "@nextcloud/stylelint-config": "^2.4.0",
    "@nextcloud/webpack-vue-config": "^6.0.1",
    "eslint-webpack-plugin": "^4.1.0",
    "stylelint-webpack-plugin": "^5.0.0"
  }

[holger-dev]

Ok, i found the solution. The Problem is not in the packages, it is the mount-point of the vue-app. You NEED to set the id of the main-div where to mount the app-app to content!

This is the main.js

import Vue from 'vue'
import App from './views/App.vue'
Vue.mixin({ methods: { t, n } })

const View = Vue.extend(App)
new View().$mount('#content')

And the main.php (or index.php, depends on the TemplateResponse in the index-function of the PageController.php)

<?php

declare(strict_types=1);

use OCP\Util;

Util::addScript(OCA\MyStupidApp\AppInfo\Application::APP_ID, 'main');

?>

<div id="content"></div>

I also checked some css-Files and Vue-NC-Files and the content looks like the correct class where the correct behavior is set. Well, in my opinion its pretty bad cause the skeleton-app-generator creates an app with that bug. If you change the default-skeleton-app to the code in the Vue-App as said i the documentation you get that wrong behavior. It should be fixed!