feat: ref/reactive outside vue/nuxtApp context detection

playground/plugins/memleak.ts

@@ -0,0 +1,7 @@
+import { defineNuxtPlugin, ref } from '#imports'
+
+ref('memory-leak-warning-shown')
+
+export default defineNuxtPlugin(() => {
+  // Show memory leak warning
+})

src/module.ts

@@ -1,4 +1,4 @@
-import { defineNuxtModule, addPlugin, createResolver, addBuildPlugin, addComponent, addServerPlugin, addServerHandler } from '@nuxt/kit'
+import { defineNuxtModule, addPlugin, createResolver, addBuildPlugin, addComponent, addServerPlugin, addImports, addServerHandler } from '@nuxt/kit'
 import { HYDRATION_ROUTE, HYDRATION_SSE_ROUTE } from './runtime/hydration/utils'
 import { setupDevToolsUI } from './devtools'
 import { InjectHydrationPlugin } from './plugins/hydration'
@@ -53,6 +53,14 @@ export default defineNuxtModule<ModuleOptions>({
     addPlugin(resolver.resolve('./runtime/third-party-scripts/plugin.client'))
     addServerPlugin(resolver.resolve('./runtime/third-party-scripts/nitro.plugin'))
 
+    // Imports for server side misusage detection
+    addImports([
+      { from: resolver.resolve('./runtime/composables/vue'), name: 'ref' },
+      { from: resolver.resolve('./runtime/composables/vue'), name: 'shallowRef' },
+      { from: resolver.resolve('./runtime/composables/vue'), name: 'reactive' },
+      { from: resolver.resolve('./runtime/composables/vue'), name: 'shallowReactive' },
+    ])
+
     nuxt.hook('prepare:types', ({ references }) => {
       references.push({
         types: resolver.resolve('./runtime/types.d.ts'),

src/runtime/core/composables/vue.ts

@@ -0,0 +1,19 @@
+import { ref as _ref, reactive as _reactive, shallowReactive as _shallowReactive, shallowRef as _shallowRef, getCurrentInstance } from 'vue'
+import { tryUseNuxtApp } from '#app'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function wrapWithWarning<Fn extends (...args: any[]) => any>(fn: Fn, name: string): Fn {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return function (this: unknown, ...args: any[]) {
+    const nuxtApp = tryUseNuxtApp()
+    if (!nuxtApp && !getCurrentInstance()) {
+      console.error(new Error(`[@nuxt/hints] ${name}() called outside of setup() or without Nuxt app context. This may lead to Server side memory leaks or data leaks across requests.`))
+    }
+    return fn.call(this, ...args)
+  } as Fn
+}
+
+export const ref = import.meta.server ? wrapWithWarning(_ref, 'ref') : _ref
+export const reactive = import.meta.server ? wrapWithWarning(_reactive, 'reactive') : _reactive
+export const shallowReactive = import.meta.server ? wrapWithWarning(_shallowReactive, 'shallowReactive') : _shallowReactive
+export const shallowRef = import.meta.server ? wrapWithWarning(_shallowRef, 'shallowRef') : _shallowRef