In this guide you will learn how to deploy a Nuxt site with Amplify Hosting.

### Getting started

<Callout>

In this step, you will create a new Nuxt site. If you have already created a site, you can jump to the [next step](#creating-the-git-repository).

</Callout>

Create a new Nuxt site:

```sh
# Using YARN
yarn create nuxt-app amplify-nuxt

# Using NPM
npx create-nuxt-app amplify-nuxt
```

For the __Deployment target__, choose __Static (Static/JAMStack hosting)__.

Next, change into the new directory:

```sh
cd amplify-nuxt
```

### Creating the Git repository

Next, create a new Git repository and copy the URI of the repo to your clipboard.

![Nuxt Hosting with Amplify Console - Creating the repo](/images/hosting/nuxt/1.png)

Now, initialize the new repository within the root of your project and push the code to Git.

```sh
git init
git remote add origin git@github.com:username/project-name.git # or your git repository location
git add .
git commit -m 'initial commit'
git push origin main
```

### Deploying the site to Amplify Console Hosting

To use Amplify Hosting, visit the [Amplify Console](https://console.aws.amazon.com/amplify/home) and click __GET STARTED__ under __Deploy__.

![Nuxt Hosting with Amplify Console - Console view](/images/hosting/nuxt/2.png)

Next, choose the Git provider that you are using and click __Continue__:

![Nuxt Hosting with Amplify Console - Choosing your Git provider](/images/hosting/nuxt/3.png)

In the next screen, choose your repository and branch and click __Next__:

![Nuxt Hosting with Amplify Console - Choosing your Git repo and branch](/images/hosting/nuxt/4.png)

In the __App build and test settings__ view, click __Edit__ and do the following:

1. Set the __build__ command to: `yarn run generate`
2. Set the `baseDirectory` location (see build settings below)
3. Click __Save__
4. Click __Next__

For Nuxt 2, set `baseDirectory: dist`:
```yaml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn generate
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: dist
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

```

For Nuxt 3, set `baseDirectory: '.output/public'`:
```yaml
version: 1
frontend:
  phases:
    preBuild:
      commands:
        - yarn install
    build:
      commands:
        - yarn generate
  artifacts:
    # IMPORTANT - Please verify your build output directory
    baseDirectory: '.output/public'
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

```

Below is an example of editing the build settings for a Nuxt v2 application:
![Nuxt Hosting with Amplify Console - Configuring the build settings](/images/hosting/nuxt/5.png)

Finally, click __Save and deploy__.

Once your site has successfully deployed, you should see three green checkmarks:

![Nuxt Hosting with Amplify Console - Deployment complete](/images/hosting/nuxt/6.png)

To view the live site, click on the automatically generated URL given to you by the Amplify Console.

### Setting up rewrites for SPAs

Most SPA frameworks support HTML5 history.pushState() to change browser location without triggering a server request. This works for users who begin their journey from the root (or /index.html), but fails for users who navigate directly to any other page. Using regular expressions, the following example sets up a 200 rewrite for all files to index.html, except for the specific file extensions specified in the regular expression.

To set up rewrites, follow the guide on AWS Amplify Hosting's [documentation](https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa).

<Callout>
Make sure you list the file extensions used in your application (i.e. .json, .webp, etc.) in the regular expression.
</Callout>