# JavaScript

Learn how to manually set up the Storyblok integration in a JavaScript project.

The following guide gives you a step-by-step overview of how to install and set up the Storyblok integration in your JavaScript project.

> **Speed up your integration!**
>
> The CLI can fully automate the integration process for you. Check out the [integration guide](../integration) to get started faster.

## Install the Croct SDK \[#prerequisites]

Install and configure the [SDK](/reference/sdk) that corresponds to your project's framework. The Storyblok integration acts as a bridge between the SDK and Storyblok, so it needs the SDK to be set up first.

## Install the Storyblok integration \[#install]

Run the following command to install the integration:

**Command to install the integration**

**npm**

```sh
npm install @croct/plug-storyblok
```

**pnpm**

```sh
pnpm add @croct/plug-storyblok
```

**Yarn**

```sh
yarn add @croct/plug-storyblok
```

**Bun**

```sh
bun add @croct/plug-storyblok
```

## Enable dynamic content \[#enable-dynamic-content]

Connect the Storyblok SDK to Croct to enable personalization and AB testing features.

Choose the tab that matches the [SDK](/reference/sdk) you are using:

**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 {createApp} from 'vue';
import {createCroct} from '@croct/plug-vue';
import {apiPlugin} from '@storyblok/vue';
import {withCroct} from '@croct/plug-storyblok/vue';
import App from './App.vue';

const app = createApp(App);

app.use(createCroct({appId: 'YOUR_APP_ID'}));

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

app.mount('#app');
```

**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());
})
```

## Explore

- [CLI](../integration): Learn how to use our CLI to get started faster.
- [Storyblok SDK](https://github.com/croct-tech/plug-storyblok-js): Explore and contribute to the integration development on GitHub.