# nuxt-dynamic-images

> Dynamiclly create social media preview images with Nuxt

Latest version **0.0.1** (published 2021-01-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install nuxt-dynamic-images
pnpm add nuxt-dynamic-images
yarn add nuxt-dynamic-images
bun add nuxt-dynamic-images
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2021-01-14 |
| First published | 2021-01-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 13.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | btkostner |
| Keywords | nuxt, module, social, twitter, facebook, images, plugins |

## Links

- npm: https://www.npmjs.com/package/nuxt-dynamic-images
- Repository: https://github.com/btkostner/nuxt-dynamic-images
- Homepage: https://github.com/btkostner/nuxt-dynamic-images#readme
- Issues: https://github.com/system76/design/issues
- npm.io page: https://npm.io/package/nuxt-dynamic-images

## Dependencies (2)

- [defu](https://npm.io/package/defu.md) ^2.0.4
- [puppeteer](https://npm.io/package/puppeteer.md) ^5.5.0

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2021-01-14

## README

# nuxt-dynamic-images

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
[![semantic-release][semantic-release-src]][semantic-release-href]
[![License][license-src]][license-href]

## Features

- Generate social media images from `@nuxt/content` documents
- Design and build in any css framework you want

_NOTE_ This only works with `nuxt generate` with `ssr: true`

## Quick Setup

1. Add `nuxt-dynamic-images` dependency to your nuxt project that already uses
`@nuxt/content`.

```bash
# using yarn
yarn add nuxt-dynamic-images

# using npm
npm install nuxt-dynamic-images
```

2. Add `nuxt-dynamic-images` to the `buildModules` section of
`nuxt.config.js`

```js
{
  buildModules: [
    // Simple usage
    'nuxt-dynamic-images',

    // With options
    ['nuxt-dynamic-images', { /* module options */ }]
  ]
}
```

Or a separate section `dynamicImages` for module options:

```js
{
  buildModules: [
    // Simple usage
    'nuxt-dynamic-images',
  ],
  dynamicImages: {
    /* module options */
  }
}
```

## Options

`nuxt-dynamic-images` has the following configuration options:

- `fields: Array<string>` A list of all the fields `nuxt-dynamic-images`
will generate from in the `@nuxt/content` folder. By default this is
`['twitterImage', 'facebookImage']`.

- `elSelector: string` The DOM selector `puppeteer` will screenshot. By default
this is `#image`.

- `publicPath: string` The public path _inside_ the nuxt public path where
images will be saved. By default this is `/images` so generated images
(by default) will have a url like `/_nuxt/images/post-twitterImage.png`.

- `puppeteerOptions?: any` Raw options to give to `puppeteer.launch()`. By
default this is an empty object.

## Usage

For a complete usage example, see the `example/` directory. But here is a short
run down with the default configuration:

1) Create some `@nuxt/content` files with image fields:

```yaml
---

title: Example Blog Post!

facebookImage: /_public/social
twitterImage: /_public/social

---

Here is an example `@nuxt/content` document with a generated social media
images!
```

2) Create a page at `/_public/social`:

```vue
<template>
  <div :class="${field}" id="image">
    <h1>{{ post.title }}</h1>
    <h2>{{ post.createdAt }}</h2>
  </div>
</template>

<script>
export default {
  async asyncData ({ $content, ssrContext }) {
    const { contentPath, contentField } = ssrContext
    const post = await $content(contentPath).fetch()

    return { post, field: contentField }
  }
}
</script>

<style scoped>
  .facebookImage {
    height: 628px;
    width: 1200px;
  }

  .twitterImage {
    height: 335px;
    width: 600px;
  }
</style>
```

## TODO

Follow the [GitHub issues](https://github.com/btkostner/nuxt-dynamic-images)
for a more up to date status, but here is a general list of next steps:

- Setup caching
- Get some working setup when using `nuxt dev`
- A better DX setup so you can view the images while designing them (no longer
use `ssrContext`)
- Documentation site
- Try to figure out a more sane default configuration
- Tests

## Development

1. Clone this repository
2. Install dependencies using `yarn install` or `npm install`
3. Start hacking away!

## License

[MIT License](./LICENSE)

Copyright (c)

Maintained by [Blake Kostner](https://github.com/btkostner)

<!-- Badges -->
[npm-version-src]: https://img.shields.io/npm/v/nuxt-dynamic-images/latest.svg
[npm-version-href]: https://npmjs.com/package/nuxt-dynamic-images

[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-dynamic-images
[npm-downloads-href]: https://npmjs.com/package/nuxt-dynamic-images

[github-actions-ci-src]: https://github.com/btkostner/nuxt-dynamic-images/workflows/CI/badge.svg
[github-actions-ci-href]: https://github.com/btkostner/nuxt-dynamic-images/actions?query=workflow%3ACI

[semantic-release-src]: https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg
[semantic-release-href]: https://github.com/semantic-release/semantic-release

[license-src]: https://img.shields.io/npm/l/nuxt-dynamic-images.svg
[license-href]: https://npmjs.com/package/nuxt-dynamic-images

---
_Source: https://npm.io/package/nuxt-dynamic-images · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._