Nuxt Content Components Demo

This post demonstrates the custom components available in our Nuxt Content setup.

Alert Components

You can use different types of alerts in your content:

Callout Component

Use callouts to highlight key insights or tips:

Optimized Images

Images are automatically optimized using @nuxt/image:

Code Blocks with Enhanced Features

Here's a JavaScript example with syntax highlighting:

// Example of async/await in JavaScript
async function fetchUserData(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    const userData = await response.json();
    return userData;
  } catch (error) {
    console.error("Error fetching user data:", error);
    throw error;
  }
}

Vue.js component example:

<template>
  <div class="user-profile">
    <h2>{{ user.name }}</h2>
    <p>{{ user.email }}</p>
    <UButton @click="updateProfile">Update Profile</UButton>
  </div>
</template>

<script setup>
const user = ref({
  name: "John Doe",
  email: "john@example.com",
});

const updateProfile = () => {
  // Update profile logic
  console.log("Updating profile...");
};
</script>

Regular Markdown Features

All standard markdown features work as expected:

Lists

• Unordered list item 1
• Unordered list item 2
  • Nested item
  • Another nested item

1. Ordered list item 1
2. Ordered list item 2
3. Ordered list item 3

Blockquotes

This is a blockquote. It's useful for highlighting quotes or important statements from other sources.

Tables

Links and Emphasis

You can use links, bold text, italic text, and

inline code

This demonstrates the full range of content capabilities available in our Nuxt Content setup!