Hydration behavior in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Vue 3 component that uses hydration.

Vue

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Hello, Vue!')

// Enable hydration with [1]
</script>

Drag options to blanks, or click blank then click option'

AdefineHydrate()

BdefineExpose()

CdefineProps()

DdefineEmits()

Attempts:

3 left

💡 Hint

Common Mistakes

Using defineHydrate() which does not exist.

Confusing defineExpose() with hydration.

Using defineEmits() which is for events.

In Vue 3, defineProps() is used to define props that can be hydrated from server-rendered HTML.

2fill in blank

medium

Complete the code to prevent hydration mismatch warnings by matching server and client markup.

Vue

<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref([1])
</script>

Drag options to blanks, or click blank then click option'

Anull

B0

Cundefined

DNaN

Attempts:

3 left

💡 Hint

Common Mistakes

Setting count to null causes different server/client markup.

Using undefined leads to hydration warnings.

Starting with NaN breaks rendering.

Initializing count to 0 ensures the server and client render the same initial markup, avoiding hydration mismatches.

3fill in blank

hard

Fix the error in the hydration code by completing the blank.

Vue

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Hello')

if (typeof window !== [1]) {
  message.value = 'Hello from client'
}
</script>

Drag options to blanks, or click blank then click option'

A'undefined'

B'object'

C'string'

D'function'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'object' instead of 'undefined' causes logic errors.

Checking for 'string' or 'function' is incorrect here.

Checking if typeof window !== 'undefined' ensures the code runs only on the client, preventing hydration errors.

4fill in blank

hard

Fill both blanks to create a reactive signal that updates only on the client side after hydration.

Vue

<template>
  <p>{{ clientMessage }}</p>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const clientMessage = ref('Server message')
onMounted(() => {
  clientMessage.value = [1]
  console.log([2])
})
</script>

Drag options to blanks, or click blank then click option'

A'Client message loaded'

BclientMessage.value

CclientMessage

D'Server message'

Attempts:

3 left

💡 Hint

Common Mistakes

Logging clientMessage directly logs the ref object, not the value.

Using 'Server message' does not update the message.

Assigning to clientMessage instead of clientMessage.value causes errors.

On client mount, update clientMessage.value to a new string and log its value to confirm the update.

5fill in blank

hard

Fill all three blanks to create a Vue 3 hydration-safe component that fetches data only on the client.

Vue

<template>
  <div>{{ data }}</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const data = ref(null)
onMounted(async () => {
  const response = await fetch([1])
  data.value = await response.[2]()
  console.log([3])
})
</script>

Drag options to blanks, or click blank then click option'

A'/api/data'

Bjson

Cdata.value

D'/api/info'

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong endpoint string causes fetch errors.

Calling response.text() instead of json() returns wrong data format.

Logging data instead of data.value logs the ref object.

Fetch data from '/api/data', parse JSON, and log the reactive value after hydration on client.