VasakOS

Project Setup | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Project Setup - Vasak Desktop#

Complete guide to setting up your Vasak Desktop development environment.

Build | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Guide for building Vasak Desktop. It also covers how to run builds.

Production Build#

Full Build#

# Build everything for production
bun run tauri build

# Or with the Tauri CLI
cargo tauri build

Note: The production build takes 15-30 minutes the first time.

Development dependencies

Mon, 01 Jan 0001 00:00:00 +0000

Below you will find all the dependencies you should install in your development environment to build or contribute to the project. The same applies to existing applications or your own VAPPs…

Installing VasakOS

Mon, 01 Jan 0001 00:00:00 +0000

This guide covers installing from scratch. If all you want is the VasakOS applications on an Arch Linux you already have, skip to package repository .

Programmer's Day 2026: thanks to those who make VasakOS possible

Sun, 13 Sep 2026 00:00:00 +0000

Today, 13 September 2026, is day 256 of the year (2⁸). That’s why we celebrate Programmer’s Day: 256 is the number of values that fit in a byte, the basic unit of our craft.

35 years of Linux: the hobby that changed the world

Tue, 25 Aug 2026 00:00:00 +0000

Today, 25 August 2026, marks 35 years since a 21-year-old student in Helsinki posted to comp.os.minix:

Hello everybody out there using minix-

24 years of Arch Linux: simple, rolling, our home

Wed, 11 Mar 2026 00:00:00 +0000

Today, 11 March 2026, marks 24 years since the release of Arch Linux 0.1 «Homer». Judd Vinet announced it on the mailing list with a sentence that sums it all up:

Dependency management | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Complete guide to managing the project’s dependencies.

Frontend Dependencies (JavaScript/TypeScript)#

File: `package.json`#

The dependencies are defined in this file:

Package repository

Mon, 01 Jan 0001 00:00:00 +0000

VasakOS publishes its packages in its own pacman repository called vasakos, signed with GPG. If you installed from the ISO it is already configured and you do not need to do anything: sudo pacman -Syu updates everything.

Overall Architecture | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Overview of the Vasak Desktop architecture and how its components are laid out.

What is Vasak Desktop?#

Vasak Desktop is NOT a full desktop environment (like GNOME or KDE). It is a lightweight desktop interface that has no WM of its own but that provides:

Updating the system

Mon, 01 Jan 0001 00:00:00 +0000

VasakOS is rolling release: there are no versions that fall behind, and no big migration every couple of years. Updates arrive continuously from the Arch Linux repositories and from the VasakOS repository.

Folder System | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Detailed guide to the project’s folder structure.

Root Structure#

graph TD Root["📁 vasak-desktop/"] Root --> Src["📁 src/
Vue.js frontend"] Root --> SrcTauri["📁 src-tauri/
Rust backend"] Root --> IndexHTML["📄 index.html"] Root --> PackageJSON["📄 package.json"] Root --> TSConfig["📄 tsconfig.json"] Root --> ViteConfig["📄 vite.config.ts"] Root --> License["📄 LICENSE"] Root --> Readme["📄 README.md"] Root --> GitIgnore["📄 .gitignore"] style Root fill:#667eea,stroke:#764ba2,color:#fff style Src fill:#f093fb,stroke:#f5576c,color:#fff style SrcTauri fill:#4facfe,stroke:#00f2fe,color:#fff style IndexHTML fill:#fa709a,stroke:#fee140,color:#fff style PackageJSON fill:#30cfd0,stroke:#330867,color:#fff style TSConfig fill:#a8edea,stroke:#fed6e3,color:#333 style ViteConfig fill:#ffecd2,stroke:#fcb69f,color:#333 style License fill:#ff9a9e,stroke:#fecfef,color:#333 style Readme fill:#fbc2eb,stroke:#a6c1ee,color:#333 style GitIgnore fill:#fdcbf1,stroke:#e6dee9,color:#333

Frontend (`src/`)#

Frontend Root#

graph TD SrcRoot["📁 src/"] SrcRoot --> AppVue["📄 App.vue
Root component"] SrcRoot --> MainTs["📄 main.ts
Entry point"] SrcRoot --> StyleCss["📄 style.css
Global styles"] SrcRoot --> ViteEnv["📄 vite-env.d.ts
Vite types"] SrcRoot --> AssetsDir["📁 assets/
Static assets"] SrcRoot --> ComponentsDir["📁 components/
Reusable components"] SrcRoot --> InterfacesDir["📁 interfaces/
TS interfaces"] SrcRoot --> LayoutsDir["📁 layouts/
Layouts/templates"] SrcRoot --> RoutesDir["📁 routes/
Routing"] SrcRoot --> ToolsDir["📁 tools/
Controllers"] SrcRoot --> TypesDir["📁 types/
TS types"] SrcRoot --> ViewsDir["📁 views/
Views/pages"] style SrcRoot fill:#667eea,stroke:#764ba2,color:#fff style AppVue fill:#f093fb,stroke:#f5576c,color:#fff style MainTs fill:#f093fb,stroke:#f5576c,color:#fff style StyleCss fill:#f093fb,stroke:#f5576c,color:#fff style ViteEnv fill:#f093fb,stroke:#f5576c,color:#fff style AssetsDir fill:#4facfe,stroke:#00f2fe,color:#fff style ComponentsDir fill:#4facfe,stroke:#00f2fe,color:#fff style InterfacesDir fill:#4facfe,stroke:#00f2fe,color:#fff style LayoutsDir fill:#4facfe,stroke:#00f2fe,color:#fff style RoutesDir fill:#4facfe,stroke:#00f2fe,color:#fff style ToolsDir fill:#4facfe,stroke:#00f2fe,color:#fff style TypesDir fill:#4facfe,stroke:#00f2fe,color:#fff style ViewsDir fill:#4facfe,stroke:#00f2fe,color:#fff

`src/assets/`#

Static assets (images, vectors):

Frequently asked questions

Mon, 01 Jan 0001 00:00:00 +0000

D-Bus - System integration | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Complete guide to D-Bus and how Vasak Desktop integrates with the Linux system.

What is D-Bus?#

D-Bus (Desktop Bus) is the standard inter-process communication (IPC) system in Linux.

VueJS components | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Guide for developing Vue components in Vasak Desktop.

Base Structure of a Component#

<template>
  <div class="audio-control">
    <h2>{{ title }}</h2>
    <input
      v-model="volume"
      type="range"
      min="0"
      max="100"
      @change="handleVolumeChange"
    />
    <span>{{ volume }}%</span>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { invoke } from '@tauri-apps/api/tauri';
import { listen, UnlistenFn } from '@tauri-apps/api/event';

import type { Device } from '@/interfaces/device';

// Props
interface Props {
  title?: string;
  disabled?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  title: 'Audio Control',
  disabled: false,
});

// State
const volume = ref(0);
const devices = ref<Device[]>([]);
const isLoading = ref(false);

// Computed
const isActive = computed(() => !props.disabled && !isLoading.value);

// Methods
async function loadVolume() {
  try {
    isLoading.value = true;
    volume.value = await invoke<number>('get_volume');
  } catch (error) {
    console.error('Error loading volume:', error);
  } finally {
    isLoading.value = false;
  }
}

async function handleVolumeChange() {
  try {
    await invoke('set_volume', { level: volume.value });
  } catch (error) {
    console.error('Error setting volume:', error);
  }
}

// Lifecycle
onMounted(() => {
  loadVolume();
  
  // Listen for system changes
  listen('volume_changed', (event) => {
    volume.value = event.payload as number;
  });
});

onUnmounted(() => {
  // Cleanup if needed
});
</script>

<style scoped>
.audio-control {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 0.5rem;
}

.audio-control h2 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
}

.audio-control input {
  width: 100%;
  margin-bottom: 0.5rem;
}

.audio-control span {
  display: block;
  text-align: center;
  color: #666;
}
</style>

Component Types#

Presentational Components (Dumb)#

They only receive props and emit events:

Control | ActionButton

Mon, 01 Jan 0001 00:00:00 +0000

`ActionButton`#

Description#

Generic button component with variants (primary, secondary, danger), loading states and icon support.

Props#

label (string) — Button text. Required.
disabled (boolean) — Disables the button. Default: false.
variant ('primary'|'secondary'|'danger') — Visual style. Default: 'primary'.
loading (boolean) — Shows a spinner and disables the action. Default: false.
customClass (string | Record<string, boolean>) — Additional classes.
size ('sm'|'md'|'lg') — Button size. Default: 'md'.
fullWidth (boolean) — Makes the button full width. Default: false.
iconSrc (string) — Path/URL of the icon.
iconAlt (string) — Alternative text for the icon.
iconRight (boolean) — Places the icon on the right. Default: false.
type ('button'|'submit'|'reset') — Type of the button. Default: 'button'.
stopPropagation (boolean) — Calls event.stopPropagation() on click. Default: false.
preventDefault (boolean) — Calls event.preventDefault() on click. Default: false.

Emits#

click — Emitted when the user clicks and the button is neither disabled nor loading.

Usage#

<script setup lang="ts">
import { ref } from 'vue'
import ActionButton from '../controls/ActionButton.vue'
const loading = ref(false)
</script>

<template>
  <ActionButton
    label="Save"
    :loading="loading"
    variant="primary"
    @click="() => { loading = true; /* action */ }"
  />
</template>

Notes#

customClass accepts an object for reactive classes.
When iconSrc is present and there is no label, the padding adjusts automatically.

Control | ToggleControl

Mon, 01 Jan 0001 00:00:00 +0000

`ToggleControl`#

Description#

Icon action button that shows isActive and isLoading states. Ideal for quick actions (play/pause, power).

Props#

icon (string) — Path to the icon. Required.
alt (string) — Alternative text. Default: ''.
tooltip (string) — title text of the icon. Default: ''.
isActive (boolean) — Active state. Default: false.
isLoading (boolean) — Loading state that disables and animates. Default: false.
iconClass (Record<string, boolean>) — Reactive classes for the icon.
customClass (Record<string, boolean>) — Reactive classes for the container.

Emits#

click — Event when the control is pressed (if it is not loading).

Usage#

<script setup lang="ts">
import { ref } from 'vue'
import ToggleControl from '../controls/ToggleControl.vue'
const active = ref(false)
</script>

<template>
  <ToggleControl
    icon="/icons/power.svg"
    :isActive="active"
    @click="() => { active = !active }"
  />
</template>

Rust commands | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Guide for developing IPC commands (Tauri) in Rust.

Concept: Tauri Commands#

Commands are Rust functions that can be called from the Vue.js frontend through IPC.

Troubleshooting

Mon, 01 Jan 0001 00:00:00 +0000

Startup problems#

The application does not start#

Symptom#

You run vasak-desktop but nothing happens, or it closes immediately.

Desktop commands | vasak-desktop

Mon, 01 Jan 0001 00:00:00 +0000

Commands implemented in vasak-desktop that new desktop features can use

Audio#

get_audio_volume() - Get the current volume
set_audio_volume(volume: u32) - Set the volume
toggle_audio_mute() - Toggle mute
get_audio_devices() - List audio devices
set_audio_device(device_id: String) - Switch device
toggle_audio_applet() - Show/hide the audio applet

Brightness#

get_brightness_info() - Current brightness information
set_brightness_info(brightness: u32) - Set the brightness

Notifications#

send_notify(notification: NotificationData) - Send a notification
clear_notifications() - Clear all notifications
get_all_notifications() - Get the list of notifications
delete_notification(id: String) - Delete a specific notification
invoke_notification_action(id: String, action: String) - Run an action

Network#

toggle_network_applet() - Show/hide the network applet

Bluetooth#

toggle_bluetooth_applet() - Show/hide the Bluetooth applet

Music (MPRIS)#

music_play_pause() - Play/Pause
music_next_track() - Next track
music_previous_track() - Previous track
music_now_playing() - Current track information

Search#

global_search(query: String) - Global application search
execute_search_result(result: SearchResult) - Run a result
toggle_search() - Show/hide search

Keyboard Shortcuts#

get_shortcuts() - Get all shortcuts
update_shortcut(id: String, new_keys: Vec<String>) - Update a shortcut
add_custom_shortcut(shortcut: CustomShortcut) - Add a custom shortcut
delete_shortcut(id: String) - Delete a shortcut
execute_shortcut(command: String) - Run a shortcut command
check_shortcut_conflicts(keys: Vec<String>) - Check for conflicts

System#

get_system_info() - System information
get_cpu_usage_only() - CPU usage
get_memory_usage_only() - Memory usage
get_system_config() - System configuration
set_system_config(config: SystemConfig) - Set the configuration
get_current_system_state() - Current system state

Theme#

toggle_system_theme() - Toggle dark/light theme
get_gtk_themes() - List the available GTK themes
get_cursor_themes() - List the cursor themes
get_icon_packs() - List the icon packs

Session#

logout() - Log out
shutdown() - Shut down the system
reboot() - Reboot the system
suspend() - Suspend the system
detect_display_server() - Detect X11/Wayland

Location: All of these commands are defined in src-tauri/src/commands/ and registered in src-tauri/src/lib.rs.

VasakOS

Project Setup | vasak-desktop

Project Setup - Vasak Desktop#

Build | vasak-desktop

Production Build#

Full Build#

Development dependencies

Installing VasakOS

Programmer's Day 2026: thanks to those who make VasakOS possible

35 years of Linux: the hobby that changed the world

24 years of Arch Linux: simple, rolling, our home

Dependency management | vasak-desktop

Frontend Dependencies (JavaScript/TypeScript)#

File: package.json#

Package repository

Overall Architecture | vasak-desktop

What is Vasak Desktop?#

Updating the system

Folder System | vasak-desktop

Root Structure#

Frontend (src/)#

Frontend Root#

src/assets/#

Frequently asked questions

D-Bus - System integration | vasak-desktop

What is D-Bus?#

VueJS components | vasak-desktop

Base Structure of a Component#

Component Types#

Presentational Components (Dumb)#

Control | ActionButton

ActionButton#

Description#

Props#

Emits#

Usage#

Notes#

Control | ToggleControl

ToggleControl#

Description#

Props#

Emits#

Usage#

Rust commands | vasak-desktop

Concept: Tauri Commands#

Troubleshooting

Startup problems#

The application does not start#

Symptom#

Desktop commands | vasak-desktop

Audio#

Brightness#

Notifications#

Network#

Bluetooth#

Music (MPRIS)#

Search#

Keyboard Shortcuts#

System#

Theme#

Session#

File: `package.json`#

Frontend (`src/`)#

`src/assets/`#

`ActionButton`#

`ToggleControl`#