// This feature is still experimental so you have to enable it in nuxt.config
export default defineNuxtConfig({
experimental: {
componentIslands: true
}
})
Let's say that you have a JS-rich component, but you don't need the code of that library in your production bundle. One example could be using a heavy date manipulation library like moment.js. We just want to format some data and show users the result. It's a perfect use case for server components. You are running JS on the server and returning HTML without any JS to the browser.
<!-- components/Hello.vue -->
<template>
<div>
<h1>Hello</h1>
{{ date }}
</div>
</template>
<script setup lang="ts">
import moment from 'moment';
const date = moment().format('MMMM Do YYYY, h:mm:ss a');
</script>
All you have to do is move your component into the /components/islands directory and then call the component.
<!-- app.vue -->
<template>
<NuxtIsland name="Hello" />
</template>