Nuxt全局Mixin方法在img的:src属性中调用报错问题

It sounds like you're running into a quirky edge case with global mixins in Nuxt—let's break down what's happening and how to fix it.

First, a quick cleanup of your plugin code: I notice you’re calling Vue.use(plugin) inside the plugin file itself, which is redundant. Nuxt automatically handles calling Vue.use() when you register the plugin in nuxt.config.js, so that line can be removed. While this might not be the root cause, it’s a good step to avoid unexpected behavior.

Now, let’s tackle the core issue: why does the method work in @click events but throw an error when used in :src bindings? The solution depends on which version of Nuxt you’re using:

If you’re using Nuxt 2: #

The mixin approach should work in theory, but subtle context issues can sometimes crop up in template bindings like :src. A more reliable way to make the method globally available is to attach it directly to the Vue prototype instead of using a mixin. Here’s how to adjust your plugin:

// plugins/global-method.js
const plugin = {};
plugin.install = function (Vue) {
  Vue.prototype.$globalMethod = function(path) {
    return `//${path}`;
  };
};
export default plugin;

Then, in your template, use the $ prefix to access the method:

<img :src="$globalMethod(image.path)" />

This ensures the method is attached to every component instance, so it’ll be accessible no matter where you call it in the template.

If you’re using Nuxt 3: #

Your current plugin code uses Vue 2’s API, which won’t work correctly in Nuxt 3 (which uses Vue 3 under the hood). You need to rewrite the plugin using Nuxt 3’s official plugin API:

// plugins/global-method.js
export default defineNuxtPlugin(nuxtApp => {
  // Option 1: Use a global mixin (Vue 3-style)
  nuxtApp.vueApp.mixin({
    methods: {
      globalMethod(path) {
        return `//${path}`;
      }
    }
  });

  // Option 2: Attach to app context (recommended for Nuxt 3)
  nuxtApp.provide('globalMethod', (path) => {
    return `//${path}`;
  });
});

If you go with Option 2 (providing via app context), access it in your template with the $ prefix:

<img :src="$globalMethod(image.path)" />

Why does this fix the issue? In Nuxt 3, the old Vue 2 plugin pattern doesn’t properly inject mixins into all rendering contexts, which can lead to this being undefined when accessing the method in bindings like :src. Using the Nuxt 3 API ensures the method is available everywhere.

Don’t forget to confirm your plugin is registered in nuxt.config.js:

• For Nuxt 2: Add it to the plugins array:

  export default {
    plugins: ['~/plugins/global-method.js']
  };
  

• For Nuxt 3: Plugins in the plugins/ directory are auto-registered by default, but you can explicitly list them if needed:

  export default defineNuxtConfig({
    plugins: ['~/plugins/global-method.js']
  });
  

Since you confirmed via Vue DevTools that the method exists on the component, the root cause is likely either outdated plugin code (for Nuxt 3) or a subtle context issue that using the prototype/app context avoids.

内容的提问来源于stack exchange，提问作者Babaikawow