Vuetify

[NinjaJake86]

Hello!

I'm trying to get a Vuetify app bar to be a dragable titlebar but this doesn't seem to work when you add the data-tauri-drag-region tag to the element it is not draggable, anyone got any ideas?

Thanks! :)

[amrbashir]

What does your code look like ? Also open the dev tools and check if attribute is applied to the final HTML correctly.

[NinjaJake86]

So, for the app bar i have this (Minimal example)

<template>
<v-app-bar data-tauri-drag-region flat dense app style="background: linear-gradient(to bottom, #9c1483, #c31432); user-select: none;">
</v-app-bar>
</template>

I've checked with inspect and the attribute does exist on the header element

<header class="v-sheet theme--dark v-toolbar v-toolbar--dense v-toolbar--flat v-app-bar v-app-bar--fixed" data-booted="true" data-tauri-drag-region="" style="height: 48px; margin-top: 0px; transform: translateY(0px); left: 0px; right: 0px; background: linear-gradient(rgb(156, 20, 131), rgb(195, 20, 50)); user-select: none;"></header>

[NinjaJake86]

Thats great! Thank you for looking at this! Looking forward to the update. :)

[amrbashir]

Here is the PR #3031 , if all goes well, the fix should be in the next release but it is better to find a way to put the tag directly on the element that receives the click.

[amrbashir]

A bit of an update: we can't do anything on our side without messing up other stuff. Seems like the best option for you is to find some other way to add the tag to the child.

In your Vuetify case, you can, in your mounted hook, get a reference to the v-app-bar element and apply the data-tauri-drag-reigon to its first child.

[NinjaJake86]

Okay, thanks for that! Following your advice i managed to get this working using the below code

mounted() { let topBar = document.getElementById("topBar"); topBar.children[0].setAttribute("data-tauri-drag-region", ""); }

Hope this helps anyone else who is experiencing the same issue! And thanks for all the help @amrbashir

[FabianLars]

@NinjaJake86 Hmm, you can probably just make the spacer actually fill the space and add the attribute to that one 🤔