Vue / Nuxt SDK

Official Vue components for imgfast image optimization.

download

Installation

npm install @imgfast/vue

# or with yarn
yarn add @imgfast/vue

# or with pnpm
pnpm add @imgfast/vue

code

Basic Usage

Plugin Setup

main.ts

import { createApp } from 'vue';
import { ImgfastPlugin } from '@imgfast/vue';
import App from './App.vue';

const app = createApp(App);

app.use(ImgfastPlugin, {
  publicKey: 'imgfast_pk_YOUR_PUBLIC_KEY',
  cdnUrl: 'https://cdn.imgfast.io',
});

app.mount('#app');

Component Usage

ProductCard.vue

<template>
  <imgfast-image
    src="products/sneaker-01.jpg"
    alt="Product image"
    :width="400"
    :height="300"
    :quality="80"
    format="auto"
  />
</template>

<script setup lang="ts">
// Component is globally registered via plugin
</script>

bolt

Nuxt Integration

Module Setup

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@imgfast/nuxt'],

  imgfast: {
    publicKey: process.env.IMGFAST_PUBLIC_KEY,
    cdnUrl: 'https://cdn.imgfast.io',
  },
});

Composable

<script setup lang="ts">
const { buildUrl } = useImgfast();

const imageUrl = buildUrl('products/sneaker-01.jpg', {
  width: 400,
  height: 300,
  format: 'webp',
});
</script>

<template>
  <img :src="imageUrl" alt="Product" />
</template>