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
  

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
  

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
  

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
    
  

Hint

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

Practice

1. Why is Vue considered a good choice for progressive web development?

easy

A. Because it helps build fast, reliable apps that work offline and on any device

B. Because it requires no JavaScript knowledge at all

C. Because it only works on desktop browsers

D. Because it forces you to write complex code

Solution

1. Step 1: Understand Vue's core benefits

   Vue is designed to create fast and reliable web apps that can work offline and on multiple devices.

2. Step 2: Compare options with Vue's features

   Options A, B, and C contradict Vue's simplicity and cross-device support, making D the correct choice.

3. Final Answer:

   Because it helps build fast, reliable apps that work offline and on any device -> Option A

4. Quick Check:

   Vue supports offline and device flexibility = D [OK]

Hint: Focus on offline and device support for progressive web apps [OK]

Common Mistakes:

• Thinking Vue only works on desktop
• Believing Vue requires no JavaScript knowledge
• Assuming Vue forces complex code

2. Which of the following is the correct way to declare a reactive data property in a Vue 3 component using the Composition API?

easy

A. const count = reactiveRef(0);

B. let count = reactive(0);

C. var count = reactiveRef(0);

D. const count = ref(0);

Solution

1. Step 1: Recall Vue 3 Composition API syntax

   To create a reactive primitive value, Vue 3 uses ref().

2. Step 2: Evaluate each option

   const count = ref(0); correctly uses ref(0). Options B, C, and D use incorrect or non-existent functions.

3. Final Answer:

   const count = ref(0); -> Option D

4. Quick Check:

   Use ref() for reactive primitives = A [OK]

Hint: Use ref() for single reactive values in Vue 3 [OK]

Common Mistakes:

• Using reactive() for primitive values
• Using non-existent reactiveRef() function
• Using var instead of const or let

3. Given this Vue 3 setup code, what will be the rendered output?

import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello');
    function update() {
      message.value += ' Vue';
    }
    update();
    return { message };
  }
}

What does {{ message }} display?

medium

A. Hello

B. Hello Vue

C. HelloVue

D. Error: message is not reactive

Solution

1. Step 1: Understand ref and reactive updates

   The message is a reactive ref initialized with 'Hello'.

2. Step 2: Analyze the update function

   The update() function appends ' Vue' to message.value, changing it to 'Hello Vue'.

3. Final Answer:

   Hello Vue -> Option B

4. Quick Check:

   Appending string to ref.value updates output = B [OK]

Hint: Remember to access reactive refs with .value [OK]

Common Mistakes:

• Forgetting to use .value to update ref
• Assuming reactive strings concatenate without space
• Thinking reactive refs don't update template

4. Identify the error in this Vue 3 component code that prevents it from working as a progressive web app:

export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    navigator.serviceWorker.register('/sw.js')
  }
}

medium

A. Service worker registration should be inside a lifecycle hook with error handling

B. Data must be a function returning an object

C. Missing semicolon after this.count++

D. Methods cannot access this.count

Solution

1. Step 1: Check service worker registration

   Registering a service worker is correct but should include error handling to ensure reliability.

2. Step 2: Evaluate other code parts

   Data is correctly a function, methods access this.count properly, and missing semicolon is not critical in JS.

3. Final Answer:

   Service worker registration should be inside a lifecycle hook with error handling -> Option A

4. Quick Check:

   Proper service worker setup needs error handling = C [OK]

Hint: Always add error handling when registering service workers [OK]

Common Mistakes:

• Ignoring error handling on service worker registration
• Thinking missing semicolon breaks code
• Confusing data function syntax

5. You want to progressively enhance a Vue app by adding offline support step-by-step. Which approach best fits Vue's progressive web development philosophy?

hard

A. Use Vue only for UI and ignore offline features

B. Build a full offline-first app from the start with complex caching logic

C. Start with a simple Vue app, then add a service worker and caching later

D. Write all features in vanilla JavaScript before adding Vue

Solution

1. Step 1: Understand progressive enhancement

   Progressive enhancement means starting simple and adding features gradually.

2. Step 2: Match Vue's philosophy

   Vue supports building apps step-by-step, so starting simple and adding offline support later fits best.

3. Final Answer:

   Start with a simple Vue app, then add a service worker and caching later -> Option C

4. Quick Check:

   Progressive enhancement = start simple, add features [OK]

Hint: Add offline features after basic app works [OK]

Common Mistakes:

• Trying to build full offline app upfront
• Ignoring offline support in Vue apps
• Delaying Vue usage until after vanilla JS