Vue.js Interview Questions

Practice for Vue.js interviews by solving TestDome questions. Our interview questions are used by more than 6,000 companies and 450,000 individual test takers.

Jobseekers: Certify Your Knowledge

Take a Certification Test

Companies: Use Our Tests for Screening

Buy a Pack Of Candidates

Try to solve 4 Vue.js interview questions and Vue interview questions below. Hints can help you find answers to questions you are having trouble with.

1. Toggle Message

Directives Event handling
   
Easy  

Page contains an anchor element and a paragraph below it. The paragraph's visibility should be toggled by clicking on an anchor element with the following logic:

  • At start, paragraph should not be visible
  • After a click, paragraph should be visible
  • After another click, paragraph should not be visible again

Implement the following logic by adding missing attributes to anchor and paragraph elements.

HTML5, CSS3, Vue v2  
 


  •   At start, paragraph should not be visible: Wrong answer
  •   After a click, paragraph should be visible: Wrong answer
  •   After a second click, paragraph should not be visible again: Wrong answer


2. Add Users

Directives Event handling
   
Easy  

A website requires a page for adding users to the table Users. Users can be added in two ways:

  • By specifying their first name and last name with input elements, and then clicking on "Add user" button. After user is added, input elements should be cleared.
  • By executing the following JavaScript code: vm.users.push({firstName: "John", lastName: "Doe" })

After a user is added, it should be listed in the table Users, where the index column should start from 1.

For example, after executing vm.users.push({firstName: "John", lastName: "Doe" }) and adding Ann Franklin through UI, the tbody part of the Users table should be:

<tr>
  <td>1</td>
  <td>John</td>
  <td>Doe</td>
</tr>
<tr>
  <td>2</td>
  <td>Ann</td>
  <td>Franklin</td>
</tr>
HTML5, CSS3, Vue v2  
 


  •   Example case: Wrong answer
  •   Add users from UI: Wrong answer
  •   Add users from code: Wrong answer
  •   Fields are cleared after adding users from UI: Wrong answer


3. Labeled Input

Components
   
Hard  

A developer team wants to have a component that is made from a label and an input element. Implement a Vue.js component so that reusable element defined as:

<labeledinput id="username">Username: </labeledinput>

is rendered as:

<div>
  <label for="username">Username: </label>
  <input type="text" id="username">
</div>

The component should be able to be used under parent divs with different ids, and developers will want to specify different values for an element's id and an element's content.

HTML5, CSS3, Vue v2  
 


  •   Example case: Exception
  •   Html attributes of rendered component: Wrong answer
  •   Label content of rendered component: Wrong answer


4. Image Gallery App

Components Event handling Managing state
   
Hard 

An image gallery is a set of images with corresponding remove buttons. This is the HTML code for a gallery with two images:

<div>
  <div class="image">
    <img src="https://goo.gl/kjzfbE">
    <button class="remove">X</button>
  </div>
  <div class="image">
    <img src="https://goo.gl/d2JncW">
    <button class="remove">X</button>
  </div>
</div>

Implement the image-gallery component that accepts a links prop and renders the gallery described above so that the first item in the links prop is the src attribute of the first image in the gallery. It should also implement the following logic: When the button is clicked, the image that is in the same div as the button should be removed from the gallery.

For example, after the first image has been removed from the gallery above, it's HTML code should look like this:

<div>
  <div class="image">
    <img src="https://goo.gl/d2JncW">
    <button class="remove">X</button>
  </div>
</div>
HTML5, CSS3, Vue v2  
 


  •   Example case: Wrong answer
  •   ImageGallery will render the correct list: Wrong answer
  •   Remove a single image: Wrong answer
  •   Remove multiple images: Wrong answer


If you feel ready, take one of our timed public Vue.js Interview Questions tests:
HTML/CSS

HTML/CSS and Vue.js Online Test (Easy / Hard)

HTML/CSS, Vue.js, and Node.js Online Test (Easy / Hard)

HTML/CSS, Vue.js, Node.js, and SQL Online Test (Easy / Hard)

Vue.js

Vue.js Online Test (Easy / Hard)

Not exactly what you are looking for? Go to our For Jobseekers section.