Custom titlebar in Nuxt and Tauri? Not to hard! I will use the code from the previous tutorial, but you can use it in any existing project without any problems. And like always, everything is on GitHub.
First Step: Create a components folder and a Titlebar.vue file inside. Inside the newly created file, we need a <template>, <script setup lang="ts">, <style lang="scss">:
<template>
</template>
<script setup lang="ts">
</script>
<style lang="scss">
</style>
In the template, section, we add a div with class titlebar and style it, so it is visible:
<template>
<div data-tauri-drag-region class="titlebar">
</div>
</template>
<style lang="scss">
.titlebar {
background-color: rgba(0,0,0,50%);
height: 40px;
user-select: none;
position: fixed;
top: 0;
left: 0;
right: 0;
}
</style>
You can make any object to a draggable region with data-tauri-drag-region.
But before it works, you'll need to:
Add this to the allowlist in src-tauri/tauri.conf.json:
{
...
"tauri": {
"allowlist": {
"window": {
"all": true
}
}
},
...
}
and add the Titlebar component to app.vue:
<template>
<Titlebar />
</template>
To add controls, add the following to the titlebar div, add some typescript and change some styles (you can customize it as you like):
<template>
<div data-tauri-drag-region class="titlebar">
<div class="titlebar-button" id="titlebar-minimize" @click="minimize">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6 12H18" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>
<div class="titlebar-button" id="titlebar-maximize" @click="toggleMaximize">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2 9V6.5C2 4.01 4.01 2 6.5 2H9" stroke="#ffffff" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M15 2H17.5C19.99 2 22 4.01 22 6.5V9" stroke="#ffffff" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M22 16V17.5C22 19.99 19.99 22 17.5 22H16" stroke="#ffffff" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
<path d="M9 22H6.5C4.01 22 2 19.99 2 17.5V15" stroke="#ffffff" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</div>
<div class="titlebar-button" id="titlebar-close" @click="close">
<svg width="18" height="18" viewBox="0 0 24 24" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg">
<g id="close" fill-opacity="1">
<path d="M0 0L24 0L24 24L0 24L0 0Z" id="close" fill="none" fill-rule="evenodd" stroke="none" />
<g id="close">
<path d="M2 22L22 2" id="Vector" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path d="M22 22L2 2" id="Vector" fill="none" fill-rule="evenodd" stroke="#fff" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" />
<path d="M24 0L24 24L0 24L0 0L24 0Z" id="Vector" fill="none" fill-rule="evenodd" stroke="none" />
</g>
</g>
</svg>
</div>
</div>
</template>
<style lang="scss">
.titlebar {
background-color: rgba(0,0,0,50%);
height: 40px;
user-select: none;
display: flex;
justify-content: flex-end;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
align-items: center;
padding-inline: 2px;
}
.titlebar-button {
display: flex;
justify-content: center;
align-items: center;
fill: white;
width: 32px;
height: 32px;
border-radius: 3px;
margin-inline: 3px;
padding: 0;
}
.titlebar-button:last-child {
margin-right: 6px;
}
.titlebar-button:hover {
background: #303030;
}
#titlebar-close:hover {
background-color: #e06c75;
}
</style>
<script setup lang="ts">
import { appWindow } from "@tauri-apps/api/window";
function minimize() { appWindow.minimize(); }
function toggleMaximize() { appWindow.toggleMaximize() }
function close() { appWindow.close() }
</script>
It should now look like this:
Top comments (0)