> ## Documentation Index
> Fetch the complete documentation index at: https://injectivelabs-docs-ai-sdk.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Configuring Nuxt

## Nuxt3 - The Intuitive Web Framework

The preferred choice of UI framework to build decentralized applications on top of Injective at @InjectiveLabs is Nuxt3. We are going to help you configure Nuxt3 + the Vite builder with the `@injectivelabs` packages and some polyfills since you'll need them to interact with Crypto wallets.

### 1. Installing Nuxt 3

Follow the Getting Started guide at [Nuxt3 Docs](https://nuxt.com/docs/getting-started/installation) and setup your application.

### 2. Installing @injectivelabs packages

You can install the @injectivelabs packages using yarn.

```bash theme={null}
$ yarn add @injectivelabs/sdk-ts @injectivelabs/networks @injectivelabs/ts-types @injectivelabs/utils

## If you need Wallet Connection
$ yarn add @injectivelabs/wallet-strategy
```

These are the most commonly used packages from the `injective-ts` monorepo.

### 3. Configuring Nuxt and adding polyfills

First, add the needed polyfill packages

```bash theme={null}
$ yarn add @bangjelkoski/node-stdlib-browser
$ yarn add -D @bangjelkoski/vite-plugin-node-polyfills
```

Make sure you are using the `vue-tsc@1.8.8` , `nuxt@^3.8.1`, `typescript@^5.0.4` versions.

**Buffer**

One of the main dependencies for any crypto-related decentralized application is Buffer. To make sure we add Buffer to our project, we can install it as a dependency and then make a Nuxt plugin to import it to the global/window object:

```bash theme={null}
$ yarn add buffer
```

```ts theme={null}
// filename - plugins/buffer.client.ts
export default defineNuxtPlugin(() => {
  import('buffer/').then((Buffer) => {
    window.Buffer = window.Buffer || Buffer.default.Buffer
    globalThis.Buffer = window.Buffer || Buffer.default.Buffer
  })
})
```

### 4. Using a state management

If you are going to use `pinia` as state management, add it to your packages:

```bash theme={null}
$ yarn add @pinia/nuxt@^0.4.9
```

### 5. Using `vueuse`

We recommend adding `@vueuse/nuxt` as a dependency as it offers a lot of utility functions out of the box.

Then, we need to configure the `tsconfig.json` if you are using TypeScript (recommended). You can reference the following `tsconfig.json` as a base.

```json theme={null}
{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "module": "NodeNext",
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "types": ["@vueuse/nuxt", "@pinia/nuxt"]
  },
  "exclude": ["node_modules", "dist", ".output"]
}
```

### 6. nuxt.config.ts / packages.json

Before we boot our application, we need to set everything up in the `nuxt.config.ts`, the main configuration point for every Nuxt 3 application. Let's see a reference `nuxt.config.ts` and explain every line using comments so it's easier for developers to understand.

```ts theme={null}
// filename - nuxt.config.ts
import tsconfigPaths from 'vite-tsconfig-paths'
import { nodePolyfills } from '@bangjelkoski/vite-plugin-node-polyfills'

export default defineNuxtConfig({
  ssr: false, // whether to pre-render your application
  modules: [
    // nuxtjs modules
    '@pinia/nuxt',
    '@vueuse/nuxt',
  ],

  typescript: {
    typeCheck: 'build', // we recommend build so you do typescript checks only on build type
  },

  imports: {
    // automatic imports of store definitions (if you use pinia)
    dirs: ['store/**'],
  },

  pinia: {
    // import pinia definitions
    autoImports: ['defineStore'],
  },

  plugins: [
    {
      // import the buffer plugin we've made
      src: './plugins/buffer.client.ts',
      ssr: false,
    },
  ],

  // We generate only sitemaps for the client side as we don't need a server
  // Note: there is a problem with sitemaps for Vite + Nuxt3
  // as usual is that it takes too much time/memory to generate
  // sitemaps and the build process can fail
  // on Github Actions/Netlify/Vercel/etc so we have to use another
  // strategy like generating them locally and pushing them to services like
  // busgnag
  sourcemap: {
    server: false,
    client: true,
  },

  // Vite related config
  vite: {
    plugins: [
      // setting up node + crypto polyfils + vite TS path resolution
      tsconfigPaths(),
      nodePolyfills({ protocolImports: false }),
    ],

    build: {
      sourcemap: false, // we don't generate

      // default rollup options
      rollupOptions: {
        cache: false,
        output: {
          manualChunks: (id: string) => {
            //
          },
        },
      },
    },

    // needed for some Vite related issue for the
    // @bangjelkoski/vite-plugin-node-polyfills plugin
    optimizeDeps: {
      exclude: ['fsevents'],
    },
  },
})
```

There is one optimization that you can to decrease the bundle size - add these resolutions in the `packages.json`

```
"resolutions": {
  "@ethereumjs/tx": "^4.1.1",
  "**/libsodium": "npm:@bangjelkoski/noop",
  "**/libsodium-wrappers": "npm:@bangjelkoski/noop"
}
```

### 7. Booting our app

Finally, you can start your app locally using `yarn dev` or generate static pages using `yarn generate` which you can deploy to any static page hosting like Netlify, Vercel, etc.