@pixelstackai/nuxt

The Nuxt module for Pixelstack: render your designs with a <PixelstackImage> component, with signed URLs built on the server.

Install

npm install @pixelstackai/nuxt

export default defineNuxtConfig({
  modules: ['@pixelstackai/nuxt'],
  pixelstack: {
    teamId: 'your-team-id',
    signingSecret: process.env.PIXELSTACK_SIGNING_SECRET,
  },
});

Find your team ID and signing secret in Team settings in the Pixelstack app. You only need the signing secret if your designs require signed URLs. It's kept in the server's runtime config, so it never reaches the browser.

Usage

<template>
  <PixelstackImage
    src="my-design"
    alt="Welcome banner"
    :data="{ title: { text: 'Hello World' } }"
    :variables="{ 'profile-url': 'https://example.com/ada' }"
  />
</template>

src is the design's ID, data sets values on its objects, by object ID and property, and variables sets the variables of its workflow, by variable ID. Other attributes are passed to the <img>.

usePixelstackImage and getPixelstackImageUrl take data and variables too.

For the URL alone, use the usePixelstackImage composable, for example for an Open Graph image:

const { data: image } = usePixelstackImage({
  designId: 'my-design',
  data: { title: { text: 'Hello World' } },
});

useSeoMeta({ ogImage: () => image.value?.url });

Signed URLs

Your signing secret only exists on the server, so URLs are only signed when they're built there.

<PixelstackImage> and usePixelstackImage build the URL on the server when the page is server-rendered or prerendered, so it's signed. When a visitor navigates to the page from another page of your app, the URL is built in the browser, so it isn't signed. That's fine for Open Graph images, which crawlers read from the server-rendered page, and for designs that don't require signed URLs.

For signed URLs on every navigation, build them in your server routes with getPixelstackImageUrl. It's auto-imported in your server/ directory:

// server/api/posts/[id].get.ts
export default defineEventHandler(async (event) => {
  const post = await getPost(getRouterParam(event, 'id'));

  return {
    ...post,
    bannerUrl: getPixelstackImageUrl('my-design', { data: { title: { text: post.title } } }),
  };
});

<script setup lang="ts">
const route = useRoute();
const { data: post } = await useFetch(`/api/posts/${route.params.id}`);
</script>

<template>
  <img :src="post?.bannerUrl" alt="Banner" />
</template>

Keep getPixelstackImageUrl behind routes that decide the data themselves. A route that signs whatever the browser sends would let anyone sign any image.

Documentation

See docs.pixelstack.io.

License

MIT