Nuxt

How do you create runtime-only composable plugins in Nuxt 4 using app/extensions?

December 4, 2025

download ready
Thank You
Your submission has been received.
We will be in touch and contact you soon!

Advanced Plugin System

Nuxt 4's app/extensions/ auto-injects client-only composables skipping SSR serialization. Perfect for WebSocket clients, IndexedDB, browser APIs without hydration issues. Extensions provide reactive state globally via useNuxtApp().

Step-by-Step Implementation

Step 1: Create Extension Directory:-

Code

app/
  extensions/
    ws-client.ts     # Client-only composable

Step 2: Define Extension Composable:-

Code

// app/extensions/ws-client.ts
export default defineNuxtExtension((nuxtApp) => {
  const ws = ref<WebSocket | null>(null)
  const messages = ref<Message[]>([])
  const status = ref<'disconnected' | 'connecting' | 'connected'>('disconnected')
  
  const connect = () => {
    ws.value = new WebSocket('wss://api.example.com/notifications')
    ws.value.onopen = () => status.value = 'connected'
    ws.value.onmessage = (event) => {
      messages.value.push(JSON.parse(event.data))
    }
    ws.value.onclose = () => status.value = 'disconnected'
  }
  const send = (data: any) => ws.value?.send(JSON.stringify(data))
  
  // Global access
  nuxtApp.provide('notifications', { 
    ws, messages, status, connect, send 
  })
})

Step 3: Use in Any Component:-

Code

<template>
  <div>
    <div v-if="$notifications.status === 'connected'" class="status connected">
      Connected ({{ $notifications.messages.length }} messages)
    </div>
    <button @click="$notifications.connect()" v-else>
      Connect Notifications
    </button>
    <div v-for="msg in $notifications.messages" :key="msg.id">
      {{ msg.content }}
    </div>
  </div>
</template>

<script setup>
// Auto-available globally
const { $notifications } = useNuxtApp()
</script>

Step 4: Verify Client-Only Execution:-

Code

// Only runs client-side - no SSR
if (process.client) {
  console.log('Extension loaded:', $notifications.status.value)
}
Arrow icon

Previous

Next

Arrow icon
Hire Now!

Need Help with Nuxt Development ?

Work with our skilled nuxt developers to accelerate your project and boost its performance.
**Hire now**Hire Now**Hire Now**Hire now**Hire now

Related Q&A

blog-banner-img
calender
December 8, 2025

How does Nuxt 4’s new app directory structure enhance code organization and modularity?

Nuxt
All
blog-banner-img
calender
December 8, 2025

How can you utilize AbortController in Nuxt 4 to handle async data fetching?

Nuxt
All
blog-banner-img
calender
December 8, 2025

What are the challenges and solutions when implementing authentication flows in Nuxt SSR apps?

Nuxt
All
Ready to Build
Something Amazing?
Got an Idea?
We got you.
Need a Tech Partner
You Can Trust?
Got Challenges?
We’ve Got Solutions.
Your Vision,
Our Mission.
Let’s talk.
Project Inquiry
Email iconhello@zignuts.com
Call icon+49 3056837888
Call icon+1 4088728242
Career Inquiry
Email icontalent@zignuts.com
Call icon+91 9427726620
India
A-409, Siddhraj Zori, Gandhinagar, 382421, Gujarat, India
Germany
Rheinsberger Str. 76,10115 Berlin, Germany
USA
611 Gateway Blvd, South San francisco, CA 94080, USA
Company Deck

Company Deck

PDF, 3MB

© 2026 Zignuts Technolab. All Rights Reserved.

Facebook iconTwitter iconInstagram iconYoutube iconLinkedIn iconSocial icon

How do you create runtime-only composable plugins in Nuxt 4 using app/extensions?

Advanced Plugin System

Nuxt 4's app/extensions/ auto-injects client-only composables skipping SSR serialization. Perfect for WebSocket clients, IndexedDB, browser APIs without hydration issues. Extensions provide reactive state globally via useNuxtApp().

Step-by-Step Implementation

Step 1: Create Extension Directory:-

Code

app/
  extensions/
    ws-client.ts     # Client-only composable

Step 2: Define Extension Composable:-

Code

// app/extensions/ws-client.ts
export default defineNuxtExtension((nuxtApp) => {
  const ws = ref<WebSocket | null>(null)
  const messages = ref<Message[]>([])
  const status = ref<'disconnected' | 'connecting' | 'connected'>('disconnected')
  
  const connect = () => {
    ws.value = new WebSocket('wss://api.example.com/notifications')
    ws.value.onopen = () => status.value = 'connected'
    ws.value.onmessage = (event) => {
      messages.value.push(JSON.parse(event.data))
    }
    ws.value.onclose = () => status.value = 'disconnected'
  }
  const send = (data: any) => ws.value?.send(JSON.stringify(data))
  
  // Global access
  nuxtApp.provide('notifications', { 
    ws, messages, status, connect, send 
  })
})

Step 3: Use in Any Component:-

Code

<template>
  <div>
    <div v-if="$notifications.status === 'connected'" class="status connected">
      Connected ({{ $notifications.messages.length }} messages)
    </div>
    <button @click="$notifications.connect()" v-else>
      Connect Notifications
    </button>
    <div v-for="msg in $notifications.messages" :key="msg.id">
      {{ msg.content }}
    </div>
  </div>
</template>

<script setup>
// Auto-available globally
const { $notifications } = useNuxtApp()
</script>

Step 4: Verify Client-Only Execution:-

Code

// Only runs client-side - no SSR
if (process.client) {
  console.log('Extension loaded:', $notifications.status.value)
}