Neutrino Packing Machine

    nuxt-responsive-loader

    2.0.1 • Public • Published

    Nuxt Responsive Loader

    Process images during the build step in your Nuxt.js app 📸

    npm (scoped with tag) npm

    Features

    • Compress images during the build step to reduce file size and improve website performance
    • Generate responsive srcsets for your Nuxt.js projects
    • Re-size images, convert format, rename and generate placeholders
    • Enabled for JPG, PNG and WebP
    • Uses responsive-loader
    • Compatible with Sharp for fast image processing ⚡
    • Fully configurable

    Setup

    • Add the module to your project:
    npm install nuxt-responsive-loader
    // OR
    yarn add nuxt-responsive-loader
    • Add nuxt-responsive-loader to the modules section of nuxt.config.js:
    // file: nuxt.config.js
     
    export default {
      // ...
      modules: ['nuxt-responsive-loader']
    }
    • Add your images to the assets directory

    Examples

    Generating srcsets (default)

    • Add srcsets to your img elements in your templates like so:
    <template>
      <img :srcset="require('~/assets/nuxt.jpg').srcSet" />
    </template>
    • During the project's build step your image will be converted into ~5 different images of varying size, each of which will be named with a unique hash and each of which will be compressed to reduce filesize (fully configurable):
    ├── _nuxt
        ├── img
            ├── 2b88a85-640.jpg
            ├── 1fff45c-750.jpg
            ├── 6717911-860.jpg
            ├── f9f19bf-970.jpg
            └── c0ceb80-1080.jpg
    
    • Your Nuxt template will produce the following img element in your built HTML file:
    <img
      srcset="
        /_nuxt/img/2b88a85-640.jpg   640w,
        /_nuxt/img/1fff45c-750.jpg   750w,
        /_nuxt/img/6717911-860.jpg   860w,
        /_nuxt/img/f9f19bf-970.jpg   970w,
        /_nuxt/img/c0ceb80-1080.jpg 1080w
      "
    />

    Compress source images to improve your website's performance:

    The following examples each require a different custom configuration of the responsive loader module:

    // file: nuxt.config.js
     
    export default {
      // ...
      // Specify your options as a responsiveLoader object
      responsiveLoader: {
        name: 'img/[hash:7]-[width].[ext]',
        quality: 65 // choose a lower value if you want to reduce filesize further
      }
    }
    <!-- file: index.vue -->
    <template>
      <img :src="require('~/assets/nuxt.jpg').src" />
    </template>

    Generate placeholders for usage with the blur-up technique:

    // file: nuxt.config.js
     
    export default {
      // ...
      // Specify your options as a responsiveLoader object
      responsiveLoader: {
        name: 'img/[hash:7]-[width].[ext]',
        placeholder: true
      }
    }
    <!-- file: index.vue -->
    <template>
      <img :src="require('~/assets/nuxt.jpg').placeholder" data-src="..." />
    </template>

    Convert image files to .png:

    // file: nuxt.config.js
     
    export default {
      // ...
      // Specify your options as a responsiveLoader object
      responsiveLoader: {
        name: 'img/[hash:7]-[width].[ext]',
        format: 'png'
      }
    }

    Configuration

    The plugin will work out of the box and will use these settings:

    {
      name: 'img/[hash:7]-[width].[ext]'
      min: 640 // minimum image width generated
      max: 1080 // maximum image width generated
      steps: 5 // five sizes per image will be generated
      placeholder: false // no placeholder will be generated
      quality: 65 // images are compressed with medium quality
    }

    If you want to configure the underlying loader, you can do that as well. (All options available here)

    // file: nuxt.config.js
     
    export default {
      // ...
      // Specify your options as a responsiveLoader object
      responsiveLoader: {
        name: 'img/hello-world-[width].[ext]',
        sizes: [200, 500],
        format: 'png',
        adapter: require('responsive-loader/sharp'),
        placeholder: true
      }
    }

    Tips

    • This module is not compatible with other Nuxt image processing modules.
    • This module will throw an error if the default image loader webpack rule for Nuxt has been edited in your project. To resolve this try removing other Nuxt image processing modules.

    Development

    • Clone this repository
    • Install dependencies using yarn install or npm install
    • Start development server using npm run dev

    Bugs

    • Please file an issue. Thanks.

    Credit

    License

    MIT

    📖 Release Notes

    Install

    npm i nuxt-responsive-loader

    DownloadsWeekly Downloads

    895

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    9.98 kB

    Total Files

    5

    Last publish

    Collaborators

    • geeogi