# @teamnovu/vue-cloudinary-image-statamic

> Statamic Adapter for @teamnovu/vue-cloudinary-image and @teamnovu/nuxt-cloudinary-image

Latest version **1.1.0** (published 2025-10-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install @teamnovu/vue-cloudinary-image-statamic
pnpm add @teamnovu/vue-cloudinary-image-statamic
yarn add @teamnovu/vue-cloudinary-image-statamic
bun add @teamnovu/vue-cloudinary-image-statamic
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2025-10-31 |
| First published | 2021-08-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 38.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | strebl, kylewalow, timothyzemp, ebernhaut |

## Links

- npm: https://www.npmjs.com/package/@teamnovu/vue-cloudinary-image-statamic
- Repository: https://github.com/teamnovu/vue-cloudinary-image-statamic
- Homepage: https://github.com/teamnovu/vue-cloudinary-image-statamic#readme
- Issues: https://github.com/teamnovu/vue-cloudinary-image-statamic/issues
- npm.io page: https://npm.io/package/@teamnovu/vue-cloudinary-image-statamic

## Recent versions

- 1.1.0 (latest) — 2025-10-31
- 1.0.6 — 2025-09-30
- 1.0.3 — 2024-05-24
- 1.0.2 — 2023-06-08
- 1.0.0 — 2023-01-04
- 0.1.1 — 2022-06-09
- 0.1.0 — 2022-03-23
- 0.0.6 — 2021-10-24
- 0.0.5 — 2021-09-12
- 0.0.4 — 2021-09-11
- 0.0.3 — 2021-08-05
- 0.0.2 — 2021-08-05
- 0.0.1 — 2021-08-05

## README

# Vue-Cloudinary-Image-Statamic

Statamic adapter for [@teamnovu/nuxt-cloudinary-image](https://github.com/teamnovu/nuxt-cloudinary-image) and [@teamnovu/vue-cloudinary-image](https://github.com/teamnovu/vue-cloudinary-image).

## Features
✅ Handles Statamic Image Assets  
✅ Automatically applies `alt` attribute for the current locale *
✅ Automatically applies Statamic focal point

* For the i18n support, `alt_{langcode}` fields are assumed on asset blueprint and data. It will fallback to `alt` if not available.

## Prerequisites

Install and configure either [@teamnovu/nuxt-cloudinary-image](https://github.com/teamnovu/nuxt-cloudinary-image) or [@teamnovu/vue-cloudinary-image](https://github.com/teamnovu/vue-cloudinary-image) first. Visit these projects for instructions.

Make sure the asset includes `width`, `height`, `focus` and the different `alt_{langcode}` data. 

Example Statamic `CustomAsset`: 
```php
<?php

namespace App\Entries;

use Statamic\Assets\Asset;

class CustomAsset extends Asset
{
    protected function shallowAugmentedArrayKeys()
    {
        return ['id', 'url', 'permalink', 'api_url', 'extension', 'is_image', 'focus', 'width', 'height', 'alt_de', 'alt_fr'];
    }
}
```

Example Statamic GraphQL fragment:
```graphql
  fragment AssetImage on AssetInterface {
    id
    url
    permalink
    extension
    is_image
    focus_css
    width
    height
    ... on Asset_Assets {
      alt_de
      alt_fr
    }
  }
```

## Installation

```shell
yarn add @teamnovu/vue-cloudinary-image-statamic
```
or
```shell
npm i @teamnovu/vue-cloudinary-image-statamic
```

For vue2 use a version < v1.0.0

## Setup

### Global
```javascript
import AppImage from '@teamnovu/vue-cloudinary-image-statamic'

Vue.use(AppImage);
```

### Local
```html
<script>
import AppImage from '@teamnovu/vue-cloudinary-image-statamic'

export default {
  components: {
    AppImage,
  }
}
<script>
```

## Usage

```html
<!-- just provide the statamic asset object as parameter -->
<AppImage :src="data.image" />
```

The component uses the data

## Example

### Minimal example
```html
<!-- just provide the statamic asset object as parameter -->
<AppImage :src="data.image" />
```

### Simple Avatar Crop
```html
<AppImage
  :src="data.image"
  :aspect-ratio="1"
  crop="thumb"
  focus="face"
/>
```

### Overwrite alt attribute
```html
<AppImage
  :src="data.image"
  alt="this is used instead of the asset alt attribute"
/>
```

---
_Source: https://npm.io/package/@teamnovu/vue-cloudinary-image-statamic · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._