# withCroct

Enable dynamic content for Storyblok.

This function connects the Storyblok SDK to Croct to enable automatic dynamic content for personalization and AB testing. It is the entry point for the JavaScript family of SDKs.

It intercepts Storyblok API calls and replaces content that references slots with dynamic content. In the Storyblok visual editor, dynamic content is automatically bypassed so editors always see the original content.

## Signature \[#signature]

**JavaScript**

```ts
function withCroct(options: SbSDKOptions): SbSDKOptions
```

**React**

```ts
function withCroct(options: SbSDKOptions): SbSDKOptions
```

**Next**

```ts
function withCroct(options: SbSDKOptions): SbSDKOptions
```

**Vue**

```ts
function withCroct(options: SbVueSDKOptions): Plugin
```

**Nuxt**

```ts
function withCroct(nuxtApp: NuxtApp, api: StoryblokClient): void
```

## Example

**JavaScript**

```js
import {storyblokInit, apiPlugin} from '@storyblok/js';
import {withCroct} from '@croct/plug-storyblok/js';

storyblokInit(withCroct({
  accessToken: 'YOUR_ACCESS_TOKEN',
  use: [apiPlugin],
  components: {},
}));
```

**React**

```js
import {storyblokInit, apiPlugin} from '@storyblok/react';
import {withCroct} from '@croct/plug-storyblok/react';

storyblokInit(withCroct({
  accessToken: 'YOUR_ACCESS_TOKEN',
  use: [apiPlugin],
  components: {},
}));
```

**Next**

```js
import {storyblokInit, apiPlugin} from '@storyblok/react/rsc';
import {withCroct} from '@croct/plug-storyblok/next';

storyblokInit(withCroct({
  accessToken: 'YOUR_ACCESS_TOKEN',
  use: [apiPlugin],
  components: {},
}));
```

**Vue**

```js
import {apiPlugin} from '@storyblok/vue';
import {withCroct} from '@croct/plug-storyblok/vue';

app.use(withCroct({
  accessToken: 'YOUR_ACCESS_TOKEN',
  use: [apiPlugin],
}));
```

**Nuxt**

**nuxt.config.ts**

```ts
export default defineNuxtConfig({
  modules: [
    ['@storyblok/nuxt', {
      accessToken: 'YOUR_ACCESS_TOKEN',
    }],
    '@croct/plug-nuxt',
  ],
})
```

**plugins/croct-storyblok.ts**

```ts
import {withCroct} from '@croct/plug-storyblok/nuxt';
import {useStoryblokApi} from '@storyblok/vue';
import {defineNuxtPlugin} from '#app';

export default defineNuxtPlugin(nuxtApp => {
  withCroct(nuxtApp, useStoryblokApi());
})
```

## Platform imports

The following table lists the import path for each supported platform:

| Platform   | Import path                   |
| ---------- | ----------------------------- |
| JavaScript | `@croct/plug-storyblok/js`    |
| React      | `@croct/plug-storyblok/react` |
| Next.js    | `@croct/plug-storyblok/next`  |
| Vue        | `@croct/plug-storyblok/vue`   |
| Nuxt       | `@croct/plug-storyblok/nuxt`  |