Vuebersicht

Inspired by Uebersicht, built with Vue, Electron, & TypeScript.

Add custom widgets to your desktop background, built as Vue single-file components, either in TypeScript or JavaScript.

Comes with an Uebersicht-like menu

...and Chromium / Vue Dev Tools

Widgets

Widgets are automatically imported from the ./src/widgets directory, each widget should follow the file naming convention of <foo>.widget.vue. You may construct widgets using multiple Vue components, and nest .widget.vue files in directories, just make sure the root component of the widget has a filename ending in .widget.vue, and child components do not.

• Vue Single File Components docs
• Vue TypeScript Class-Style Component docs

Settings

There is a Settings panel in the Vuebersicht toolbar that allows you to change the primary color used by widgets.

Utilities

run(command)

• Decription: Run a shell command asynchronously.
• Params: command: string
• Returns: Promise<stdout|stderr>

Note: It is also possible to use this method to run any kind of shell script, for example, in the Network Widget.

example:

import { run } from '@/utils'

...
  try {
    const stdout = await run('ls -la')
    console.log(stdout)
  } catch(stderr) {
    throw stderr
  }

sleep(milliseconds)

• Description: Wait for an aribitrary amount of time asynchronously.
• Params: milliseconds: number
• Returns: Promise<void>

example:

import { sleep } from '@/utils'

...
  await sleep(1000) // wait for 1 sec
  foo()

Limitations

This is still just experimental. Because of the nature of nature of the current build tooling, I haven't yet found a way to enable some important features of the original Uebersicht application, hot-reloading in production builds, for instance. For now, it is recommended to run this experimental application in development mode.

I have yet to really test for OS support (other than MacOS), though I hear that it does work in Ubuntu at least. If you have time to test in your environment please open an issue if it does not run, and I'll look into supporting it.

Project setup

yarn install # or npm install

API keys

Vuebersicht currently ships with a Weather widget that uses 2 APIs, Google Geocoder API (for getting your approximate location), and OpenWeatherMap API (to get local weather data for that location). You'll need to create these API keys and add them to an untracked file called .env.local, in the root directory of the project:

GOOGLE_API_KEY = "<google geocoder api key>"
WEATHER_API_KEY = "<openweathermap api key>"

• Create a Google Geocoder API key
• Create an OpenWeatherMap API key

Start the application

yarn serve # or npm run serve

Lints and fixes files

yarn lint # or npm run lint

Thanks

Major shoutout to @felixhageloh for his amazing work on Uebersicht, which is an incredible project that I find both inspiring and humbling. Vuebersicht is in no way meant to be a competitor or a replacement for Uebersicht, if anything it is intended to be a modest tribute to the original, an experimental toy project.

Core libraries used to make this possible:

• TypeScript
• Electron
• Vue.js
• Webpack

And others used to build some of the widgets:

• chart.js
• v-calendar
• vue-weather-widget