Vue Nuxt
Tips & Tricks

A collection of Vue, Nuxt and Vite tips, tricks and good practices.

Nuxt Island is a specially built-in component that allows you to render the component entirely on the server, which means zero client-side JavaScript is served to the browser.

// 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 -->
        {{ date }}

<script setup lang="ts">
import moment from 'moment';
const date = moment().format('MMMM Do YYYY, h:mm:ss a');

All you have to do is move your component into the /components/islands directory and then call the component.

<!-- app.vue -->
    <NuxtIsland name="Hello" />