Nuxt Server Components Example

Client Interactivity with Server Components

Client Components can be put in the Server Components slot.

Preview

Client Component

Server Component

This is not interactive.

Count: 0

Client Component

This is interactive.

Count: 0

Code

    components
      • islands
    pages
      examples
<script setup lang="ts">
definePageMeta({
  layout: 'example',
});

const count = ref(0);
</script>

<template>
  <Boundary label="Client Component">
    <ServerComponent class="mt-6">
      <Boundary label="Client Component" class="mt-6">
        <Counter>
          <p>This is interactive.</p>
        </Counter>
      </Boundary>
    </ServerComponent>
  </Boundary>
</template>