Vue image component

The @responsive-image/vue package provides a native Vue.js image component to render responsive images.

Installation

In your application's directory:

npm

npm install @responsive-image/vue

yarn

yarn add @responsive-image/vue

pnpm

pnpm add @responsive-image/vue

Image component

The addon provides a <ResponsiveImage> component for rendering the set of images, taking local images or remote images as the src prop. Please refer to the main image component guide for all details and supported arguments!

Usage as a Vue plugin

While importing the image component wherever you need it is recommended (e.g. for tree-shaking), you can also install the package as a Vue plugin to register the component globally as <ResponsiveImage>:

import { createApp } from 'vue';
import ResponsiveImagePlugin from '@responsive-image/vue';

const app = createApp({});

app.use(ResponsiveImagePlugin);

Local images

To process local images you will need to setup one of the build plugins depending on your app's setup.

Nuxt

If your app is built with Nuxt, add the Vite plugin to your nuxt.config.ts:

import { setupPlugins } from '@responsive-image/vite-plugin';

export default defineNuxtConfig({
  // ...
  vite: {
    plugins: [
      setupPlugins({
        include: /^[^?]+\.jpg\?.*responsive.*$/,
      }),
    ],
  },
});

IMPORTANT

For more information on how to configure @responsive-image/vite-plugin and setupPlugins() refer to the Vite plugin documentation.

Remote images

The @responsibe-image/cdn package provides multiple helper functions to support remote images served from different image CDNs for use with the <responsive-image/> component.

Please refer to the image CDN guide for details on all supported options and examples of the respective image CDN.