Skip to content

Configure Vue loader and lazysizes to transform urls with Nuxt

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/img.png" instead of src="/_nuxt/assets/img.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: [
   ** Build configuration
  build: {
    extend(_config, { isClient, loaders: { vue } }) {
      // Extend only webpack config for client-bundle
      if (isClient) {
        vue.transformAssetUrls.img = ['src', 'data-src']

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

import lazySizes from 'lazysizes'
export default lazySizes

For minimal reproduction, I just use a very simple image like so.

  alt="Image description"

I worked off of this article


Found out the answer! If anyone comes here, for future reference, I solved it reading this article

As I run SSR using yarn generate, I need the asset url transform to happen on the server too; the isClient check is removed.

After removing the isClient check for SSR, I got it to work!