Custom titlebar in Nuxt with Tauri with controls

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:

Blog

Custom titlebar in Nuxt with Tauri with controls

Waradu

Join Our Newsletter. No Spam, Only the good stuff.

Related