Fix: Plugin Has No Content in Nuxt

Error message:
Plugin `{plugin}` has no content.
plugins 2025-01-25

What Causes This Warning?

This warning appears when Nuxt detects a plugin file that either has no code, doesn’t export anything, or has a syntax error preventing it from being parsed.

The Problem

// plugins/empty.ts
// ❌ Empty file - no content

// plugins/no-export.ts
// ❌ No default export
const config = { api: 'https://api.com' }

// plugins/broken.ts
// ❌ Syntax error
export default defineNuxtPlugin((
  // Missing closing

The Fix

Proper Plugin Structure

// plugins/my-plugin.ts
// ✅ Correct - has defineNuxtPlugin export
export default defineNuxtPlugin(() => {
  // Plugin logic here
  console.log('Plugin loaded')
})

With Plugin Options

// plugins/api.ts
// ✅ Correct - named plugin with setup
export default defineNuxtPlugin({
  name: 'api',
  setup() {
    const config = useRuntimeConfig()
    return {
      provide: {
        api: {
          baseURL: config.public.apiBase
        }
      }
    }
  }
})

Common Patterns

Basic Plugin

// plugins/hello.ts
export default defineNuxtPlugin(() => {
  console.log('Hello from plugin!')
})

Plugin That Provides Utility

// plugins/utils.ts
export default defineNuxtPlugin(() => {
  return {
    provide: {
      formatDate: (date: Date) => date.toLocaleDateString(),
      formatCurrency: (amount: number) => `$${amount.toFixed(2)}`
    }
  }
})

Usage:

<script setup>
const { $formatDate, $formatCurrency } = useNuxtApp()

const formattedDate = $formatDate(new Date())
const price = $formatCurrency(29.99)
</script>

Client-Only Plugin

// plugins/analytics.client.ts
export default defineNuxtPlugin(() => {
  // Only runs on client
  window.analytics = {
    track: (event: string) => console.log('Track:', event)
  }
})

Server-Only Plugin

// plugins/server-init.server.ts
export default defineNuxtPlugin(() => {
  // Only runs on server
  console.log('Server starting...')
})

Fixing Empty Plugins

Option 1: Add Content

// plugins/placeholder.ts
// ❌ Before - empty

// ✅ After - minimal valid plugin
export default defineNuxtPlugin(() => {
  // TODO: Add plugin logic
})

Option 2: Remove the File

# If you don't need the plugin
rm plugins/empty.ts

Option 3: Disable Temporarily

// plugins/_disabled-plugin.ts
// Prefix with _ to exclude from auto-loading

Or in config:

// nuxt.config.ts
export default defineNuxtConfig({
  plugins: [
    // Explicitly list plugins, excluding empty one
    '~/plugins/active-plugin.ts'
  ]
})

Plugin with Hooks

// plugins/lifecycle.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('app:created', () => {
    console.log('App created')
  })

  nuxtApp.hook('page:start', () => {
    console.log('Page navigation started')
  })

  nuxtApp.hook('page:finish', () => {
    console.log('Page navigation finished')
  })
})

Async Plugin

// plugins/async-init.ts
export default defineNuxtPlugin(async () => {
  // Async initialization
  const config = await $fetch('/api/config')

  return {
    provide: {
      appConfig: config
    }
  }
})

Plugin Dependencies

// plugins/dependent.ts
export default defineNuxtPlugin({
  name: 'dependent',
  dependsOn: ['api'],  // Runs after 'api' plugin
  setup() {
    const { $api } = useNuxtApp()
    // Can safely use $api
  }
})

Plugin Order

// plugins/01.first.ts - runs first (alphabetical)
export default defineNuxtPlugin(() => {
  console.log('First')
})

// plugins/02.second.ts - runs second
export default defineNuxtPlugin(() => {
  console.log('Second')
})

Or use enforce:

// plugins/early.ts
export default defineNuxtPlugin({
  name: 'early',
  enforce: 'pre',  // Runs before others
  setup() {}
})

// plugins/late.ts
export default defineNuxtPlugin({
  name: 'late',
  enforce: 'post',  // Runs after others
  setup() {}
})

TypeScript Plugin

// plugins/typed.ts
export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: (name: string): string => `Hello ${name}!`
    }
  }
})

// types/plugins.d.ts
declare module '#app' {
  interface NuxtApp {
    $hello(name: string): string
  }
}

Debugging

Check which plugins are loaded:

// plugins/debug.ts
export default defineNuxtPlugin((nuxtApp) => {
  if (process.dev) {
    console.log('Loaded plugins:', Object.keys(nuxtApp._dependencies || {}))
  }
})

Quick Checklist

  • Plugin file has export default defineNuxtPlugin(...)
  • No syntax errors in the file
  • Function body exists (even if empty with TODO)
  • File extension is .ts or .js
  • Remove or disable unused plugin files
  • Check for proper closing brackets/parentheses