Enable Vue 3 exposeFilename: true options on webpack.mix.js

[ianrobertsFF]

Any chance we could get the official builds done with exposeFilename:true vue-loader option?

Would significantly assist with Theming as you can then just write a package similar to your old ThemingClasses one from Nova 3

Thanks!

[davidhemphill]

Totally open to doing this. I just tried it locally (running a production build with it), but I'm not seeing what it adds. It's also possible I haven't configured it in the correct place in Mix.

[ianrobertsFF]

It gives you access to [component].$options.__file which is the filename of said component.

This is useful as [component].$options.name seems to be missing in Nova 4. Not sure if that's expected behaviour under Vue 3, or if its some sort of interaction between Nova, Vue and Inertia, but as this gives you almost the same information with a little parsing it would be good enough for a package to restore the theming classes.

It sits here in your webpack.mix.js:

  .options({
    vue: { 
      compilerOptions: {
        isCustomElement: tag => tag.startsWith('trix-')
      },
      exposeFilename:true
    },
    processCssUrls: false
  })

[davidhemphill]

Ok, I did configure it correctly. Yeah, I think this is okay.

[ianrobertsFF]

Brilliant, thanks!

[ianrobertsFF]

This may still help others, but I am leaning towards a solution now that has a hackier implementation but a more robust operation:

Nova.bootingCallbacks.unshift(app => {
    app.componentProxy = app.component;
    app.component = function (name, component) {
        if (component) component.name ??= name;
        return app.componentProxy(name, component);
    }
});