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. 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:

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 to deploy your project to our Headless Platform.

Please visit the Nuxt.js documentation for more in depth details on framework features.

Known Limitations

Nuxt Layers

There is a known issue when using Nuxt 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 or via npm package.