FE problem in app development

I’ve started created my own app based on NextCloud’s apps. I downloaded the app’s skeleton and create a simple VueJS app here: GitHub - Lucy781228/Custom-App

I only used one component which is NavBar.vue. I enabled my app, but nothing appeared when I click on the button on the navigation. I created a new <div> on /templates/main.php and only that <div> worked.

Can someone tell me what I did wrong?

P.S: Please ignore other .vue files, mixins folder and other Controllers (except PageController.php)

When clicking on the app icon, the NavBar doesn’t appear. :frowning:

Please help me.

Why there’s no one here.

If you open the browser console you see some errors. I guess once you resolved them it will work.

[Vue warn]: Property or method "loadingAddGroup" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <NavBar> at src/components/NavBar.vue
       <Root> vue.runtime.esm.js:4605
[Vue warn]: Unknown custom element: <NcContent> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <NavBar> at src/components/NavBar.vue
       <Root> vue.runtime.esm.js:4605
[Vue warn]: Unknown custom element: <NcAppNavigation> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <NavBar> at src/components/NavBar.vue
       <Root>
1 Like

You need to understand how community forums work :wink: You wrote your initial question 21 hours ago, then added a “reminder” one hour after that, then another one two hours after that, then a third one another two hours after that. This is not the way to ask for help on the Internet.

Almost everyone on this discussion forum is not employed to sit here on stand-by and answer questions the moment they come in. Almost everyone is just a user of Nextcloud just like yourself, or in some cases app developers. Regardless, anyone here helps when they can, if they can and assuming they have time to do so. Most people have a daily life, family, work, etc to attend and any help we get from each other is a very appreciated bonus and not something that should ever be demanded or expected.

So you really should not expect and even less demand help, instead post your question well formulated, and then wait and see if anyone can and want to help. It’s really that simple.

2 Likes

Thank you. I was worried because my 3 recent posts got no responses.

I edited the import lines. Now when I npm run build, it shows

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.

My webpack.config.js file is just the default:

const webpackConfig = require('@nextcloud/webpack-vue-config')
module.exports = webpackConfig

This is just a warning that the Vue app you have just built (successfully!), is a bit large. If you use this on a regular web site, you might see issues with the performance. In NC this should not be too problematic, as the typical user is not a google bot and not intended for fast navigation between different pages.

Just have a look on the web UI.

I realize the problem from @nickvergessen comment. I followed this: https://nextcloud-vue-components.netlify.app/#/Introduction to import NextCloud component. But when I checked the dist folder, there isn’t any .vue files and no files start with ‘Nc’.
Until now, I still couldn’t import NextCloud component successfully.

What version of @nextcloud/vue do you have installed?

Here is the source code. So the components haven’t been rendered.

It’s 5.4.0.

With version 6.0 the prefix Nc was added to all components. Version 5.x is sort of outdated.

If you are running NC 25 (or later) to test, you will have to update to version 7.x. Otherwise, you might test version 6.0.

1 Like

Yes, I’m in version 25. So I need to npm install @nextcloud/vue@7.3.0?

Exaclty. It might also be a good idea to run npm outdated to check what is also not up to date.

Here is the result. Do I need to upgrade anything else?

You must not upgrade to Vue 3. You can see if you can get rid of @nextcloud/axios or upgrade to version 2. I guess, the package @nextcloud/vue will need version 2 anyways.

You can check with npm ls @nextcloud/axios.

Thank you so much. I tried npm run build and it works.

2 Likes

Life is too short to worry about things! :wink:

Cool! Happy coding!