I am new to Nextcloud development. I am trying to make a Vue3 app. Right off the bat, my content box is right justified. I cannot find what CSS is used to create a proper margin. I was surprised that the margin was not the default. Any help resolving this would be appreciated.
Hello. Do you have the code already published?
I have not gotten that far. I am basically working on my Hello World to see components on the screen. The best I could find is forcing a width, but that can’t be the right way. Here is what I have:
<template>
<NcContent id="content" app-name="reale">
<NcAppNavigation>
<NcAppNavigationCaption name="Quick Tools" is-heading />
<NcAppNavigationList>
<NcAppNavigationItem name="Compensation" />
</NcAppNavigationList>
<NcAppNavigationCaption name="Real-Tools" is-heading />
<NcAppNavigationList>
<NcAppNavigationItem name="Clients" />
<NcAppNavigationItem name="Sale" />
<NcAppNavigationItem name="Calculation" />
</NcAppNavigationList>
</NcAppNavigation>
<NcAppContent />
</NcContent>
</template>
<script>
import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
import NcAppNavigationList from '@nextcloud/vue/dist/Components/NcAppNavigationList.js'
import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
export default {
name: 'App',
components: {
NcAppNavigation,
NcContent,
NcAppContent,
NcAppNavigationList,
NcAppNavigationItem,
NcAppNavigationCaption,
},
}
</script>
<style scoped lang="scss">
#content {
display: flex;
justify-content: right;
background-color: yellow;
width: 98%;
height:88%;
}
</style>
Okay, just to set things straight: you do not want to have right alignment, correct?
Well, there you have it. You put the css there to be right justified.
The content Id references to the NcContent component. I would say you should not alter this one at all. See also the documentation. The actual content of your app goes into NcAppContent. This is empty in your example.
Does it get better if you disable the css part as it is right now? Just rename the id and see what happens.
Chris
Sorry, I was fiddling, trying to figure this out. It is the box itself that is the issue I am having. I took out most of the CSS, and renamed the id. In the old wisdom of a picture is worth a thousand words, here is a picture of what my problem is, and the code that produced it. Thanks for helping me out with this.
<template>
<NcContent id="content" app-name="reale">
<NcAppNavigation>
<NcAppNavigationCaption name="Quick Tools" is-heading />
<NcAppNavigationList>
<NcAppNavigationItem name="Compensation" />
</NcAppNavigationList>
<NcAppNavigationCaption name="Real-Tools" is-heading />
<NcAppNavigationList>
<NcAppNavigationItem name="Clients" />
<NcAppNavigationItem name="Sale" />
<NcAppNavigationItem name="Calculation" />
</NcAppNavigationList>
</NcAppNavigation>
<NcAppContent>
This is some text....
</NcAppContent>
</NcContent>
</template>
<script>
import NcAppNavigation from '@nextcloud/vue/dist/Components/NcAppNavigation.js'
import NcContent from '@nextcloud/vue/dist/Components/NcContent.js'
import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
import NcAppNavigationList from '@nextcloud/vue/dist/Components/NcAppNavigationList.js'
import NcAppNavigationItem from '@nextcloud/vue/dist/Components/NcAppNavigationItem.js'
import NcAppNavigationCaption from '@nextcloud/vue/dist/Components/NcAppNavigationCaption.js'
export default {
name: 'App',
components: {
NcAppNavigation,
NcContent,
NcAppContent,
NcAppNavigationList,
NcAppNavigationItem,
NcAppNavigationCaption,
},
}
</script>
<style scoped lang="scss">
#notcontent {
display: flex;
background-color: yellow;
}
</style>
Is there something logged in the browser console? Are you using compatible versions of NC server code and Vue library (@ nextcloud/vue package)?
I am making a guess here that I have a Vue version problem, insight would be appreciated…
Here is my version info. I thought it was Vue 3, but it looks like it is vue 2.7.16. So, presumably, my first task is to upgrade Vue.
www-data@nextcloud:~/nextcloud/extra-apps/reale$ npm list vue
reale@1.0.0 /var/www/nextcloud/extra-apps/reale
├─┬ @nextcloud/vue@8.19.0
│ ├─┬ @linusborg/vue-simple-portal@0.1.5
│ │ └── vue@2.7.16 deduped
│ ├─┬ @nextcloud/vue-select@3.25.1
│ │ └── vue@2.7.16 deduped
│ ├─┬ @vueuse/components@11.1.0
│ │ ├─┬ @vueuse/shared@11.1.0
│ │ │ └─┬ vue-demi@0.14.10
│ │ │ └── vue@2.7.16 deduped
│ │ └─┬ vue-demi@0.14.10
│ │ └── vue@2.7.16 deduped
│ ├─┬ @vueuse/core@11.1.0
│ │ └─┬ vue-demi@0.14.10
│ │ └── vue@2.7.16 deduped
│ ├─┬ emoji-mart-vue-fast@15.0.3
│ │ └── vue@2.7.16 deduped
│ ├─┬ floating-vue@1.0.0-beta.19
│ │ ├─┬ vue-resize@1.0.1
│ │ │ └── vue@2.7.16 deduped
│ │ └── vue@2.7.16 deduped
│ ├─┬ vue-frag@1.4.3
│ │ └── vue@2.7.16 deduped
│ ├── vue@2.7.16 deduped
│ └─┬ vue2-datepicker@3.11.1
│ └── vue@2.7.16 deduped
├─┬ @nextcloud/webpack-vue-config@6.1.1
│ └── vue@2.7.16 deduped
└── vue@2.7.16
My “npm run watch” produces:
Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0.
My Nextcloud version is 30.0.0
My browser console produces:
session heartbeat polling started
_plugin-vue2_normalizer-BU0IC95A.chunk.mjs:4
GET https://192.168.32.10/ocs/v2.php/apps/notifications/api/v2/notifications 500 (Internal Server Error)
(anonymous) @ _plugin-vue2_normalizer-BU0IC95A.chunk.mjs:4
xhr @ _plugin-vue2_normalizer-BU0IC95A.chunk.mjs:4
ir @ _plugin-vue2_normalizer-BU0IC95A.chunk.mjs:6
_request @ _plugin-vue2_normalizer-BU0IC95A.chunk.mjs:7
request @ _plugin-vue2_normalizer-BU0IC95A.chunk.mjs:6
bt.<computed> @ _plugin-vue2_normalizer-BU0IC95A.chunk.mjs:7
(anonymous) @ _plugin-vue2_normalizer-BU0IC95A.chunk.mjs:2
bB @ NotificationsApp-CX_2Ib0T.chunk.mjs:34
YB @ NotificationsApp-CX_2Ib0T.chunk.mjs:34
_fetch @ NotificationsApp-CX_2Ib0T.chunk.mjs:34
mounted @ NotificationsApp-CX_2Ib0T.chunk.mjs:34
lt @ style-BNtK61kD.chunk.mjs:2
tt @ style-BNtK61kD.chunk.mjs:2
insert @ style-BNtK61kD.chunk.mjs:2
Ht @ style-BNtK61kD.chunk.mjs:2
(anonymous) @ style-BNtK61kD.chunk.mjs:2
Gi.t._update @ style-BNtK61kD.chunk.mjs:2
r @ style-BNtK61kD.chunk.mjs:2
t.get @ style-BNtK61kD.chunk.mjs:2
t.run @ style-BNtK61kD.chunk.mjs:2
Yi @ style-BNtK61kD.chunk.mjs:2
(anonymous) @ style-BNtK61kD.chunk.mjs:2
fn @ style-BNtK61kD.chunk.mjs:2
Promise.then
Gt @ style-BNtK61kD.chunk.mjs:2
ge @ style-BNtK61kD.chunk.mjs:2
oe @ style-BNtK61kD.chunk.mjs:2
t.update @ style-BNtK61kD.chunk.mjs:2
Gi.t.$forceUpdate @ style-BNtK61kD.chunk.mjs:2
s @ style-BNtK61kD.chunk.mjs:2
(anonymous) @ style-BNtK61kD.chunk.mjs:2
(anonymous) @ style-BNtK61kD.chunk.mjs:2
Promise.then
Pi @ style-BNtK61kD.chunk.mjs:2
nr @ style-BNtK61kD.chunk.mjs:2
Ti @ style-BNtK61kD.chunk.mjs:2
Sn @ style-BNtK61kD.chunk.mjs:2
t.$createElement @ style-BNtK61kD.chunk.mjs:2
render @ notifications-main.mjs?v=45c2f534-0:3
Ai.t._render @ style-BNtK61kD.chunk.mjs:2
r @ style-BNtK61kD.chunk.mjs:2
t.get @ style-BNtK61kD.chunk.mjs:2
t @ style-BNtK61kD.chunk.mjs:2
qi @ style-BNtK61kD.chunk.mjs:2
M.$mount @ style-BNtK61kD.chunk.mjs:2
t._init @ style-BNtK61kD.chunk.mjs:2
M @ style-BNtK61kD.chunk.mjs:2
(anonymous) @ notifications-main.mjs?v=45c2f534-0:3
NotificationsApp-CX_2Ib0T.chunk.mjs:34 Slowing down notifications: Status 500
No, this is correct. See the documentation about nextcloud/vue: Version 8.x is for NC >=28 and Vue2. To upgrade to Vue3 you have to use v9.x.
This looks like you have a more severe problem in your server. When loading the page, do you see any more network issues/errors?
He! I have the exact same error and no internal server errors. I also followed the documentation, use Vue2 on NC32 (cause Vue3 is not released, right?). But the NcContent is right positioned and margin-top more then it should be 
I found the solution! The class off the main-point where we hook up the vue app must set as content - the app-skeleton-generator is wrong, cause here the id is set to the app name! I described the solution here:
thread with solution
1 Like
I’d say this is either fixed in the meantime or you changed stuff in the code that you were not aware of. I just tetsed it. It has matching entries in the id and the mount function.
Well, yes - if you create an app with the app name thisismy you get an sekeleton-app working. But the App.vue contains “NcAppContent” - thats not correct, cause the mainpoint should be NcContent. If you changed that in the skeleton the NcContent-Behavior is wrong because the id in the main.js and index.php are equal with the appname you gave, like thisismy - if you then change the id in the main.js and the main.php to content instead of thisismy the behavior of NcContent is correct. I did not changed any code and i did not say that the mounting is not working. But the behavior of NcContent only works correct if the mount-point of the App.vue is in an div with the id content!
Hello,
in order to track this best, I would ask you kindly to go to the github Repo of the app template, open an issue and describe precisely the steps you took to get first a non-working and then a working solution. That way, it might be handled best, I guess.
Ideally, please post here a link to the created issue for reference.
Chris