Ex No: 11 MOUSE OVER EVENT IN VUE.JS
Aim: To demonstrate mouseover even in Vue.js.
Procedure
Step1: Install Node Package Manager (npm) in the system.
Step2: Create New Vue.js project using "npm create vue@latest".
Step3: Open the created project folder and install the dependencies using "npm install".
Step4: Create two components "AppTitle.vue" and "ProdDisp.vue" place the components in projects src>components folder.
Step6: Include the created components in "App.vue" file and provide proper template and CSS to show the compnents.
Step7: Run the code using "npm run dev".
Source Code

App.vue


<script setup>
import AppTitle from './components/AppTitle.vue';
import ProdDisp from './components/ProdDisp.vue';
</script>

<template>
  <header>
    <AppTitle title="Mouse Over Event" class="css-title"/>
  </header>
  <main>
    <div>
      <ProdDisp />
    </div>
  </main>
  <footer>
    <AppTitle title="Developed by K. Anbarasan" class="css-footer" />
  </footer>
</template>


<style>

main{
  height: 200px;
 }
 main >div{
  padding: 10px;
 }

@media (min-width: 1024px) {
 main{
  height: 400px;
 }
}
</style>

AppTitle.vue


<script setup>
defineProps({
  title: {
    type: String,
    required: true
  }
});
</script>

  <template>
    <div>
      <h1>{{ title }}</h1>
    </div>
  </template>
  
  
  <style>
  .css-title {
    text-align: center;
    display: block;
    height: 100px;
    width: auto;
    background-color:darkturquoise;
    color: red;
    text-decoration: underline;
    border-radius: 10px;
  }
  
  .css-footer {
    text-align: center;
    display: block;
    height: 100px;
    width: auto;
    font-size: 10px;
    background-color:rgb(206, 227, 228);
    color: red;
    text-decoration: underline;
    border-radius: 10px;
  }
  </style>

ProdDisp.vue


  <template>
    <div>
      <h1>Product Color Options</h1>
      <div class="product-display">
        <img :src="currentImage" :alt="product.name" />
      </div>
      <div class="color-options">
        <div
          v-for="(color, index) in product.colors"
          :key="index"
          class="color-box"
          :style="{ backgroundColor: color.colorCode }"
          @mouseover="changeColor(index)"
        ></div>
      </div>
    </div>
  </template>
  
  
<script>
export default {
  data() {
    return {
      product: {
        name: "Scrambler 400X",
        images: [
          "src/assets/black.jpg",  // Replace with actual paths to images
          "src/assets/red.jpg",
          "src/assets/green.jpg"
        ],
        colors: [
          { name: "Black", colorCode: "#000000" },
          { name: "Red", colorCode: "#FF0000" },
          { name: "Green", colorCode: "#2E3817" }
        ]
      },
      currentImage: "src/assets/black.jpg"  // Set the initial image
    };
  },
  methods: {
    changeColor(index) {
      this.currentImage = this.product.images[index];
    }
  }
};
</script>
  
  <style>
 
.product-display img {
  width: 300px;
  height: auto;
}

.color-options {
  display: flex;
  margin-top: 20px;
}

.color-box {
  width: 50px;
  height: 50px;
  margin: 0 10px;
  cursor: pointer;
  border: 2px solid #ccc;
  transition: border-color 0.3s;
}

.color-box:hover {
  border-color: #000;
}
  </style>
Result: Thus vue.js application is created to perform addition using click event.