---
title: Nuxt.js Framework Guide
description: Nuxt.js is the most popular open source Vue-based framework. In this guide, you will learn how to deploy it to our Headless Platform.
url: https://developers.wpengine.com/docs/headless-platform/framework-guides/nuxt/
image: https://developers.wpengine.com/og/docs/headless-platform/framework-guides/nuxt.png
---

# Nuxt.js Framework Guide

## Introduction

Nuxt.js is the most popular open source Vue-based framework. It allows developers to use all the features you need for production in a front-end framework: file-system routing, rendering modes, data fetching, and more. No config needed. Check out their [documentation for guides to all these key features](https://nuxt.com/docs/getting-started/introduction). This guide assumes you are using Nuxt 3.

## Deploy steps

To get started, you can run the following command to create a new Nuxt.js project and the follow the steps in their [automatic setup guide](https://nuxt.com/docs/getting-started/installation):

`npx nuxi init <project-name>`

After you have created your application, cd into your project directory:

`cd <your project directory>`

### Push Initial Commits to Your Repository

To deploy your project to our Headless Platform, it will need to be available on a remote GitHub, Bitbucket or GitLab repository. The Nuxt.js installation process lets us initialize a local repository for the project.

Create a new remote repository, and then run the following commands to initialize and configure your local and remote repositories:

```
# Add remote repository
$ git remote add origin https://<your-git-provider>/<username>/<repo>


# Stage all changed files
$ git add -A


# Commit the files to the current branch
$ git commit -m "initial commit"


# Push changes to remote repository
$ git push -u origin main
```

### Build Details

Our Headless Platform detects that it is a Nuxt.js app and runs the `build` script in your `package.json` file. The default output mode for Nuxt is a Node.js server that gets created as a part of the build process. To run this server on our Headless Platform, change your `start` script in `package.json` to the following: `node .output/server/index.mjs`

This will run your Nuxt app in universal rendering mode (server-side rendering and hydration).

To commit these changes to your repository, run the following commands:

```
# Stage all changed files
$ git add -A


# Commit the files to the current branch
$ git commit -m "update build and start"


# Push changes to remote repository
$ git push -u origin main
```

### Deploy Your Repository

Once your project is in your remote repository, you can follow the [directions in our getting started guide](https://developers.wpengine.com/docs/headless-platform/getting-started/deploy-from-existing-repo/) to deploy your project to our Headless Platform.

Please visit the [Nuxt.js documentation](https://nuxt.com/docs/getting-started/introduction) for more in depth details on framework features.

## Known Limitations

### Nuxt Layers

There is a known issue when using [Nuxt layers](https://nuxt.com/docs/getting-started/layers). When specifying a subdirectory as the root of a Headless Platform project, the build process cannot access parent directories. The current recommendation is to either reference the layer as [a Git repository](https://nuxt.com/docs/guide/going-further/layers#git-repository) or via [npm package](https://nuxt.com/docs/guide/going-further/layers#npm-package).

## Was this helpful?

Thanks for the feedback!

```json
{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://developers.wpengine.com/#website","name":"WP Engine Product Documentation","url":"https://developers.wpengine.com/","description":"Resources for developing, deploying, and scaling on WP Engine.","inLanguage":"en-US","keywords":["API documentation","product documentation","headless WordPress","managed WordPress hosting"],"publisher":{"@id":"https://wpengine.com/#organization"}}]}
```