In this article, we will walk through the process of creating an interactive image component using Vue 3 Composition API.

First, let’s start by creating the basic structure of our component. We will create a div element with an id of #np-container and an img element with an id of #image. The img element will have its :src attribute set to the imageUrl variable. This variable will be used to dynamically update the image displayed in the component.

Next, we will import the ref function from the Vue library and assign the imageUrl variable to a reference of a URL. This will allow us to easily update the image displayed in the component by changing the value of the imageUrl variable.

Finally, we will set up the CSS to style the #np-container and the #image elements. We will use CSS to give the image a hover effect. When the user hovers over the #np-container element, the #image element will be scaled up to become larger.

With these steps, we have created a basic interactive image component using Vue.js. This component can be easily integrated into any application and can be customized to meet the specific needs of the project.

<template>
  <div>
    <div id="np-container">
      <img id="image" :src="imageUrl" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const imageUrl = ref('https://picsum.photos/400/300')
</script>

<style scoped>
#np-container {
  display: inline-block;
  border: 1px solid black;
  overflow: hidden;
}
#np-container img {
  display: block;
  transition: transform 0.5s;
}
#np-container:hover img {
  transform: scale(1.3);
  transform-origin: 50% 50%;
}
</style>Code language: HTML, XML (xml)

In the above code, we’ve taken a variable named imageUrl which stores the image url of the image we want to display. Please note that every time we refresh the page, we’re going to get a random image.

Then, we created a container with the id np-container with overflow set to hidden. This helps in keeping the container in its actual size even when the image size is increased.