Estoy tratando de crear un método que se pueda usar dentro de cualquier plantilla para crear automáticamente direcciones URL de imágenes locales.

El problema al que me enfrento es que cuando intento crear un complemento que agrega una propiedad global, ¡no funciona!

Código del complemento

 // src/plugins/urlbuilder.js export default { install: (app) => { app.config.globalProperties.buildImageUrl = imageName => require('@/assets/images/' + imageName); } }

Archivo principal.js

 // src/main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import urlbuilder from './plugins/urlbuilder.js' createApp(App).use(router).use(urlbuilder).mount('#app')

Vista de inicio donde renderizo la imagen

 // src/views/Home.vue <template> <img :src="buildImageUrl('myimage.jpg')"> </template>

y recibo este error en mi consola de desarrollo:

 Uncaught (in promise) TypeError: _ctx.buildImageUrl is not a function at Proxy.render (cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader-v16/dist/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader-v16/dist/index.js?!./src/views/Home.vue?vue&type=template&id=fae5bece&scoped=true:57) at renderComponentRoot (runtime-core.esm-bundler.js:922) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4667) at ReactiveEffect.run (reactivity.esm-bundler.js:195) at setupRenderEffect (runtime-core.esm-bundler.js:4793) at mountComponent (runtime-core.esm-bundler.js:4576) at processComponent (runtime-core.esm-bundler.js:4534) at patch (runtime-core.esm-bundler.js:4138) at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:4744) at ReactiveEffect.run (reactivity.esm-bundler.js:195)

Nota: Esto funciona cuando agrego una propiedad puramente global, pero leí que la mejor manera de hacerlo era a través de un complemento.

Funciona cuando hago esto:

 app = createApp(App) app.config.globalProperties.buildImageUrl = imageName => require('@/assets/images/' + imageName) app.use(router).mount('#app')

¿Qué estoy haciendo mal?