VueBro is an open-source and free web editor for creating websites using Vue.js technology. It allows users to create static websites with Vue single-file components (SFCs) without installing or setting up a development environment like Node.js or Vite. The application runs directly in the browser with no need for server-side rendering.
- Runtime Vue SFC Compilation: Create Vue single-file components (
.vuefiles) without a preliminary build step. Compilation occurs in the browser at runtime. - WYSIWYG Mode: Create static websites without HTML knowledge using the visual editor.
- Monaco Editor: Uses the same editor as Microsoft VS Code with Volar.js pre-installed for editing Vue components.
- Tailwind CSS Support: Out-of-the-box support for Tailwind CSS classes without additional configuration.
- External Module Import: Import external libraries and frameworks directly from services like jsDelivr and UNPKG.
- Multiple Storage Options: Edit websites locally or connect to S3 storage.
- SEO Optimized: Built-in mechanisms for search engine indexing of generated websites.
- Composition API + TypeScript: Full support for modern Vue.js development practices.
- Cross-Platform: Available for Windows, macOS, Linux as desktop application.
- Framework: Vue 3 with Quasar Framework
- Build Tool: Vite
- Styling: UnoCSS (with Tailwind CSS compatibility)
- Editor: Monaco Editor (VS Code's editor)
- Language: TypeScript
- State Management: VueUse composition utilities
- Internationalization: Vue I18n
- Package Manager: npm
Get exe for
Windows
Get dmg for
macOS
Get AppImage for
Linux
Get snap for
Linux
Or access the web application at vuebro.github.io/vuebro
- Node.js (latest LTS version recommended)
- npm package manager
-
Clone the repository:
git clone https://github.com/vuebro/vuebro.git cd vuebro -
Install dependencies:
npm install
-
Start the development server:
npm run dev
To run VueBro as a desktop application during development:
npm run dev:electronTo build for web:
npm run buildTo build for desktop:
npm run build:electronvuebro/
├── src/
│ ├── assets/ # Static assets
│ ├── boot/ # Application boot files
│ ├── components/ # Vue components
│ ├── css/ # CSS styles
│ ├── i18n/ # Internationalization files
│ ├── pages/ # Route components
│ ├── router/ # Routing configuration
│ ├── stores/ # State management (VueUse/Pinia stores)
│ ├── App.vue # Main application component
│ ├── env.d.ts # TypeScript declaration file
│ └── global.d.ts # Global TypeScript declarations
├── public/ # Public assets
├── package.json # Dependencies and scripts
├── quasar.config.ts # Quasar framework configuration
├── uno.config.ts # UnoCSS configuration
├── tsconfig.json # TypeScript configuration
└── index.html # Main HTML entry point
VueBro follows a modern Vue 3 architecture with the following key components:
- State Management: Uses Vue's reactivity system with stores organized in
src/stores/directory - Data Storage: Supports both S3 storage and local file system access (FSA) API
- Vue SFC Compilation: Runtime compilation of Vue single-file components using @vuebro/monaco-sfc
- SEO Support: Generates proper meta tags, sitemaps, and JSON-LD for search engine optimization
- Internationalization: Built-in i18n support with language files in
src/i18n/
app.ts- Application state managementio.ts- Input/output operations (S3 and file system API)s3.ts- S3 storage integrationfsa.ts- File System Access API integrationdefaults.ts- Shared constants and defaults
npm run dev- Start development servernpm run build- Build for productionnpm run dev:electron- Development mode for Electron appnpm run build:electron- Build Electron appnpm run lint- Run ESLint for code linting
We welcome contributions from the community! Here's how you can help:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes
- Add tests if applicable
- Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Use Pug template syntax throughout components
- Follow ESLint rules with custom configuration from
@vuebro/configs - Use UnoCSS for styling with Tailwind-like utility classes
- Maintain TypeScript strict mode configuration
- Organize components by feature/function in respective directories
This project is licensed under the AGPL License - see the LICENSE file for details.
Note
Made on the shores of the Baltic Sea
- VueBro is a non-commercial, open-source project
- No server-side rendering needed - all compilation happens in the browser
- Works with GitHub Pages as an excellent hosting option
- Special attention to search engine optimization mechanisms
- Supports external module imports from CDNs like jsDelivr and UNPKG