App-navigation-toggle not working for Vue.js apps

[raimund-schluessler]

The app-navigation toggle button which is visible for small screensizes does not work with Vue.js apps. This is because the event handler for this button is bound by jQuery before the Vue app loaded. Vue.js apps remove all event handlers from elements within their scope, so the snapjs handler is never triggered when the button is clicked.

I packed a small vue.js app to demonstrate the problem. It does nothing else then showing the problem. Just unpack it in your app folder, activate it and reduce the window size below 768 px width to show the app-navigation-toggle button. Then click the button and see that the app navigation menu does not appear.

I guess we have to load the vue.js app first and then bind the event handler for the button. Or handle it in vue and provide a function which the app can call to show the menu. But maybe @skjnldsv has a better idea.

vuetest.tar.gz

[nextcloud-bot]

GitMate.io thinks possibly related issues are #9767 (Vue apps issues), #9938 (Vue settings apps), #8991 (Right-click and »open in new tab« does not work for app navigation), #7801 (Nextcloud Talk APP NOT Working), and #4827 (App description not available for local apps).

[raimund-schluessler]

From lookin at https://github.com/nextcloud/contacts/tree/vue I realized that this does not happen when

<div id="content" class="app-vuetest">
</div>

is inside a vue template. Then the jQuery only runs when the Vue app is already rendered and the event handlers are not removed by vue.js anymore.

[skjnldsv]

Yeah, you need to have the app-content too for the snapjs to work.
And the root of your app still needs to fit the structure requirements :)

https://github.com/nextcloud/contacts/blob/0b5f975b5288e1a9548260f9ac8f47453982f9a7/src/views/Contacts.vue#L24

server/settings/src/views/Apps.vue

Line 24 in d644caf

<div id="content" class="app-settings" :class="{ 'with-app-sidebar': currentApp}">