Nuxt Server Components Example

Standalone Server Components

Standalone server components will always be rendered on the server, also known as Islands components. When their props update, this will result in a network request that will update the rendered HTML in-place.

Preview

Client Component

Server Component

This component is not included in the bundle

If count is changed, code is changed.

const a = 0

scoped style work

Code

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

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

<template>
  <Boundary label="Client Component">
    <button class="mt-2 rounded-md bg-gray-800 px-2 py-1" @click="count++">
      increment
    </button>
    <CodeExample :count class="mt-6" />
  </Boundary>
</template>