DEV Community: Ali Ozzaim

Automating Vue CLI to Vite Migration with AI

Ali Ozzaim — Wed, 26 Mar 2025 19:43:15 +0000

Automating Vue CLI to Vite Migration with AI

Introduction

Migrating a Vue CLI project to Vite can be a challenging and time-consuming process. While Vite offers a faster, modern development experience, manually making the transition can involve updating configurations, optimizing dependencies, and ensuring compatibility. To simplify this, I built an AI-powered migration tool that automates the process in seconds!

Why

As a developer, I found that many Vue CLI projects still rely on outdated configurations, making migration to Vite complex. My goal was to:

Reduce manual effort in migration.

Optimize dependencies automatically.

Provide AI-powered suggestions for better migration.

Facilitate a smooth transition for basic Vue CLI projects.

While AI-generated code isn't always perfect, this tool aims to assist developers by automating tedious tasks and suggesting improvements.

How It Works

This tool automates the following steps:

📌 Generates a vite.config.js file tailored for your project.

⚡ Optimizes dependencies using AI-powered analysis.

🔄 Ensures Babel compatibility for smooth migration.

🗑️ Removes outdated configurations no longer needed.

📂 Adjusts file structures (e.g., ensures index.html exists).

🔗 Integrates with Git for branch creation and commits.

Getting Started

Installation

Make sure you have Node.js installed, then run:

npm install

Or using Yarn:

yarn install

Usage

Specify your Vue CLI project path in a .env file:

GOOGLE_API_KEY='your-google-api-key'
PROJECT_PATH='your-project-path'

Run the migration tool:

node src/index.js

Within seconds, your Vue CLI project will be migrated to Vite! 🚀

File Structure

vue-to-vite-ai/

│── src/
│   │── configMigrator.js  # Handles Vite config generation
│   │── dependencyOptimizer.js  # AI-powered package optimization
│   │── dependencyUpdater.js  # Updates outdated dependencies
│   │── gitHandler.js  # Manages Git operations
│   │── index.js  # Main entry point
│   │── utils.js  # Utility functions
│── templates/  # Stores template files
│── .env  # Environment variables
│── package.json  # Project dependencies

Limitations & Future Improvements

This tool is optimized for basic Vue CLI projects.

AI-generated migrations might require manual review and tweaks.

Future updates will focus on better AI suggestions and broader project compatibility.

Contributing

Feedback and contributions are always welcome! Feel free to open issues or submit pull requests.

Conclusion

Switching from Vue CLI to Vite shouldn't be a headache. With this AI-powered migration tool, developers can save time, reduce effort, and streamline the transition. While it’s not perfect, it provides a solid starting point for your migration journey.

Give it a try and let me know your thoughts! 🚀

Github Repo: github.com/Aliozzaim/Vue-CLI-to-Vite-AI-Powered-Migration-Tool

Vue #Vite #JavaScript #AI #Automation #OpenSource

Fixing vue-js-modal Library for Vue 3: A Guide to Restoring Modal Functionality

Ali Ozzaim — Sat, 10 Aug 2024 12:11:23 +0000

In one of my Vue 2 projects, I utilized the vue-js-modal library. However, after migrating the project from Vue 2 to Vue 3, the modal didn’t work properly. Despite extensive research, I couldn't find any documentation or discussions addressing this issue, which led me to write this article.

In this article, I will share the changes I made to adapt vue-js-modal for Vue 3. I hope you find these insights helpful!

First, please review the GitHub thread and apply the changes suggested here: https://github.com/euvl/vue-js-modal/issues/814

After following the suggestions from the GitHub thread, you might still encounter issues with the modal in your Vue 3 project. To fully resolve these problems, I made several changes to the PluginCore.js and Plugin.js files. Below, you'll find the details of these changes.

Changes in Plugin.js
Modify the plugin:

import Modal from './components/Modal.vue'
import Dialog from './components/Dialog.vue'
import PluginCore from './PluginCore'

const Plugin = {
  install(app, options = {}) {
    if (app.config.globalProperties.$modal) {
      return
    }

    const plugin = PluginCore(options)

    app.config.globalProperties.$modal = plugin
    app.provide('$modal', plugin)

    app.mixin({
      mounted() {
        if (this.$root === this) {
          if (!plugin.context.root) {
            plugin.setDynamicModalContainer(this)
          }
        }
      }
    })

    /**
     * Sets custom component name (if provided)
     */
    app.component(plugin.context.componentName, Modal)

    /**
     * Registration of <Dialog/> component
     */
    if (options.dialog) {
      const componentName = options.dialogComponentName || 'VDialog'
      app.component(componentName, Dialog)
    }
  }
}

export default Plugin

Changes in PluginCore.js
Imports and Initialization:

Replace the existing imports and initialization with the following:


import { h, render, createVNode } from 'vue';

Show Dynamic Modal:

Update the logic for showing dynamic modals:


const showDynamicModal = (
    component,
    componentProps,
    componentSlots,
    modalProps = componentSlots || {},
    modalEvents
) => {
    const container = context.root?.__modalContainer;
    const defaults = options.dynamicDefaults || {};

    if (!container) {
        console.warn('Modal container not found. Make sure the dynamic modal container is set.');
        return;
    }
    container.add(
        component,
        componentProps,
        componentSlots,
        { ...defaults, ...modalProps },
        modalEvents
    );
};

Set Dynamic Modal Container:

Modify the function responsible for setting the modal container:

const setDynamicModalContainer = (root) => {
    context.root = root;

    if (!root) {
        console.warn('Root component is undefined. Make sure the root instance is passed correctly.');
        return;
    }

    const element = createDivInBody();

    const vnode = createVNode(ModalsContainer);
    vnode.appContext = root.$.appContext;

    try {
        return render(vnode, element);
    } catch (error) {
        console.error('Error rendering vnode:', error);
    }
};

Final Changes in ModalsContainer.vue
As part of the migration to Vue 3, it was necessary to make a specific adjustment in the ModalsContainer.vue component.

Updating Event Listeners:

In the ModalsContainer.vue file, remove the existing v-on="$listeners" directive and replace it with:

v-on="modal.componentListeners" || {}

This change should be made at line number 13.

By making these adjustments, you should be able to successfully migrate the vue-js-modal library to work seamlessly with Vue 3. I hope these steps help you resolve any remaining issues with your modals! If you need further assistance, please don't hesitate to ask in the comments section. Additionally, I would appreciate any feedback or insights you have, so feel free to leave your comments below

https://www.aliozzaim.com
https://github.com/Aliozzaim/vue-js-modal updated repo

references
https://github.com/euvl/vue-js-modal/issues/814
https://github.com/euvl/vue-js-modal

Creating a 3D Gallery App with Three.js, HTML, and CSS - Part 3

Ali Ozzaim — Fri, 19 Jul 2024 15:31:59 +0000

In the previous part of this series, we organized our code into modules and added four walls to our 3D gallery. Now, we will build on that foundation by adding a roof, floor, and textures, as well as some advanced features to make our gallery more interactive and visually appealing.

Updated Project Structure

First, let's add a few more files to our project structure for the textures:

3d-gallery-app/
├── index.html
├── styles.css
├── src/
│   ├── main.js
│   ├── modules/
│   │   ├── lighting.js
│   │   ├── walls.js
│   │   ├── roof.js
│   │   ├── floor.js
│   │   ├── textures.js
│   │   └── animation.js
├── public/
│   ├── models/
│   ├── textures/
│   │   ├── wall-texture.jpg
│   │   ├── floor-texture.jpg
│   │   └── roof-texture.jpg
├── package.json
├── vite.config.js

Adding the Roof and Floor

Let's start by creating the roof and floor modules.

// src/modules/roof.js
import * as THREE from 'three';

export function addRoof(scene, textureLoader) {
    const roofTexture = textureLoader.load('public/textures/roof-texture.jpg');
    const roofMaterial = new THREE.MeshBasicMaterial({ map: roofTexture, side: THREE.DoubleSide });
    const roofGeometry = new THREE.PlaneGeometry(10, 10);
    const roof = new THREE.Mesh(roofGeometry, roofMaterial);

    roof.rotation.x = Math.PI / 2;
    roof.position.y = 5;
    scene.add(roof);
}

floor.js

// src/modules/floor.js
import * as THREE from 'three';

export function addFloor(scene, textureLoader) {
    const floorTexture = textureLoader.load('public/textures/floor-texture.jpg');
    const floorMaterial = new THREE.MeshBasicMaterial({ map: floorTexture, side: THREE.DoubleSide });
    const floorGeometry = new THREE.PlaneGeometry(10, 10);
    const floor = new THREE.Mesh(floorGeometry, floorMaterial);

    floor.rotation.x = -Math.PI / 2;
    floor.position.y = -5;
    scene.add(floor);
}

Updating main.js

Finally, update main.js to pass the texture loader to the modules when adding walls, roof, and floor.

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { addLighting } from './modules/lighting.js';
import { addWalls } from './modules/walls.js';
import { addRoof } from './modules/roof.js';
import { addFloor } from './modules/floor.js';
import { animate } from './modules/animation.js';

// Scene, Camera, Renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('gallery').appendChild(renderer.domElement);

// Lighting
addLighting(scene);

// Texture Loader
const textureLoader = new THREE.TextureLoader();

// Load Models if you have one 
const loader = new THREE.GLTFLoader();
loader.load('assets/models/model.gltf', function(gltf) {
    scene.add(gltf.scene);
}, undefined, function(error) {
    console.error(error);
});

// Camera Position
camera.position.set(0, 2, 10);

// Add Walls, Roof, and Floor
addWalls(scene, textureLoader);
addRoof(scene, textureLoader);
addFloor(scene, textureLoader);

// Add OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;

// Animation Loop
animate(renderer, scene, camera, controls);

// Handle Window Resize
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

// Handle Mouse Click
function onDocumentMouseClick(event) {
    event.preventDefault();
    const mouse = new THREE.Vector2(
        (event.clientX / window.innerWidth) * 2 - 1,
        -(event.clientY / window.innerHeight) * 2 + 1
    );

    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObjects(scene.children, true);
    if (intersects.length > 0) {
        const intersected = intersects[0].object;
        console.log('Model clicked:', intersected.name);
        // Display model information
    }
}

document.addEventListener('click', onDocumentMouseClick, false);

End of Part 3

By following these steps, you've successfully added a roof and floor to your 3D gallery and applied textures to make it more visually appealing.

Note

We haven't added new textures for the walls. You can search for wall textures online, download them, and replace the existing texture to further customize your gallery. Try to experiment with different textures to see how they change the look and feel of your gallery.

Continue to read for Part 4, which will cover user controls and key listeners for even more interactive features!

www.aliozzaim.com

Creating a 3D Gallery App with Three.js, HTML, and CSS - Part 2

Ali Ozzaim — Thu, 18 Jul 2024 21:42:31 +0000

In the first part of this series, we set up the basic structure for our 3D Gallery App using Three.js, HTML, and CSS. We created a simple 3D environment, added a model, and implemented basic navigation controls. In this part, we will enhance our project by adding four walls for our gallery and additional controls to improve user interaction.

Updated Project Structure

First, let's update our folder structure to better organize our code:

3d-gallery-app/
├── index.html
├── styles.css
├── src/
│   ├── main.js
│   ├── modules/
│   │   ├── lighting.js
│   │   ├── walls.js
│   │   └── animation.js
├── public/
│   ├── models/
│   ├── textures/
│   └── animations/
├── package.json
├── vite.config.js

Organizing Code into Modules

To keep our code organized, we'll split the functionality into different modules and we will do it so for each coming parts. We'll create three modules: lighting.js, walls.js, and animation.js.

lighting.js

// src/modules/lighting.js
import * as THREE from 'three';

export function addLighting(scene) {
    const ambientLight = new THREE.AmbientLight(0xffffff, 1);
    scene.add(ambientLight);
}

walls.js


// src/modules/walls.js
import * as THREE from 'three';

export function addWalls(scene) {
    const wallMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide });

    const wallGeometry = new THREE.PlaneGeometry(10, 5);
    const walls = [];

    // Create and position the walls
    const wall1 = new THREE.Mesh(wallGeometry, wallMaterial);
    wall1.position.set(0, 0, -5);
    walls.push(wall1);

    const wall2 = new THREE.Mesh(wallGeometry, wallMaterial);
    wall2.position.set(0, 0, 5);
    wall2.rotation.y = Math.PI;
    walls.push(wall2);

    const wall3 = new THREE.Mesh(wallGeometry, wallMaterial);
    wall3.position.set(-5, 0, 0);
    wall3.rotation.y = Math.PI / 2;
    walls.push(wall3);

    const wall4 = new THREE.Mesh(wallGeometry, wallMaterial);
    wall4.position.set(5, 0, 0);
    wall4.rotation.y = -Math.PI / 2;
    walls.push(wall4);

    // Add walls to the scene
    walls.forEach(wall => scene.add(wall));
}

animation.js

// src/modules/animation.js
export function animate(renderer, scene, camera, controls) {
    function render() {
        requestAnimationFrame(render);
        controls.update();
        renderer.render(scene, camera);
    }
    render();
}

Updating main.js

Now, let's update main.js to use these modules and add four walls to our gallery.

// src/main.js
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { addLighting } from './modules/lighting.js';
import { addWalls } from './modules/walls.js';
import { animate } from './modules/animation.js';

// Scene, Camera, Renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('gallery').appendChild(renderer.domElement);

// Lighting
addLighting(scene);

// Load Models if you have one 
const loader = new THREE.GLTFLoader();
loader.load('assets/models/model.gltf', function(gltf) {
    scene.add(gltf.scene);
}, undefined, function(error) {
    console.error(error);
});

// Camera Position
camera.position.set(0, 2, 10);

// Add Walls
addWalls(scene);

// Add OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;

// Animation Loop
animate(renderer, scene, camera, controls);

// Handle Window Resize
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

// Handle Mouse Click
function onDocumentMouseClick(event) {
    event.preventDefault();
    const mouse = new THREE.Vector2(
        (event.clientX / window.innerWidth) * 2 - 1,
        -(event.clientY / window.innerHeight) * 2 + 1
    );

    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObjects(scene.children, true);
    if (intersects.length > 0) {
        const intersected = intersects[0].object;
        console.log('Model clicked:', intersected.name);
        // Display model information
    }
}

document.addEventListener('click', onDocumentMouseClick, false);

End of Part 2

By implementing these steps, you've effectively improved the 3D Gallery App by organizing code modules and adding four gallery walls. This setup creates a more vivid environment for users to explore. In the next part, we'll continue to improve the user experience by adding a roof and ceiling, applying textures to the walls, and integrating more advanced features.

Keep an eye on this article for more exciting upgrades and enhancements in Part 3! :)

www.aliozzaim.com

Creating a 3D Gallery App with Three.js, HTML, and CSS - part 1

Ali Ozzaim — Wed, 17 Jul 2024 20:33:47 +0000

The 3D Gallery App lets users explore art in a 3D space, view detailed info about each piece, and enjoy a responsive design on any device. It's also easy to customize with new models to keep the gallery exciting. You can also take a look at an example of my 3D Gallery App here

Setting Up the Project

Set Up Vite
Start by creating a new directory for your project and create a new Vite project.

mkdir 3d-gallery-app
cd 3d-gallery-app
npm create vite@latest

Follow the prompts to name your project and select the framework. For this example, select vanilla.

Install Three.js: Three.js is the core library we'll use to create and manage 3D content.


npm install three

Create the Basic File Structure: Organize your project by creating the following files and directories:

3d-gallery-app/
├── index.html
├── styles.css
├── main.js
├── src/
├── public/
├── package.json
├── vite.config.js

Building the 3D Gallery

HTML Structure

Create a simple HTML file to set up the structure of your gallery.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Gallery App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="gallery"></div>
    <script src="main.js"></script>
</body>
</html>

CSS Styling

Add some basic CSS to style the gallery container.

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

#gallery {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}

Three.js

Now, let's dive into the JavaScript to create the 3D environment.

// Import Three.js
import * as THREE from 'three';

// Scene, Camera, Renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('gallery').appendChild(renderer.domElement);

// Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 1);
scene.add(ambientLight);

// Load Models
const loader = new THREE.GLTFLoader();
loader.load('assets/models/model.gltf', function(gltf) {
    scene.add(gltf.scene);
}, undefined, function(error) {
    console.error(error);
});

// Camera Position
camera.position.z = 5;

// Animation Loop
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

// Handle Window Resize
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

Adding Models

To add 3D models to your gallery, place your model files (e.g., .gltf or .obj files) in the assets/models/ directory. Make sure they are optimized for web use. You can also browse for models on the web.

Enhancing the Experience

1. Navigation Controls:
Add controls to navigate through the 3D space using OrbitControls.

npm install three-orbitcontrols

Then update main.js:

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

// Add OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.25;
controls.enableZoom = true;

2. Detailed Information:
Display detailed information about each model with event listeners.

function onDocumentMouseClick(event) {
    event.preventDefault();
    const mouse = new THREE.Vector2(
        (event.clientX / window.innerWidth) * 2 - 1,
        -(event.clientY / window.innerHeight) * 2 + 1
    );

    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouse, camera);

    const intersects = raycaster.intersectObjects(scene.children, true);
    if (intersects.length > 0) {
        const intersected = intersects[0].object;
        console.log('Model clicked:', intersected.name);
        // Display model information
    }
}

document.addEventListener('click', onDocumentMouseClick, false);

End of Part 1

By following these steps, you've built a basic 3D Gallery App using Three.js, HTML, and CSS. This application allows users to explore and interact with 3D models in an immersive virtual space. We've covered setting up your project, creating the 3D environment, adding models, and enhancing the experience with navigation controls and detailed model information.

In Part 2, we will take this project further by adding an four walls to our gallery and additional controls to enhance user interaction within the application. Stay tuned for more exciting features and improvements! :)

www.aliozzaim.com