A powerful web-based tool that instantly converts vanilla HTML into Vue 3 Single File Components (SFC). Supports both Composition API and Options API with intelligent parsing of scripts, styles, and templates.
- 🎯 Dual API Support: Convert to either Composition API or Options API
- 🧠 Smart Parsing: Automatically extracts and converts:
- Variables →
ref()(Composition) ordata()(Options) - Functions → Composable functions or methods
- Styles → Scoped CSS
- Templates → Clean Vue templates
- Variables →
- ⚡ Real-time Conversion: Instant preview as you type
- 📋 Copy to Clipboard: One-click copy of converted code
- 🎨 Syntax Highlighting: Beautiful code editor with syntax highlighting
- 🧪 Fully Tested: Comprehensive test suite with Vitest
- 🌐 Zero Dependencies: Pure TypeScript conversion logic
- Node.js 18+
- npm or yarn or pnpm
# Clone the repository
git clone https://github.com/IwuchukwuDivine/html_vue_converter.git
cd html_vue_converter
# Install dependencies
npm install
# Start development server
npm run devVisit http://localhost:3000 to see the app in action!
- Open the application in your browser
- Paste your HTML code into the left editor
- Select your preferred API style (Composition or Options)
- View the converted Vue component in the right panel
- Click "Copy Code" to copy to clipboard
You can also use the converter function directly in your code:
import convert from "./app/utils/convert";
const html = `
<!DOCTYPE html>
<html>
<body>
<h1>Hello World</h1>
<button onclick="greet()">Click me</button>
<script>
function greet() {
alert('Hello!');
}
</script>
</body>
</html>
`;
// Convert to Composition API
const vueComponentComposition = convert(html, "composition");
// Convert to Options API
const vueComponentOptions = convert(html, "options");
console.log(vueComponentComposition);<!DOCTYPE html>
<html>
<head>
<style>
.container {
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Counter: <span id="count">0</span></h1>
<button onclick="increment()">+</button>
</div>
<script>
let count = 0;
function increment() {
count++;
document.getElementById("count").textContent = count;
}
</script>
</body>
</html><template>
<div class="app-wrapper">
<div class="container">
<h1>Counter: <span id="count">0</span></h1>
<button onclick="increment()">+</button>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
// Reactive state (converted from variables)
const count = ref(0);
// Functions
function increment() {
count.value++;
document.getElementById("count").textContent = count.value;
}
// TODO: Review and adjust the converted code
</script>
<style scoped>
/* Converted styles - review and adjust */
.container {
padding: 20px;
}
</style>This project includes comprehensive tests using Vitest:
# Run tests
npm test
# Run tests in watch mode
npm test -- --watch
# Run tests with coverage
npm test -- --coverageThe test suite includes:
- ✅ Basic HTML to Vue template conversion
- ✅ Script extraction and conversion (variables & functions)
- ✅ Style extraction and preservation
- ✅ Both Composition and Options API outputs
- ✅ Edge cases and error handling
- ✅ Complex nested structures
- ✅ Multiple script/style blocks
html_vue_converter/
├── app/
│ ├── assets/
│ │ └── css/
│ │ └── main.css # Global styles
│ ├── components/
│ │ ├── CodeEditor.vue # Monaco-based code editor
│ │ └── Header.vue # App header
│ ├── pages/
│ │ └── index.vue # Main converter page
│ ├── utils/
│ │ ├── convert.ts # Core conversion logic
│ │ ├── convert.test.ts # Comprehensive tests
│ │ └── test-files/ # HTML test fixtures
│ └── app.vue # Root component
├── public/
│ └── logo-trans.png # App logo
├── nuxt.config.ts # Nuxt configuration
├── package.json # Dependencies
├── tsconfig.json # TypeScript config
└── README.md # This file
We welcome contributions! Here's how you can help:
- 🐛 Report Bugs: Open an issue describing the bug and how to reproduce it
- 💡 Suggest Features: Share your ideas for new features
- 📝 Improve Documentation: Help improve our docs
- 🔧 Submit Pull Requests: Fix bugs or add new features
-
Fork the repository on GitHub
-
Clone your fork:
git clone https://github.com/IwuchukwuDivine/html_vue_converter.git cd html_vue_converter -
Create a feature branch:
git checkout -b feature/amazing-feature
-
Make your changes and commit:
git add . git commit -m "Add amazing feature"
-
Write/update tests if applicable:
npm test -
Push to your fork:
git push origin feature/amazing-feature
-
Open a Pull Request on GitHub
- Use TypeScript for type safety
- Follow the existing code style
- Write descriptive commit messages
- Add tests for new features
- Update documentation as needed
# Install dependencies
npm install
# Run development server (with hot reload)
npm run dev
# Run tests
npm test
# Build for production
npm run build
# Preview production build
npm run preview- Nuxt 3 - The Vue Framework
- Vue 3 - Progressive JavaScript Framework
- TypeScript - Type-safe JavaScript
- Tailwind CSS - Utility-first CSS framework
- Pinia - State Management
- Vitest - Unit Testing Framework
- VueUse - Vue Composition Utilities
This project is licensed under the MIT License - see the LICENSE file for details.
- Inspired by the need to quickly migrate legacy HTML to Vue 3
- Thanks to all contributors who help improve this tool
- Built with ❤️ for the Vue community
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Support for Vue 2 conversion
- JSX/TSX output option
- Better handling of event listeners
- Import statement detection and preservation
- Component composition detection
- Dark mode toggle
- Export as .vue file
- Multiple file conversion (batch processing)
- VS Code extension
⭐ Star this repo if you find it helpful!
Made with ❤️ by the community