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.

Practice

1. What is the main purpose of the Nuxt framework in Vue development?

easy

A. To simplify building Vue applications with features like routing and server-side rendering

B. To replace Vue.js as a new JavaScript framework

C. To provide a CSS framework for styling Vue apps

D. To create mobile apps without using Vue

Solution

1. Step 1: Understand Nuxt's role

   Nuxt is built on top of Vue to make app development easier by adding features like routing and SSR.

2. Step 2: Compare options

   Options A, C, and D describe roles Nuxt does not have. Nuxt does not replace Vue, is not a CSS framework, nor is it for mobile apps only.

3. Final Answer:

   To simplify building Vue applications with features like routing and server-side rendering -> Option A

4. Quick Check:

   Nuxt simplifies Vue app building [OK]

Hint: Nuxt adds features to Vue, not replaces it [OK]

Common Mistakes:

• Thinking Nuxt is a new framework replacing Vue
• Confusing Nuxt with styling or mobile frameworks
• Ignoring Nuxt's server-side rendering support

2. Which of the following is the correct way Nuxt handles routing in a project?

easy

A. Using file-based routing where pages are created as files in the pages directory

B. Routing is not supported in Nuxt

C. Using a third-party routing library separate from Nuxt

D. Manually defining routes in a router file

Solution

1. Step 1: Recall Nuxt routing method

   Nuxt uses file-based routing, meaning each file in the pages folder automatically becomes a route.

2. Step 2: Evaluate options

   Manually defining routes in a router file is Vue Router's manual method, not Nuxt's. Using a third-party routing library separate from Nuxt is incorrect because Nuxt integrates routing internally. Routing is not supported in Nuxt is false as routing is a core feature.

3. Final Answer:

   Using file-based routing where pages are created as files in the pages directory -> Option A

4. Quick Check:

   Nuxt uses file-based routing [OK]

Hint: Remember: pages folder files become routes automatically [OK]

Common Mistakes:

• Assuming manual route setup like Vue Router
• Thinking routing needs extra libraries
• Believing Nuxt does not support routing

3. Given this Nuxt page component code, what will be the rendered output?

<template>
  <h1>Welcome to Nuxt</h1>
  <p>Current mode: {{ mode }}</p>
</template>

<script setup>
const mode = 'SSR'
</script>

medium

A. Welcome to NuxtCurrent mode: SSG

B. Welcome to NuxtCurrent mode: SSR

C. Error: mode is not defined

D. Welcome to NuxtCurrent mode:

Solution

1. Step 1: Check the template interpolation

   The template uses {{ mode }} to display the value of the mode variable.

2. Step 2: Verify mode variable definition

   In the script setup, mode is defined as 'SSR', so it will render that string.

3. Final Answer:

   <h1>Welcome to Nuxt</h1><p>Current mode: SSR</p> -> Option B

4. Quick Check:

   Variable mode = 'SSR' displayed correctly [OK]

Hint: Check variable names and values in script setup [OK]

Common Mistakes:

• Assuming mode is undefined without checking script
• Confusing SSR with SSG values
• Ignoring template interpolation syntax

4. Identify the error in this Nuxt page component code:

<template>
  <h2>User Profile</h2>
  <p>Name: {{ user.name }}</p>
</template>

<script setup>
const user = null
</script>

medium

A. Missing import for user object

B. No error, code works fine

C. Template syntax is incorrect

D. Accessing property 'name' of null causes runtime error

Solution

1. Step 1: Analyze user variable value

   The user variable is set to null, which means it has no properties.

2. Step 2: Check template usage

   The template tries to access user.name, which causes a runtime error because null has no properties.

3. Final Answer:

   Accessing property 'name' of null causes runtime error -> Option D

4. Quick Check:

   Null object property access error [OK]

Hint: Check if variables are null before accessing properties [OK]

Common Mistakes:

• Assuming null has properties
• Thinking template syntax is wrong
• Expecting automatic null checks

5. You want to create a Nuxt app that pre-renders pages at build time for fast loading and SEO. Which Nuxt feature should you use?

hard

A. Server-Side Rendering (SSR)

B. Client-Side Rendering (CSR)

C. Static Site Generation (SSG)

D. Dynamic Routing

Solution

1. Step 1: Understand pre-rendering at build time

   Pre-rendering pages means generating HTML files during build, not on each request.

2. Step 2: Match feature to goal

   Static Site Generation (SSG) creates static HTML at build time, ideal for fast loading and SEO.

3. Step 3: Eliminate other options

   SSR renders on each request, CSR renders in browser, and dynamic routing is about URL patterns, not pre-rendering.

4. Final Answer:

   Static Site Generation (SSG) -> Option C

5. Quick Check:

   Pre-render pages at build = SSG [OK]

Hint: SSG means build-time pre-rendering for speed and SEO [OK]

Common Mistakes:

• Confusing SSR with build-time rendering
• Thinking CSR improves SEO by pre-rendering
• Mixing routing with rendering methods