---
title: "Nuxt.js"
description: "Build static sites effortlessly with Nuxt.js and Cloud CMS. Explore modules, examples, and setup guides for seamless integration. (Gitana 4.0)"
product: "Gitana"
version: "4.0"
url: "/documentation/gitana/4.0/developers/frameworks/nuxtjs"
---

# Nuxt.js

Generate static sites with Cloud CMS

![nuxtjs.png](/documentation/gitana/4.0/developers/frameworks/nuxtjs/nuxtjs.png)

Building a static site with Cloud CMS content is simple with Nuxt JS. Below you will find tools and examples for how to get started.

## Cloud CMS Nuxt JS Module

We provide a [Cloud CMS Nuxt Module](https://github.com/gitana/cloudcms-nuxt "Cloud CMS Nuxt Module") to make accessing content while generating Nuxt pages easier. It provides a quick way to set up connections to cloudcms and perform API functions via our [Javascript driver](/documentation/gitana/4.0/developers/drivers/javascript.md), and automatically create static links to your attachments. To install, just run:

```
npm install -S cloudcms-nuxt
```

You can use this module in the asyncData hook to load your content from the CMS:

```
async asyncData(context) {
let node = await context.$branch.readNode("myNodeId");
// more awesome content functions
}
```

## API Keys

Every mobile app or web site that you build will need to have a set of API Keys that it will use to connect to your Cloud CMS platform on behalf of your code. These API keys consist of client and user key/secret pairs.

1.  Log in to your Cloud CMS tenant at https://<yourdomain>.cloudcms.net
2.  From Manage Platform -> API Keys

You will now see your API Keys for all of your platform's Application instances.

You can create as many Application instances as you'd like and each will have their own set of API Keys.

Download the `gitana.json` file, as you will need this to provide authentication for the example applications.

For more information, visit [Configuring your API Keys](/documentation/gitana/4.0/developers/apikeys.md).

## Bookstore Example Site

The example site is a simple bookstore website, built using the Cloud CMS Sample Project and using Nuxt.js as a generator. It is intended for Nuxt developers to get a general sense of how Cloud CMS content might be used in their application, but is not intended for production use.

To set up the sample project:

1.  Log in to your Cloud CMS tenant at https://<yourdomain>.cloudcms.net
2.  Create a project, and select Sample Project as the project type

![example-site.png](/documentation/gitana/4.0/developers/frameworks/includes/example-site.png)

## Source Code and Setup

The code for this example is available as part of the [Gitana SDK](https://github.com/gitana/sdk "Gitana SDK"), which contains usages of Cloud CMS with many different languages and frameworks.

1.  To download, run `git clone https://github.com/gitana/sdk.git`
2.  Navigate to the nuxtjs/sample directory
3.  Follow the instructions in README.md