How to mount a Vue component into Filelist Sidebar Tabview?

Some time ago I created an unpublished app that allows a user to use a simple form to write a specific file to a folder by using the sidebar. Simplified here’s what it does:

  • Registers a new tab view in the sidebar if selected item is a directory
  • Shows a form to enter some information in the tab view
  • Sends the information to a Nextcloud REST endpoint
  • Backend saves a specific file to the folder with the user input properly formatted for an external script

However, I’ve been adapting a lot of code from the versions app back then.

Now I’d like to update the app, because some JS APIs broke over time. But I’d like to do so in a future-proof way. Actually, I’d like to mount a Vue component into a tab view. Is that even possible? Is there any app that does that already?

For example registerTabView is now deprecated. But no-where it says how to register your tab view instead. Core apps still seem to be using it on master. How’s the way forward? Where do I find references to the future of interacting with the filelist?

Also, @skjnldsv, you’ve been editing the sidebar class recently and added the warning or moved it over to a new version ( Hope I’m allowe to ping you. Can you help? :wink:


See some example:

Your tab needs to provide a Name and an id

1 Like

Hey! This was such a helpful pointer, thanks a lot! :heart_eyes:

The tricky part was to set up webpack, because the structure is a bit different in the server repository than it would be for a simple app, but it’s do-able.

It feels like a lot less code to interface with the sidebar component than it used to be…

A bit late, but yes! :slight_smile:
Have a look at though

That’s really helpful! :slight_smile:

One more question that came up just now: How do I implement the previous canDisplay method?

It seems like there’s a isEnabled method that is being called on the component, but if I pass it as a prop to the component for me it’s not being executed. How does this work? :thinking: