DEV Community: Waradu

Vibecoding and the future of code security

Waradu — Thu, 06 Nov 2025 18:54:20 +0000

TLDR: We analyzed 50 vibe-coded projects and found that 86% contained security vulnerabilities, ranging from insufficient input validation to remote code execution and exposure of personal user information.

This blog can also be read on our website

What even is vibe coding?

There are many Ai assistants such as Cursor or Windsurf to this date which help you write code for you. Programmers no longer need the technical expertise to create an MVP of an app. Creating applications or websites without having the knowledge of what you are doing is often referred to as “vibe coding”.

What is this article about?

In this article, we will have a look at how vibe coding impacts code security, the implications it already has, and how we can prevent such critical bugs from happening?

The problem with vibe coding

We have analyzed 50 projects’ source code or production API which likely were made using Ai toos, ranging from simple projects like note taking applications to more complex applications with thousands of users. Of these projects, 43 were vulnerable to attacks, reaching from a simple enumeration exploits to full remote code execution.

All vulnerabilities found were disclosed and fixed by the developer(s).

We have compiled a table from that data which highlights the vulnerability type and the number of projects which were affected. Our table therefore does not sum up to 50, but instead the total number of vulnerabilities found during our analysis.

Vulnerability Type	Vulnerability Count
Full user access with PII	2
Remote Code Execution	3
Unintentional CORS *	4
Dependencies with known vulnerability	9
Enumeration attacks	24
XSS attacks	27
CSRF attacks	28
Insufficient input validation	41

With help from this table, it is notable taht most of the attacks were caused by the lack of input validation, which can be prevented with proper input validation. AIs make this mistake because they do not plan ahead what they are doing, and neither are they taught to reason about their code’s security, nor about it’s quality. The API routes often elicited an error message to the attacker with sensitive information, such as, but not limited to paths, filesnames and sometimes values from the database or stack used in the application. Here is an example of vulnerable code and how it could have been fixed:

Old code

async createSet(data: Prisma.SetCreateInput, userId: string) {
  return this.prisma.set.create({
    data: {
      ...data,
      author: {
        connect: {
          id: userId,
        },
      },
    },
  });
}

Fixed Code

async createSet(data: CreateSetDTO, userId: string) {
    return this.prisma.set.create({
        data: {
        name: data.name,
        description: data.description,
        author: {
          connect: {
            id: userId,
          },
        },
        pairs: {
          createMany: {
            data: data.pairs.map(pair => ({ key: pair.key, value: pair.value }))
          }
        },
      },
    });
}

As you can see, it is not hard to catch such vulnerabilities and fix them.

The second most found vulnerabilities are CSRF and XSS attacks.

XSS attacks happen when the user loads malicious content, e.g. content from another user that executes code. This can be prevented with proper input validation. Most modern frameworks also handle that for you.

CSRF attacks occur when an attacker tricks the victim into submitting a malicious request to a web application, where the browser authenticates the request with cookies. This can easily prevented by using proper CSRF tokens. The easiest way to prevent CSRF attacks is to not use cookies and rather manually set bearer tokens in the header of each request to the backend.

Enumeration attacks were also quite common. This vulnerability is used in combination with other vulnerabilities to quickly download data, that otherwise would have required large amounts of time to discover. One simple way of preventing enumeration attacks is using non-incremental IDs in your database. Implementing something safer, like UUIDs will make it harder (if not almost impossible) to guess the IDs.

Quickly disregarded by unexperienced developers were outdated dependencies, which had known vulnerabilities, that simply could have been prevented, by updating the dependencies of the project to the latest version. While this is not an issue of vibe coding itself, vibe-coders don’t know the importance of chores.

CORS attacks were also found in a few projects. This is likely just a leftover from development but cannot happen. We think that the source of such vulnerabilities are likely a “fix” by some Ai tool, which was never removed because the developer(s) were not aware of its existence.

Now to the more interesting vulnerabilities. The first we found was a vulnerability to execute code on the backend. Each of the 3 times we found a remote code execution vulnerability, the backend code was running another binary without proper input validation. This leads back to the first attack with insufficient input validation, which can be prevented by using proper input validation or even better not needing to run external binaries in the first place.

As already mentioned, the last vulnerability is related to the vulnerability with the enumeration attack. This vulnerability allowed anyone to request data about a user, including personal information such as email addresses, phone numbers, github and google access tokens, full names and more.

A lot had gone wrong there. The backend code had no implementation of access controls and data shadowing was therefore sending any user data to the client. Based on the response, we can tell that absolutely no testing was made because that would have easily been seen by the developers.

This likely happened because the AI tool generated code that selected the whole user and did not remove the password and other fields from the response.

We have tested our theory a few times on our own and have come to the conclusion that Ai fails to implement permission checks and often selects too much data, because it is not aware of the context.

What can we learn from this?

Ai is a great tool for creating content quickly, but it can also be a great path to createing critical security vulnerabilities and bugs.

We think that it is important that you understand your own code, or the one of your AI assistants. Always have a second look at your code and make sure that you understand what it is doing.

If you have got your own application or website, you can contact us and we will be happy to help you with finding bugs and vulnerabilities.

With love from Switzerland 🇨🇭
- Epilogue Team
- contact@epilogue.team

How to commit

Waradu — Sat, 09 Nov 2024 13:50:40 +0000

go to prefix list directly

Why Even Bother?

Open one of your old repositories and type git log in the terminal. Chances are, you have no idea what you meant by update four months ago.

And no, commit messages like changes, a, or pls just work are not only unhelpful to you but also annoying for your teammates. Clear and informative commit messages make a big difference, especially in collaborative projects.

Use the imperative mood in subject lines (e.g., add german language). It should sound like you are giving an order or request.
added german language would be wrong.

Here are the 5 key points:

Write clear and good commit messages that are easy to read.
Use prefixes like 'feat:' or 'fix:' at the start of your commit messages.
Do not put a period (dot) at the end of your commit message.
Keep commit messages short, not more than 50 characters.
Use a commit body if needed.

What are commit prefixes?

In short, they make your commits look pretty (if you use refined github) and gives you a better overview ✨.

Imagine a commit message like this: fixed typo. This brings up questions: Where was the typo fixed? Will it break the API?

To make things clearer, use prefixes. In our example, the typo was in the dog images API, changing the query parameter from ?naem=<NAME> to ?name=<NAME>. This is a breaking change because old code using the wrong parameter will stop working.

A good commit prefix for this change could be: fix(api/dogs)!: query param typo.

Lets break it down:

Jokes aside:

fix: what is the type of the commit.
(api/dogs): where was the change (optional).
!: is it a breaking change.
query param typo: the actual commit message

In general this is how your commits should be structured:

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

So here are some example:

feat(lang): add german language
feat(auth): add OAuth support
docs(readme): add installation instructions

This is how it looks on github:

fix: test

fix(this): test

Tipp

Use emojis (if you want that) fix(emoji): :rocket: emojis.
You could also install vscode-conventional-commits to easly make good commit messages.

All commit prefixes

fix: Bug fix
feat: a new feature or enhancement
chore: updating dependencies or setting up build tools etc
ci: change to CI like GitHub Actions
refactor: code refactoring without adding new features or fixing bugs
docs: documentation-only changes (README etc)
style: changes related to formatting such as code style adjustments, and whitespace changes (not css changes)
perf: performance improvements without changing existing functionality
test: unit tests etc
revert: revert a commit

How they look on github (with refined github):

Qopy: My Favorite Clipboard Manager as a Developer

Waradu — Wed, 11 Sep 2024 13:36:23 +0000

As a developer, I'm always on the lookout for tools that can make my workflow smoother and more efficient. Recently, I stumbled upon Qopy, an open-source clipboard manager that works on Linux and Windows.

What's Qopy?

Qopy is a straightforward clipboard manager that aims to improve upon the standard clipboard experience. It's designed to be user-friendly, reliable and fast.

Why Is it so good

Here are some reasons why Qopy is so good:

It handles everything: Text, images, files: Qopy can store it all.
It's fast: Built with Rust, it's super speedy and doesn't slow you down.
Easy to use: The clean interface means you can find what you need quickly.
Unlimited storage: You can keep as many clipboard items as you want.

Cool Features on the Horizon

The developer behind Qopy has some exciting plans for the future, including:

Code highlighting (a must-have for developers!)
Sharing clipboards across devices
Custom settings and keybinds
More detailed info about copied items

Getting Started

If you want to give Qopy a try (and I think you should!), you can grab the latest version here:

There are also nightly builds available through GitHub Actions here.

Wrapping Up

Qopy is simple enough for anyone to use, but powerful enough to handle a developer's needs. Whether you're writing code all day or just require a better way to manage your clipboard, I'd encourage you to give Qopy a try.

As it grows and evolves, I'm excited to see what new features will be added. Why not check it out and maybe even contribute to its development? After all, that's the beauty of open-source projects!

How to Self Host Piped: The Ad-Free and Privacy-Focused YouTube Frontend Alternative

Waradu — Fri, 10 Nov 2023 09:56:06 +0000

Introduction:

I was frustrated by the annoying pop-ups from YouTube asking me to disable ad blockers, I decided it was time to take matters into my own hands. I made a simple PHP script with yt-dlp to create a custom player. While my makeshift solution worked, it lacked the full functionality of a genuine YouTube frontend. A few days later, I stumbled upon Piped, an open-source project that promised not only ad-free viewing but also a comprehensive set of features. I took a look at their documentation and learned how to install piped on my own server. This guide tells about my journey and the steps I took to reclaim control over my online video streaming experience.

If you just want to use piped with no ads i deployed a public instance for everyone to use!

Public piped Instance

Prerequisites:

Before you start with the installation, ensure you have the following prerequisites in place:

Some kind of Server
Domain:
- A registered domain to host your Piped instance.
Software:
- Git
- Docker
- Docker Compose plugin
Cloudflare Account:
- An active Cloudflare account.

What is Piped?

Piped is designed as a self-hosted alternative to YouTube's interface, prioritizing user control by removing advertisements and tracking scripts. For me, it emerged as the perfect solution after my attempt at creating a custom player using a PHP script fell short of the full functionality I desired.

Benefits of Piped:

No ads
Privacy
No Tracking
Most features like YouTube

Installation of Piped:

Cloning Piped-Docker Repository:
- Command: git clone https://github.com/TeamPiped/Piped-Docker.git
Navigating to Piped-Docker Directory:
- Command: cd Piped-Docker
Running Configuration Script:
- Command: ./configure-instance.sh
- Set up the domain names. For example, when asked for pipedproxy.example.com, just replace the example.com with your own domain name. Choose nginx as Reverse proxy when prompted.
Creating DNS Records:
- Create all 3 DNS records to your Server's public IP
Launching Piped Instance:
- Command: docker-compose up -d
- This starts the docker container up
Configuring Nginx with Certbot for TLS:
- Installed Certbot via Snap: sudo snap install --classic certbot
- Ran Certbot with Cloudflare DNS verification:
sudo certbot certonly --dns-cloudflare --dns-cloudflare-credentials /path/to/cloudflare.ini -d piped.example.com -d pipedapi.example.com -d pipedproxy.example.com
- Once again, change the example.com to your own Domain.
- Replaced /path/to/cloudflare.ini with the path to my Cloudflare API credentials file.
- Example cloudflare.ini file:

Create a file named cloudflare.ini with the following content:

# Cloudflare API credentials
dns_cloudflare_email = your_email@example.com
dns_cloudflare_api_key = your_cloudflare_api_key

Set proper permissions on this file to enhance security:

chmod 600 /path/to/cloudflare.ini

Remember to replace your_email@example.com with your Cloudflare account email and your_cloudflare_api_key with your actual Cloudflare API key.

Finally Nginx Configuration:

Configure Nginx Configuration with TLS (HTTPS) for a secure connection.

   server {
      listen 443 ssl http2;
      listen [::]:443 ssl http2;
      server_name piped.example.com pipedproxy.example.com pipedapi.example.com; # For all 3 hostnames
      ssl_certificate /path/to/certificate/fullchain.pem;
      ssl_certificate_key /path/to/certificate/privkey.pem;
      ssl_session_timeout 1d;
      ssl_session_cache shared:MozSSL:10m;
      ssl_session_tickets off;

      ssl_protocols TLSv1.3;
      ssl_prefer_server_ciphers off;
      add_header Strict-Transport-Security "max-age=63072000" always;
      add_header Cache-Control 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0';

      ssl_stapling on;
      ssl_stapling_verify on;
      proxy_read_timeout 1d;
      proxy_connect_timeout 300;
      proxy_send_timeout 300;
      location / {
          proxy_pass http://127.0.0.1:8080;
          proxy_set_header Host $host;
      }
   }

Conclusion:

The discovery of Piped not only resolved the issue with the ad blocker but also granted me control over my video streaming experience. The benefits of an ad-free and private platform are really nice. By sharing my journey, I hope others can also explore the realm of self-hosting and tailor their digital space to align with their preferences. In a world inundated with ads and privacy concerns, taking control is empowering.

Create extensions in no time

Waradu — Wed, 13 Sep 2023 17:05:41 +0000

Have you ever dreamed of your own browser extension? Have you ever wished there was an extension that does this and that? Well, just create one! You only need a manifest.json to get started.

Create/use the extension

Create a folder with the name of your extension and add a manifest.json file in the folder.

In the manifest add { } and create a name key in there:

{
  "name": "tutorial"
}

after that we need a manifest_version, version key:

{
  "name": "tutorial",
  "manifest_version": 3,
  "version": "1.0.0"
}

Version is just the version of your extension so it doesn't matter if its 1.0.0, 0.1.0 or 34.110.01

Now open your browser, go to edge://extensions/ and activate developer mode on.

Finally drag n' drop your folder in the extensions window and search your extension in the extension list (Click "Reload" on your extension if you change anything):

Add basic functionality

Popup window if extension is clicked

You can achieve that with just simply adding "action" > "default_popup" to the manifest

{
  "name": "tutorial",
  "manifest_version": 3,
  "version": "1.0.0",
  "action": {
    "default_popup": "popup/popup.html"
  }
}

and creating an popup.html and style.css file in the popup directory:

tutorial/
├── popup/
│   ├── popup.html
│   └── style.css
└── manifest.json

In the popup.html create a simple popup with HTML/CSS for example:
popup.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Tutorial</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

style.css:

* {
  padding: 0;
  margin: 0;
}

body {
  background: #222;
  color: white;
  font-family: sans-serif;
}

h1 {
  padding: 40px;
  width: max-content;
}

it should now look like this (DO NOT FORGET THO CLICK RELOAD ON THE EXTENSION IN THE EXTENSIONS PAGE):

Inject JavaScript/CSS to a page

Just add "content_scripts" > "js" / "css" to the manifest

{
  "name": "tutorial",
  "manifest_version": 3,
  "version": "1.0.0",
  "action": {
    "default_popup": "popup/popup.html"
  },
  "content_scripts": [
    {
      "js": ["inject/inject.js"],
      "css": ["inject/inject.css"],
      "matches": ["*//*.example.com/*"]
    }
  ]
}

Folder structure now:

tutorial/
├── popup/
│   ├── popup.html
│   └── style.css
├── inject/
│   ├── inject.js
│   └── inject.css
└── manifest.json

For this tutorial I will make the background on example.com black and add a Hello World text:
inject.css:

html, body {
  background-color: black !important;
}

Now just reload the extension and go to example.com

For JavaScript it's the same and if you want to add HTML to a page just add this to your inject.js:

const p = document.createElement("p");
p.innerText = "Hello World";
p.style.color = "white";
p.style.padding = "40px";
p.classList.add("CLASS NAME FOR STYLING IN INJECT.CSS")
document.body.appendChild(p);

Now would you look at that:

Add icon to extension

Add "icons" to manifest:

{
  "name": "tutorial",
  "manifest_version": 3,
  "version": "1.0.0",
  "action": {
    "default_popup": "popup/popup.html"
  },
  "content_scripts": [
    {
      "js": ["inject/inject.js"],
      "css": ["inject/inject.css"],
      "matches": ["https://example.com/"]
    }
  ],
  "icons": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  }
}

After that add your icon files like that:

tutorial/
├── icons/
│   ├── icon-16.png
│   ├── icon-32.png
│   ├── icon-64.png
│   └── icon-128.png
├── popup/
│   ├── popup.html
│   └── style.css
├── inject/
│   ├── inject.js
│   └── inject.css
└── manifest.json

SASS up your Code: SCSS in Nuxt or HTML

Waradu — Thu, 07 Sep 2023 07:51:27 +0000

Using SCSS with Nuxt

To use SCSS with Nuxt, you need to add the sass package to your project. You can do this by running the following command: pnpm add -D sass (works completely fine with a tauri app)

After adding the package, you can use Sass in your Nuxt project by changing the <style> tags to <style lang="scss"> tags in all .vue files.

Using SCSS with HTML in VS Code

To use SCSS with HTML in VS Code, you need to install the glenn2223.live-sass extension. After installing the extension, open any .scss file and click on the watch sass button at the bottom right of the screen.

To import the generated CSS into your HTML file, use the same method as you would for normal CSS. However, make sure to use the .css file extension instead of .scss, as live-sass will convert .scss files to .css files.

If you have any questions/problems/ideas, feel free to add me on discord: waradu.

Vleer: The Music Player That Lets You Hear More for Less

Waradu — Tue, 05 Sep 2023 18:51:47 +0000

Introducing Vleer: A Redefined Way of How We Interact with Music

Have you ever wished for a music app that is free, open source, and customizable? A music app that lets you enjoy your favorite songs without any ads, subscriptions, or limitations? A music app that works seamlessly on your PC and your phone?

If you answered yes to any of these questions, then you might want to check out Vleer, a new music app that aims to replace Spotify, Apple Music, and other popular streaming services. Vleer is an app crafted entirely around you, with a simple and elegant user interface, a powerful music player, and a community-driven development.

What is Vleer?

Vleer is a free and open source music app that lets you listen to your local music files or stream from various online sources. You can create playlists, browse by genres, artists, albums, or songs, and control the playback with keyboard shortcuts or touch gestures. You can also customize the app’s appearance, behavior, and functionality to suit your preferences.

Vleer is built with Tauri and Nuxt.js, which means it is fast, lightweight, and cross-platform. You can run Vleer on Windows, Linux, or macOS, as well as on Android or iOS devices. Vleer also supports offline mode, so you can enjoy your music even without an internet connection.

Why should you use Vleer?

Vleer is not just another music app. It is a music app that respects your freedom, privacy, and creativity. Unlike other streaming services that charge you money, show you ads, or limit your choices, Vleer gives you full control over your music experience. You can listen to any song you want, from any source you want, without any restrictions.

Vleer is also a community-driven project, which means it is constantly evolving and improving based on user feedback and suggestions. You can contribute to Vleer’s development by reporting bugs, requesting features, or submitting code. You can also join the Vleer community on GitHub, Discord, or Twitter to share your thoughts, ideas, or opinions.

How can you get Vleer?

Vleer is still in the early development stage, but you can download the latest version from the official website: Vleer. You can also follow the installation instructions on the GitHub repository to build the app from source. Please note that Vleer may have some bugs or errors at this stage, so use it at your own risk.

If you want to support Vleer’s development, you can also donate via GitHub sponsor. Your donations will help cover the costs of hosting, domain name, and other expenses.

Join the discord to submit your own ideas.

SCSS: The Sassier Version of CSS

Waradu — Mon, 04 Sep 2023 19:35:00 +0000

Hello, In this article, I will introduce you to some of the key features of SCSS and show you how to use them in your projects.

Variables

You can use variables for any CSS property like font, color and sizes. To create a variable, you use the $ symbol:

$primary-color: #ff0000;
$secondary-color: #00ff00;
$font-family: Arial, sans-serif;

To use a variable, you simply write its name instead of the value. For example:

h1 {
  color: $primary-color;
  font-family: $font-family;
}

p {
  color: $secondary-color;
  font-family: $font-family;
}

This selector

You can use „&“ to select the current element:

.class {
  color: red;
  &:hover {
    color: green;
  }
}

this would be the same as:

.class {
  color: red;
}
.class:hover {
  color: green;
}

Nesting

Nesting allows you to write selectors that follow the same structure as your HTML. Instead of writing long and repetitive selectors, you can nest them inside each other using curly braces. For example:

nav {
  background-color: #333;
  ul {
    list-style: none;
    li {
      display: inline-block;
      a {
        color: #fff;
        text-decoration: none;
      }
    }
  }
}

This is equivalent to writing:

nav {
  background-color: #333;
}

nav ul {
  list-style: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  color: #fff;
  text-decoration: none;
}

Mixins

Mixins are a way to define reusable chunks of code that can accept arguments and return different values depending on the input. To create a mixin, you use @mixin followed by the name of the mixin and optionally some parameters. For example:

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

To use a mixin, you use the @include directive followed by the name of the mixin and optionally some arguments. For example:

.button {
  @include border-radius(10px);
}

Functions

Functions are similar to mixins, but they return a single value instead of a block of code. You can use functions for calculations, conversions, or manipulations of values. To create a function, you use the @function directive followed by the name of the function and optionally some parameters. For example:

@function darken($color, $amount) {
  return mix(black, $color, $amount);
}

To use a function, you simply write its name followed by parentheses and optionally some arguments. For example:

.button:hover {
  background-color: darken($primary-color, 10%);
}

Use

To use code from another file, just write @use: 'path/filename.scss';.
Variables can be used from other files with 'filename.$variablename'

Operators

You can use operators to perform calculations, comparisons, or concatenations in your SCSS code. For example:

$width: 100px;
$height: 50px;

div {
  width: $width * 2; // 200px
  height: $height / 2; // 25px
  margin: ($width + $height) / 4; // 37.5px
}

p {
  font-size: 12px + 2px; // 14px
}

a {
  color: #fff or #000; // #fff
}

Conditionals

Conditionals are statements that execute different blocks of code depending on whether a condition is true or false. You can use conditionals to apply different styles based on variables, functions, or expressions. To create a conditional, you use the @if, @else if, and @else directives followed by a condition and a block of code. For example:

$theme: dark;

body {
  @if $theme == dark {
    background-color: #000;
    color: #fff;
  } @else if $theme == light {
    background-color: #fff;
    color: #000;
  } @else {
    background-color: #333;
    color: #ccc;
  }
}

Loops

Loops are statements that repeat a block of code a number of times or for each element in a list or a map. To create a loop, you use the @for, @each, or @while directives followed by a variable, a range, or a condition and a block of code. For example:

// For loop

@for $i from 1 through 5 {
  .col-#{$i} {
    width: $i * 20%;
  }
}

// Each loop

$colors: red, green, blue;

@each $color in $colors {
  .#{$color}-text {
    color: $color;
  }
}

// While loop

$i: 1;

@while $i < 10 {
  .item-#{$i} {
    margin-left: $i * 10px;
  }

  $i: $i + 1;
}

Conclusion

SCSS is a powerful and expressive way to write CSS that can save you time and effort.

If you have any questions/problems/ideas, feel free to add me on discord: waradu.

Custom titlebar in Nuxt with Tauri with controls

Waradu — Sun, 03 Sep 2023 18:32:46 +0000

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:

Acrylic Window effect with Tauri

Waradu — Sat, 02 Sep 2023 08:39:14 +0000

Today we'll look at how you can make a beautiful Acrylic window effect with Tauri, Nuxt and window-vibrancy (Remember rounded corners won't work).

You won't be able to drag/close/minimize your app after this
(still possible with the taskbar icon) because we have to remove the titlebar. To make it work again, you will have to make your own. I will upload a tutorial on how to do that soon.

Okay, first open tauri.conf.json and add "decorations": false,"transparent": true to "windows" in "tauri" like this:

"tauri": {
    "windows": [
        {
            ...
            "decorations": false,
            "transparent": true
        }
    ],
    ...
}

After that, remove <NuxtWelcome /> from app.vue and add style tags:

<template>
</template>

<style>
</style>

In style make HTML and body full sized + transparent:

<style>
* {
  margin: 0;
  padding: 0;
}

html, body {
  background-color: rgba(0, 0, 0, 10%);
  height: 100%;
  overflow: hidden;
}
</style>

You should now see a black, transparent and empty window (ignore that thing at the bottom mid on my example).

Now let's get to the interesting part. To add the acrylic effect, open src-tauri/Cargo.toml and add window-vibrancy = "0.4.0" to [dependencies]:

[dependencies]
serde_json = "1.0"
serde = { version = "1.0", features = ["derive"] }
tauri = { version = "1.4.0", features = ["api-all"] }
window-vibrancy = "0.4.0"

Next, open src-tauri/src/main.rs (full code on GitHub) and do as follows:

Add this at the top of the file below the first 2 lines:

use tauri::Manager;
use window_vibrancy::{apply_acrylic};

Finally, add this below tauri::Builder::default():

.setup(|app| {
    let window = app.get_window("main").unwrap();

    apply_acrylic(&window, Some((0, 0, 0, 10)));

    Ok(())
})

Some((R, G, B, A)) is RGBA, so change it to what you prefer.

Ha, that was easy!

If you have any questions/problems/ideas, feel free to add me on discord: waradu.

src-tauri/src/main.rs:

#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]

use tauri::Manager;
use window_vibrancy::{apply_acrylic};

fn main() {
  tauri::Builder::default()
    .setup(|app| {
      let window = app.get_window("main").unwrap();

      apply_acrylic(&window, Some((0, 0, 0, 10)));

      Ok(())
    })
    .run(tauri::generate_context!())
    .expect("error while running tauri application");
}

Use the power of Nuxt with Tauri

Waradu — Fri, 01 Sep 2023 20:51:32 +0000

Today, I will show you how you can use Tauri with Nuxt. You can find the files for reference on GitHub. Do not create the project in a synced folder like OneDrive. Replace "tutorial" with your own app name. You may need to have the Visual Studio Build Tools 2019 installed (try installing it if you get a Tauri error).

Create Nuxt Project

To get started, create a blank Nuxt project by following these steps:

Open a terminal
Navigate to the parent folder where you want to create the project: cd "c:/path/to/parent/folder"
Run this command to initialize a new Nuxt project: pnpm dlx nuxi@latest init tutorial Select pnpm as the package manager
Change the current directory to the project folder: cd tutorial

Initialize Tauri

Next, you need to initialize Tauri in your project by following these steps:

Install the tauri CLI globaly pnpm i -g @tauri-apps/cli
Run this command to install Tauri: pnpm tauri init
Answer the prompts as follows:
- What is your app name? › tutorial
- What should the window title be? › Tutorial
- Where are your web assets (HTML/CSS/JS) located, relative to the "/src-tauri/tauri.conf.json" file that will be created? › ../.output/public
- What is the url of your dev server? › http://localhost:3000
- What is your frontend dev command? › pnpm nuxt
- What is your frontend build command? › pnpm generate
Run this command to install the Tauri API: pnpm add @tauri-apps/api @tauri-apps/cli
Optionally, you can also install Sass to use SCSS: pnpm add sass

Configure some settings

Now, you need to change some settings in your project by following these steps:

Open your project in Visual Studio Code or its fork Cursor: code -r . or cursor -r .
In package.json, add "nuxt": "nuxt dev" to "scripts"
In package.json, change "dev": "nuxt dev" to "dev": "tauri dev"
In src-tauri/tauri.conf.json change "identifier" in "bundle" in "tauri" to your own identifier like ".tutorial" or "com.yourwebsite"
Finally, run pnpm tauri dev (this will take some time)

Now it should look similar to this:

To actually build your app, run pnpm tauri build and open the .exe in src-tauri\target\release or install the app with the .msi in src-tauri\target\release\bundle\msi.

If you have any questions/problems/ideas, feel free to add me on discord: waradu.

My next Nuxt/Tauri tutorials I will make (No order, comment what you would like next):

Nuxt/Tauri Basics
Nuxt/Tauri Advanced
SCSS Basics
Custom Titlebar with window controls
Acrylic Window effect
Implement Fluent Design Theme