Introduction

Before you begin, 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.

Creating a Vue Project

To create a new Vue project, run the following command:

npm create vue@latest

In this command, npm create vue@latest is used to create a new Vue project with the latest version of Vue. The npm create command is a tool that comes with npm, the Node.js package manager. It is used to initialize a new or existing npm package.

vue@latest is a package available on the npm registry that sets up a new Vue project for you. It takes care of all the initial setup, such as creating the project directory, installing necessary dependencies, and configuring basic files.

@latest is a tag specifying that you want to use the latest version of the vue package. This ensures you’re always using the most updated version and, consequently, have access to the latest features.

Configuring Port 80

Port 80 is the default port for HTTP traffic. To host a Vite app on Square Cloud, configure the use of port 80. In Vite, you can set the --port 80 parameter in the startup script to ensure your app runs correctly on this port.

Creating the squarecloud config file

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

The squarecloud.app file is a configuration file that will be used to configure your application; it will be used to define the name, description, version, main file, among other things.

Configuring the START Field

In the Square Cloud configuration file, the START field is essential to customize the startup command. If you want to build and start your Vite app on Square Cloud, configure the START field as follows:

squarecloud.app
START=npm run build && npm run serve

This command will execute the “build” and “serve” scripts defined in your package.json:

package.json
{
  "name": "vue-project",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview --port 80"
  },
  "dependencies": {
    "vue": "^3.4.21"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.4",
    "vite": "^5.2.8"
  }
}

Purchasing a Plan Before Uploading Your Project

Before you can upload your project to Square Cloud, it’s important to understand that you need to purchase a plan. The type of plan you choose will depend on the resources required by your application. You can view our plans here.

Are you wondering how much RAM and CPU your plan needs to host a Vue.js website? Don’t worry, we’re here to help. Vue.js is a progressive JavaScript framework known for its adaptability and simplicity. It’s designed to be incrementally adoptable, making it easy for developers to start small and scale up as needed. Vue.js also emphasizes a declarative rendering and component-oriented approach, making it intuitive to build modern web interfaces. Our Standard plan offers 4GB of RAM and 1vCPU, which should be sufficient for most Vue.js websites. However, if you’re working on a larger project or need more stability, we recommend considering our Pro plan. With additional resources, you can ensure smooth performance even under high demand. To purchase, simply click here.

Uploading Your App to Square Cloud

After following all the steps, package your application files into a zip file where the configuration file is, and upload the website on Upload. Remember not to include files like node_modules. You can get more information about unnecessary files when hosting at automatic-deletion-files-when-deploying-an-application-to-squarecloud.

Troubleshooting

Additional Resources

For more information about Vue and its tools, visit the official Vue documentation. There, you’ll find detailed guides, tutorials, and API documentation to help you make the most of Vue.

If you continue to experience any issues, please don’t hesitate to contact our support team.