Mouse button modifiers in Vue - Mini Project: Build & Apply

Mouse Button Modifiers in Vue

📖 Scenario: You are building a simple interactive webpage where users can click a button with different mouse buttons to see different messages.This helps understand how mouse button modifiers work in Vue.

🎯 Goal: Create a Vue component that shows a button. When the user clicks the button with the left, middle, or right mouse button, a message updates to show which button was clicked.

📋 What You'll Learn

Create a Vue component with a button and a message display

Use Vue's mouse button modifiers .left, .middle, and .right on the button's click event

Update a reactive message variable to show which mouse button was clicked

Ensure the component uses the Composition API with <script setup>

💡 Why This Matters

🌍 Real World

Mouse button modifiers help create interactive web apps that respond differently to left, middle, or right clicks, such as custom context menus or special controls.

💼 Career

Understanding event modifiers in Vue is essential for frontend developers to build intuitive and accessible user interfaces.

1

Set up the Vue component with a message variable

Create a Vue component using <script setup>. Inside it, create a reactive variable called message initialized to the string 'Click a button'. Also add a <template> with a <button> and a <p> that displays the message variable.

Vue

// Create a reactive variable called message with initial value 'Click a button'
// Your code here



  Click me
  {{ message }}

Need a hint?

Use ref from Vue to create a reactive variable called message.

2

Add click handler functions for each mouse button

Inside the <script setup>, add three functions: leftClick, middleClick, and rightClick. Each function should update the message variable to the strings 'Left button clicked', 'Middle button clicked', and 'Right button clicked' respectively.

Vue

import { ref } from 'vue'
const message = ref('Click a button')

// Add three functions: leftClick, middleClick, rightClick
// Each updates message to the correct string
// Your code here



  Click me
  {{ message }}

Need a hint?

Define three functions that set message.value to the correct string.

3

Add mouse button modifiers to the button click events

In the <template>, add three click event listeners to the <button> using Vue's mouse button modifiers: @click.left, @click.middle, and @click.right. Bind them to the functions leftClick, middleClick, and rightClick respectively.

Vue

import { ref } from 'vue'
const message = ref('Click a button')

function leftClick() {
  message.value = 'Left button clicked'
}

function middleClick() {
  message.value = 'Middle button clicked'
}

function rightClick() {
  message.value = 'Right button clicked'
}



  
  Click me
  {{ message }}

Need a hint?

Use Vue's mouse button modifiers on the button's click event to call the correct functions.

4

Add contextmenu event to prevent default right-click menu

In the <template>, add an event listener @contextmenu.prevent to the <button> to prevent the browser's default right-click menu from appearing when the right mouse button is clicked.

Vue

import { ref } from 'vue'
const message = ref('Click a button')

function leftClick() {
  message.value = 'Left button clicked'
}

function middleClick() {
  message.value = 'Middle button clicked'
}

function rightClick() {
  message.value = 'Right button clicked'
}



  
  Click me
  {{ message }}

Need a hint?

Add @contextmenu.prevent on the button to stop the default right-click menu.