Nuxt framework overview in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic Nuxt page component.

Vue

<template>
  <div>
    <h1>Welcome to Nuxt!</h1>
  </div>
</template>

<script setup>
export default [1];
</script>

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

AdefineProps()

BdefinePageMeta()

CdefineNuxtComponent()

DdefineComponent()

Attempts:

3 left

💡 Hint

Common Mistakes

Using definePageMeta() which is for page metadata, not component definition.

Using defineProps() which is for props, not component definition.

In Nuxt, you create components using defineComponent() to define a Vue component.

2fill in blank

medium

Complete the code to fetch data asynchronously in a Nuxt page using the Composition API.

Vue

<script setup>
const data = await [1](() => fetch('/api/data').then(res => res.json()));
</script>

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

AuseAsyncData

BuseFetch

CuseState

DuseEffect

Attempts:

3 left

💡 Hint

Common Mistakes

Using useFetch which is for client-side fetch but not recommended for server-side data fetching in Nuxt.

Using useEffect which is a React hook, not Vue/Nuxt.

useAsyncData is the Nuxt Composition API helper to fetch async data in pages.

3fill in blank

hard

Fix the error in the Nuxt page script to correctly define page metadata.

Vue

<script setup>
[1]({ title: 'Home Page' });
</script>

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

AdefinePageMeta

BdefineComponent

CdefineProps

DdefineAsyncData

Attempts:

3 left

💡 Hint

Common Mistakes

Using defineComponent which defines components, not page metadata.

Using defineProps which is for props, not metadata.

definePageMeta is used to set page metadata like title in Nuxt.

4fill in blank

hard

Fill both blanks to create a reactive state and update it in Nuxt Composition API.

Vue

<script setup>
const count = [1](0);

function increment() {
  count[2]++;
}
</script>

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

Aref

Breactive

C+=

D++

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive for a primitive value which is not recommended.

Using += without specifying the increment value.

Use ref to create a reactive primitive, and ++ to increment its value.

5fill in blank

hard

Fill all three blanks to create a Nuxt plugin that injects a global function.

Vue

export default defineNuxtPlugin(nuxtApp => {
  nuxtApp.provide('[1]', () => {
    return '[2]';
  });

  const injected = nuxtApp.$[3];
});

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

Ahello

BHello from plugin!

Dgreet

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for provide and access causing undefined errors.

Returning a non-string value.

The plugin provides a function named hello that returns a greeting string. It is accessed via nuxtApp.$hello.