@christianplus: Thanks a ton for your answer and your insights. I now understand the bit about vue routes and NC routes. I checked my dependencies and they look a lot like the ones of cookbook:
"dependencies": {
"@nextcloud/axios": "^1.10.0",
"@nextcloud/dialogs": "^3.1.4",
"@nextcloud/router": "^2.0.0",
"@nextcloud/vue": "^5.4.0",
"vue": "^2.7.0",
"vue-router": "^3.5.4"
},
The JS console remains silent and the NC log looks unsuspicious to me. That is, there is tons of messages App class OCA\\ReadmeMD\\Appinfo\\Application is not setup via query() but directly, but they seem unrelated.
My code contains the statement router.push('/apps/abakus/settings/profile') and after loading the app the URL shows this address so the routes object gets instantiated. Trouble is, the display area remains empty, nothing gets displayed. If I load the given URL in the browser my app seems to crash as the default app gets loaded.
I may still be missing something obvious am unable to find it. Here is my complete Abakus.vue file:
<template>
<div id="content">
<h1>Nested Named Views</h1>
<router-view></router-view>
</div>
</template>
<script>
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default ({
name: 'Abakus',
components: {
UserSettingsNav,
UserSettings,
UserEmailsSubscriptions,
UserProfile,
UserProfilePreview,
},
})
const UserSettingsNav = {
template: `
<div class="us__nav">
<router-link to="settings/emails">Emails</router-link>
<br>
<router-link to="settings/profile">Profile</router-link>
</div> `
}
const UserSettings = {
template: `
<div class="us">
<h2>User Settings</h2>
<UserSettingsNav/>
<router-view class ="us__content"/>
<router-view name="helper" class="us__content us__content--helper"/>
</div>
`,
components: { UserSettingsNav }
}
const UserEmailsSubscriptions = {
template: `
<div>
<h3>Email Subscriptions</h3>
</div>
`
}
const UserProfile = {
template: `
<div>
<h3>Edit your profile</h3>
</div>
`
}
const UserProfilePreview = {
template: `
<div>
<h3>Preview of your profile</h3>
</div>
`
}
const router = new VueRouter({
mode: 'history',
routes: [
{ path: 'settings',
// You could also have named views at the top
component: UserSettings,
children: [{
path: 'emails',
component: UserEmailsSubscriptions
}, {
path: 'profile',
components: {
default: UserProfile,
helper: UserProfilePreview
}
}]
}
]
})
router.push('settings/emails')
new Vue({
router,
name: 'Abakus',
el: '#content',
})
</script>
<style lang="css" scoped>
.us {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto;
grid-template-areas:
"header header"
"nav content"
"nav helper"
;
}
h2 {
grid-area: header;
}
.us__nav {
grid-area: nav;
border: 1px dotted;
margin-right: .75rem;
padding: .3rem;
}
.us__content {
grid-area: content;
}
.us__content--helper {
grid-area: helper;
}
</style>
.