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 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.
There is a Settings panel in the Vuebersicht toolbar that allows you to change the primary color used by widgets.
- 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
}- 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()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.
yarn install # or npm installVuebersicht 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>"yarn serve # or npm run serveyarn lint # or npm run lintMajor 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:
And others used to build some of the widgets: