OverVue

Table of Contents

• Installation
• How to use OverVue
• Changelogs
• How to contribute
• Authors

Installation

To download the production version, please visit https://www.overvue.org

Dev Installation

In your terminal:

1. Install dependencies npm install

2. Build a new .zip / .deb: npm run build (Note: the build may take some time, but should display 'build finished' once it is done and ready to be run)

3. Run electron app in dev mode: npm run dev

Updated WSL Installation and Configuration Guide

This section has been updated to reflect the latest advancements with the Windows Subsystem for Linux (WSL), especially focusing on the integration of Linux GUI applications directly within WSL without the need for third-party X server tools like X410 or VcXsrv.

Running Linux GUI Applications in WSL

With the launch of WSLg (Windows Subsystem for Linux GUI), the process of running Linux GUI applications on Windows has been greatly simplified. WSLg integrates directly with WSL 2, offering native support for Linux GUI applications without the necessity for additional display server configurations.

Prerequisites

• Windows 10 version 19044+ or Windows 11.
• WSL 2 installed and set as the default version. Use wsl --install for new installations or wsl --update followed by wsl --shutdown to update and restart WSL.

Configuring Linux GUI Applications

WSLg automatically configures the necessary environment, eliminating the need to manually set display variables for GUI applications. Linux GUI apps can now be launched directly from the Start menu or via the command line, without additional setup.

Legacy Setup Notes (Deprecated)

The previous guidance for setting up X410 or VcXsrv for Linux GUI applications in WSL is now deprecated. While these tools are no longer necessary for the majority of GUI applications in WSL, they remain available for those with specific requirements outside the scope of WSLg's capabilities.

Docker Integration

For Docker containers that require GUI applications, ensure Docker Desktop for Windows is configured to use the WSL 2 backend. This integration with WSLg provides a seamless experience for running GUI-based containers.

Additional Setup for Mac Users (Docker)

Mac users running Linux containers or WSL in a virtualized environment should follow the XQuartz setup for X11 forwarding, applicable only to those operating outside direct WSL integration on Windows.

1. Install XQuartz: brew install --cask xquartz and restart.
2. In XQuartz Preferences > Security, enable "Allow connections from network clients."
3. Allow localhost connections: xhost +localhost.

Common Issues and Solutions

• WSLg not functioning as expected? Verify your Windows version and WSL 2 installation and updates.
• Linux GUI app won't launch? Ensure all components are up to date and the application is compatible with WSLg.

Resources

• WSLg Overview
• Setting up Docker with WSL 2

This guide is designed to help streamline your development environment by utilizing the latest WSL features while minimizing complexity. For more information and detailed troubleshooting, refer to the official WSL documentation.

How to use OverVue

OverVue kickstarts your project with a default root App component and a "HomeView" route. Here's a quick guide to navigating and utilizing OverVue to its fullest:

1. Creating Components:

   • Enter a name for your new component in the component name box.
   • Select any HTML elements to include within your component. These can be added or nested within each other by dragging and dropping elements in the tree view on the right sidebar or within the component modal (accessible by double-clicking a component node).

2. Organizing Components:

   • Assign a parent component during or after creation to establish your desired hierarchy.
   • Modify your component's structure and relationships anytime by dragging nodes in the tree view. Double-click an HTML element for advanced styling options, including adding attributes like class, ID, and v-model.

This streamlined approach helps you focus on building and visualizing your Vue.js application's component structure efficiently, with intuitive drag-and-drop functionality and easy access to advanced configuration options.

3. Managing State and Actions:

   • Get a live preview of your component's code in the Component Details > Code Preview Tab.

   • Handle routes and associated components using the Routes Tab.

   • Create, edit, and assign state and actions to your components.

• When finished creating, view your code preview under the code preview tab and you can export to a file location of your choice. Below is the exported file structure ('*' = only in typescript format, '**' = only in test format:

public/
src/
  assets/
  components/
    (YourNewComponent1.vue)
    (YourNewComponent2.vue)
    ...
  router/
    index.js/ts
  store/
    index.js/ts
  views/
    HomeView.vue
    (YourNewRoute1.vue)
    (YourNewRoute2.vue)
    ...
  App.vue
  main.js/ts
tests/
  units**
.eslintrc.cjs
env.d.ts*
babel.config.js/ts
jest.config.js/ts**
index.html
package.json
vite.config.js/ts

• To get a better look at the features and how to use OverVue, take a look at the in-app tutorial!

Back to top

Changelogs (recent)

Changelogs 8.0 and older

Back to top

How to contribute

We'd love for you to test out the application and submit any issues you encounter. Also feel free to fork to your own repo and submit PRs.

• Ability to add two-way binding to input elements
• Add E2E testing suite like Cypress
• Containerized the app to further support multi-platform distribution OR
• Adjust application to either a web app or an plugin extension on VSCode/Figma.

• Patch save functionality to save state
• Highlight active HTML element when selected/updating
• HTML elements removal to re-render and update state count of elements used in components tree
• HTML elements list occasionally does not render properly after component is dragged
• Continue updating and rebalancing dependencies

Back to top

Contributors

OverVue was inspired by PreVue

Back to top