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
.tsor.js - Remove or disable unused plugin files
- Check for proper closing brackets/parentheses