ImageBoss for Vue.js

Use our official Vue integration (@imageboss/vue) to render optimized images in your Vue 3 apps. It provides IbImg, IbPicture, and IbSource components plus URL helpers for full control.

Installation

npm install @imageboss/vue
# or
yarn add @imageboss/vue
pnpm add @imageboss/vue

Setup

Configure the plugin with your ImageBoss source (from your dashboard):

// main.ts
import { createApp } from 'vue';
import ImageBossVue from '@imageboss/vue';
import App from './App.vue';

const app = createApp(App);
app.use(ImageBossVue, {
  source: 'mywebsite-images',
  defaultParams: { options: 'format:auto' }, // optional
});
app.mount('#app');

Basic example

Use IbImg for a responsive image with automatic srcset:

<template>
  <ib-img
    src="/path/to/image.jpg"
    sizes="(min-width: 800px) 50vw, 100vw"
    :width="16"
    :height="9"
    alt="Responsive image"
  />
</template>

src is the path relative to your ImageBoss source. sizes tells the browser how wide the image will be at different breakpoints. width and height are aspect-ratio hints (any proportional values).

Full documentation

More components (IbPicture, IbSource), fixed-size images, and the low-level buildUrl / buildSrcSet API are documented at vue-imageboss on GitHub.

Questions?

If you have any questions please don't hesitate, send us a message on support[at]imageboss.me or in case of any bugs or problems with your integration you're more than welcome to open an issue.