Open Web Desktop (OWD) is a framework designed to provide a simple environment for building web-based desktop experiences. It's built with Vue.js & TypeScript, and it leverages the extensible Nuxt.js architecture.
Check out the demo of the client
base repository, decked with a couple of modules.
- Open-source web desktop environment built with Nuxt.js
- Fully extendable through themes, apps, and modules
- Bundled with popular libraries like Pinia, VueUse, Mitt
- Designed to make the most of the Nuxt.js ecosystem
- Styled with PrimeVue and Tailwind for a consistent UI
- Fully localizable with i18n support
Required software:
When you are ready, bootstrap a new project by running:
npm create owd
Once the process is complete, you can start to develop:
# Run the dev server with hot-reload
npm run dev
# Build for production
npm run generate
Open Web Desktop projects can be extended with themes, plugins, and desktop apps — whether contributed by the community or created custom for your needs. Explore available modules at topics/owd-modules.
You can simply install a new app with npm install @owdproject/app-todo
or by cloning it into ./desktop/apps/app-todo
. Then, define the application in your project configuration.
// owd.config.ts
export default defineDesktopConfig({
apps: [
"@owdproject/app-about",
"@owdproject/app-todo",
]
})
Themes allow you to customize the look and feel of your Open Web Desktop instance. You can explore available themes, ranging from popular OS designs to fully custom creations, at topics/owd-themes.
You can install a new theme by defining it as a Nuxt.js layer in nuxt.config.ts
.
Themes can be loaded from a local path or directly from a GitHub repository.
1. Using a local theme:
Clone it first in a folder of your project like ./desktop/theme/theme-win95
.
git clone git@github.com:owdproject/theme-win95.git ./desktop/theme/theme-win95
Then specify the path theme in the nuxt.config.ts
configuration:
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
"@owdproject/core",
],
extends: [
"./desktop/theme/theme-win95"
],
...
2. Using a theme from GitHub:
To use a theme directly specifying a GitHub repository, use this format: github:<username>/<repository>
:
// nuxt.config.ts
export default defineNuxtConfig({
modules: [
"@owdproject/core",
],
extends: [
"github:owdproject/theme-gnome",
{ install: true }
],
...
Any contribution is welcome! Open Web Desktop is built with Nuxt and follows a modular architecture, making it easy to contribute to the core codebase or create new modules, themes and desktop apps.
If you'd like to contribute, here's how to set up your local development environment:
Prerequisites:
Cloning the Repository:
To contribute, start by forking the Open Web Desktop client repository on GitHub.
Then, clone your fork using HTTPS or SSH:
# Clone using HTTPS
git clone https://github.com/<your-username>/client.git
# Clone using SSH
git clone git@github.com:<your-username>/client.git
Once you have cloned the repository, navigate to the project folder.
Install the dependencies, then start the development server:
cd owd-client
npm install
npm run dev
This will launch Open Web Desktop in development mode, allowing you to test your changes and see them reflected in real-time. The dev server will be available at http://localhost:3000 by default.
Open Web Desktop is a vast project. The code has been totally rewritten and is now actively being developed, but your support is what makes it all possible. If you're enjoying it and want to see more, consider donating. Your contribution helps keep the project alive, add new features, and build a stronger community.
Open Web Desktop is released under the GNU General Public License v3.