Skip to main content

Professional Nuxt Application Development

  • Before starting, make sure you have Node.js and npm installed on your system. If you don’t have them yet, you can download them from the official Node.js website.
  • Next, create an account on Square Cloud through the signup page. You can use your email to register quickly.
  • Finally, ensure you have an active paid plan on your account. You can view and purchase a plan according to your needs here.

Nuxt Configuration

To create a Nuxt project, you need to install the Nuxt CLI. Run the following command:
npx nuxi init my-nuxt-app
This command initializes a new Nuxt project in the my-nuxt-app folder. Then install the project dependencies:
cd my-nuxt-app
npm install

Creating a Nuxt Project

After installing the dependencies, you can start your local development server with:
npm run dev
Nuxt will start a local development server, usually at http://localhost:3000. To create a simple page, edit the pages/index.vue file:
index.vue
<template>
  <div>
    <h1>Hello from Nuxt!</h1>
  </div>
</template>

Creating the Square Cloud Configuration File

Learn more about: how to create the configuration file for Square Cloud.

The squarecloud.app file is a configuration file that defines your application’s name, description, version, main file, among other settings.

Purchasing a Plan Before Uploading the Project

Before deploying your project to Square Cloud, ensure you have an active plan that meets your resource needs.
Unsure about how much RAM and CPU a Nuxt application needs? Nuxt is a powerful framework that supports SSR, ISR, and static rendering. For most Nuxt projects, the Standard plan with 4GB RAM and 4vCPU is sufficient. However, if your project uses heavy SSR rendering or high traffic, consider upgrading to the Pro plan.

Building Nuxt for Production

Before uploading to Square Cloud, generate the production build:
npm run build
This creates the .output folder required for running the Nuxt server. Which will contains the MAIN file on this path .output/server/index.mjs

Uploading the Project to Square Cloud

After preparing your project, you can upload it to Square Cloud using the dashboard or the CLI.
  • Upload via Dashboard
  • Upload via CLI
Access the Square Cloud Dashboard and upload your project files.

Additional Resources

For more information about Nuxt, visit the official Nuxt documentation here.

Troubleshooting

Custom Domain

To use a custom domain (e.g., mysite.com) instead of the default URL https://mysite.squareweb.app/, you need the Standard plan or higher. The subdomain is defined by the SUBDOMAIN field in the configuration file. See: How to set up your custom domain.

Minimum RAM Requirements

Minimum: 512MB RAM for simple websites/APIs. For sites with frameworks (Next.JS, React, Vue, Angular, etc.), we always recommend at least 1GB RAM. For larger applications, use more RAM to avoid LACK_OF_RAM error and ensure performance.

Could not find this site.

Check if the subdomain/domain matches what's configured in the SUBDOMAIN field or in the custom domain settings. If you just uploaded the site, wait up to 60 seconds for Square to enable first access.

Site took too long to respond...

Check if you correctly configured port 80 and host 0.0.0.0 in the application. We recommend using Square's forced environment variables: PORT and HOST from the .env file.
If you continue facing technical difficulties, our specialized support team is available to assist you. Contact us and we'll be happy to help you resolve any issue.