Why Vue for progressive web development - Challenge Your Understanding

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why is Vue's Composition API beneficial for progressive web apps?

Vue's Composition API helps organize code in progressive web apps by:

A Forcing all components to be class-based

B Automatically caching all data without developer input

C Allowing better code reuse and logical grouping of features

D Replacing the need for service workers entirely

💡 Hint

Think about how code organization helps maintainability in apps.

The Composition API lets developers group related code together, making it easier to manage complex progressive web apps.

❓ component_behavior

intermediate

What happens when a Vue PWA component uses ref for state?

In Vue 3, using ref inside a PWA component means:

A The ref disables service worker caching for that component

B The state is static and never changes after initialization

C The component will not render until the ref is manually unwrapped

D The state is reactive and updates the UI automatically

💡 Hint

Remember what reactivity means in Vue.

Using ref creates reactive state that Vue tracks to update the UI when the value changes.

❓ lifecycle

advanced

Which Vue lifecycle hook is best for registering a service worker in a PWA?

To register a service worker in a Vue PWA, you should use the lifecycle hook:

A onMounted, because it runs after the component is added to the DOM

B onBeforeMount, because it runs before the component is created

C onUnmounted, because it runs when the component is removed

D onUpdated, because it runs after every update

💡 Hint

Think about when the DOM is ready for service worker registration.

Service workers should be registered after the component is mounted to the DOM, so onMounted is ideal.

📝 Syntax

advanced

What is the correct way to define a reactive object in Vue 3 for PWA state?

Choose the correct syntax to create a reactive object named user with a name property:

A const user = reactive({ name: 'Alice' })

B const user = ref({ name: 'Alice' })

C const user = reactive('name', 'Alice')

D const user = ref('name', 'Alice')

💡 Hint

Reactive objects use reactive(), refs wrap single values.

reactive() creates a reactive object. ref() is for single values, not objects.

🔧 Debug

expert

Why does this Vue PWA component fail to update UI when state changes?

Given this code snippet, why does the UI not update when count.value changes?

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value = count.value + 1;
    }
    return { count, increment };
  }
}

A Because ref cannot be used inside setup()

B Because count is a ref, you must update count.value, not count directly

C Because increment function is not returned from setup()

D Because count should be declared with reactive() instead of ref()

💡 Hint

Think about how to update a ref's value properly.

Refs hold their value in .value. Assigning to count replaces the ref, breaking reactivity.

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