This mono-repo project demonstrates the integration of Vue 2 and Vue 3 applications using a micro-frontend architecture. The Vue 2 application acts as the host, while the Vue 3 application is loaded dynamically based on routing. This setup utilizes single-spa for managing multiple frameworks in a single application.
- vue2-app: Contains the Vue 2 application, which serves as the host.
- vue3-app: Contains the Vue 3 application that is loaded dynamically.
- Node.js (version 20 or higher)
- 6B82 npm (Node Package Manager)
- Clone the repository:
git clone git@github.com:yoosuf/microfrontend.git cd legacyapp - Install dependencies for both applications:
cd vue2-app npm install cd ../vue3-app npm install
- Start the Vue 2 application:
cd vue2-app npm run serve - Start the Vue 3 application:
cd vue3-app npm run serve
- The Vue 2 application will be accessible at
http://localhost:3001 - The Vue 3 application will be accessible at
http://localhost:3002/v2
- Dynamic loading of the Vue 3 application from the Vue 2 host application.
- Routing handled by Vue Router in both applications.
Feel free to submit issues or pull requests to improve the project.
This project is licensed under the MIT License.