# Vue Integration

Use the NPM package and initialize Elements in `onMounted`.

## Install

```bash
npm install @liquidcommerce/elements-sdk
```

## Vue 3 (Single File Component)

```vue
<template>
  <div id="product"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import { Elements } from '@liquidcommerce/elements-sdk';

onMounted(async () => {
  const client = await Elements('YOUR_API_KEY', { env: 'production' });
  await client.injectProductElement([
    { containerId: 'product', identifier: '00619947000020' }
  ]);
});
</script>
```

## Nuxt 3

The SDK is SSR-safe out of the box. When Nuxt evaluates the import on the server, a lightweight stub is resolved automatically — no `<ClientOnly>`, `process.client` checks, or dynamic imports required.

```vue
<template>
  <div id="product"></div>
</template>

<script setup>
import { onMounted } from 'vue';
import { Elements } from '@liquidcommerce/elements-sdk';

onMounted(async () => {
  const client = await Elements('YOUR_API_KEY', { env: 'production' });
  await client.injectProductElement([
    { containerId: 'product', identifier: '00619947000020' }
  ]);
});
</script>
```

During SSR, `Elements()` returns `null` and logs a warning. All types and enums remain available for TypeScript.

## Related Docs

- [Product Component](../guides/product-component.md)
- [Client API](../api/client.md)