Why Vue for progressive web development - See It in Action

Why Vue for progressive web development

📖 Scenario: You are building a simple web app that shows a list of favorite books. You want to use Vue to make the app interactive and ready for progressive web development.

🎯 Goal: Create a Vue 3 app that displays a list of books and allows users to add a new book. This will show how Vue helps build progressive web apps with reactive data and easy updates.

📋 What You'll Learn

Create a reactive list of books using Vue's ref

Add a reactive variable for the new book title

Use a method to add the new book to the list

Bind input and button to Vue's reactive data and methods

💡 Why This Matters

🌍 Real World

Vue is popular for building progressive web apps because it makes UI reactive and easy to update. This project shows how to manage data and user input simply.

💼 Career

Understanding Vue's reactive system and template bindings is key for frontend developer roles focused on modern web apps and progressive web development.

1

Setup the initial book list

Create a reactive variable called books using Vue's ref with these exact initial values: 'The Hobbit', '1984', 'Pride and Prejudice'.

Vue

import { ref } from 'vue'

// Create reactive books list here




  
    My Favorite Books
  

Need a hint?

Use const books = ref([...]) to create a reactive array.

2

Add a reactive variable for new book input

Create a reactive variable called newBook using Vue's ref and set it to an empty string ''.

Vue

import { ref } from 'vue'

const books = ref(['The Hobbit', '1984', 'Pride and Prejudice'])

// Create reactive newBook variable here




  
    My Favorite Books
  

Need a hint?

Use const newBook = ref('') to hold the input text.

3

Add method to add new book to the list

Create a function called addBook that pushes the value of newBook.value into books.value and then clears newBook.value to an empty string ''.

Vue

import { ref } from 'vue'

const books = ref(['The Hobbit', '1984', 'Pride and Prejudice'])
const newBook = ref('')

// Create addBook function here




  
    My Favorite Books
  

Need a hint?

Define addBook to update the reactive list and clear input.

4

Bind input and button in template

In the <template>, add an <input> bound with v-model to newBook and a <button> with a @click event that calls addBook. Also, use v-for to display each book in books as a list item <li> inside a <ul>.

Vue

import { ref } from 'vue'

const books = ref(['The Hobbit', '1984', 'Pride and Prejudice'])
const newBook = ref('')

function addBook() {
  books.value.push(newBook.value)
  newBook.value = ''
}




  
    My Favorite Books
    
  

Need a hint?

Use v-model on input, @click on button, and v-for to list books.