Configure Vue loader and lazysizes to transform urls with Nuxt

Version

15.9.3

Reproduction link

https://codesandbox.io/s/hardcore-perlman-09fh0?file=/pages/index.vue

Steps to reproduce

I'm trying to configure lazysizes with Nuxt and my urls are not handled by Webpack so I get a 404 error. I get the path src="~/assets/image.png" instead of src="/_nuxt/assets/image.png". I added lazysizes as an npm package and the following to my nuxt.config.js file.

   /*
   ** Plugins to load before mounting the App
   */
  plugins: [
    '~/plugins/lazysizes.client.ts',
  ],
  /*
   ** Build configuration
   */
  build: {
    extend(_config, { isClient, loaders: { vue } }) {
      // Extend only webpack config for client-bundle
      if (isClient) {
        vue.transformAssetUrls.img = ['src', 'data-src']
        vue.transformAssetUrls.source = ['data-srcset', 'srcset']
      }
    },
  },

And this content to the plugins/lazysizes.client.ts

import lazySizes from 'lazysizes'
export default lazySizes

My image is loaded like so.

<img
  class="lazyload"
  data-src="~/assets/image.png"
  alt="Image description"
/>

I worked off of this article https://dev.to/ignore_you/minify-generate-webp-and-lazyload-images-in-your-vue-nuxt-application-1ilm.

What is expected?

I would expected my image URL to be handled by webpack and to serve the image under a proper path.

What is actually happening?

The image path that is use for my image is "~/assets/image.png" instead of "/_nuxt/assets/image.png".

vuejs / vue-loader