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

# Nuxt.js with Redis

> This tutorial shows how to use Upstash inside your NuxtJS application.

This tutorial uses Redis as state store for a Nuxt.js application. We simply
increment a counter that pulls the data from Redis.

See [code](https://github.com/upstash/examples/tree/master/examples/nuxt-with-redis) and
[demo](https://nuxt-with-redis.vercel.app)

### `1` Create Nuxt.js Project

Run this in terminal

```bash
yarn create nuxt-app nuxtjs-with-redis
```

### `2` Set up environment variables

Copy the `.env.example` file in this directory to `.env`

```bash
cp .env.local.example .env.local
```

* `REDIS_URL`: Copy the url in the database page of the Upstash console

<Snippet file="redis/ioredisnote.mdx" />

### `3` Server Middleware

We will write a Nuxt middleware which increments a counter in Redis and returns
its new value.

```javascript title="api/count.js"
import Redis from "ioredis";

export default async function (req, res) {
  const redis = new Redis(process.env.REDIS_URL);
  const count = await redis.incr("counter");
  redis.quit();

  res.setHeader("Content-Type", "application/json");
  res.write(JSON.stringify({ count }));
  res.end();
}
```

Now we will configure the middleware in nuxt.config.js

```javascript {4} title="nuxt.config.js"
export default {
  head: { title: "nuxt-with-redis" },
  buildModules: ["@nuxtjs/tailwindcss"],
  serverMiddleware: [{ path: "/api/count", handler: "~/api/count.js" }],
};
```

### `4` Run

```bash
yarn dev
```

Go to [http://localhost:3000/](http://localhost:3000)

### Notes:

* For best performance the application should run in the same region with the
  Redis database's region.