How to deploy Vue.js on Saplo (lightweight frontend app)

Vue 3 is, alongside React, the second most popular library for building user interfaces, and, just like React, it is not a hosting service in itself. A built project (most often using Vite) consists of static HTML, CSS and JS files that require a server with proper route fallback for Vue Router in history mode - without this, refreshing a subpage results in a 404 error. On Saplo, you deploy Vue in exactly the same way as any other app from the catalog: the engine builds the project, places the ready-made directory dist under nginx and configures the route fallback automatically.

Who is Vue on Saplo for

Before you start the installation, check whether this is the right choice for your project:

• you are building an admin panel - Saplo serves the ready-made build as static files, with no custom Node process running in the background,
• the frontend needs to connect to your own API - you host the SPA alongside the backend (Django, Node, Docker) on the same Box or separately,
• a single-page application with Vue Router in history mode - the fallback for all routes at index.html is configured automatically, and you do not need to add anything to nginx,
• you want deployments from git push instead of manually uploading files via FTP - you connect the repository once, and every push to the production branch automatically builds and deploys a new version.

If the project requires server-side rendering and better SEO, look for the Nuxt stack in the application catalog instead of plain Vue.

Requirements

To deploy Vue on Saplo, you need:

• Box on any plan, even S is enough - a built SPA is just a set of static files, with no process kept in memory after the build,
• at least 256 MB of free RAM for the build process itself and 2 GB of disk space,
• a domain or subdomain *.saploapp.pl included in the price of every plan,
• a Git repository if you want automatic deployments (optional to start, as you can also upload the application as a .zip archive via the panel).

Step-by-step installation

1. In the Saplo panel, open Application Catalog and select Vue.js (category "Applications").
2. Select the Box and enter the application name - the default subdomain is generated from it <name>.saploapp.pl.
3. Select the Node.js version for the build (18, 20, or 22, with 20 as the default) and confirm the installation.
4. The engine scaffolds a Vue skeleton using Vite (the equivalent of npm create vite -- --template vue), installs the dependencies and builds the project. The contents of the dist directory go directly into the application directory, served by nginx.
5. After the installation is complete, the domain from step 2 displays the starter Vite + Vue skeleton - from then on, you deploy your own code to it.

Deploying your own code via Git

1. In the application's details, find the Git / CI-CD section and click "Connect GitHub", confirm the installation of the "Saplo Deploy" application and select the repository with the Vue project.
2. The repository's root directory must contain the saplo.yaml file.
3. Commit and push the saplo.yaml file to the production branch (by default main).
4. Each subsequent git push on this branch builds the project and replaces the contents of the dist directory on the Box, and you can see the status in the Deployments tab.
5. If the build fails, the previous working version stays in place - Saplo does not replace it with a broken one.

Example of a minimal saplo.yaml file for Vue:

name: my-project
stack: vue
build:
  install: npm ci
  command: npm run build
  output: dist

Vue on Saplo vs alternatives

Most common questions

Does Vue Router work in history mode without additional configuration? Yes, the fallback for all paths to index.html is active immediately after installation, so refreshing any subpage doesn't result in a 404 error.

Can I have multiple Vue apps on a single Box? Yes, the app directory lets you set up multiple modules side by side, each with its own subdomain or domain.

Do you need SSR and better SEO - what should you choose? The Nuxt stack from the same directory is Vue with full server-side rendering.

Do I get SSL and my own domain? Yes, the SSL certificate is automatic, and your own domain or subdomain *.saploapp.pl is included in the price of every plan.

How do I change the build output directory if I don't use the default dist? Set the build.output field in saplo.yaml to the correct path.

With Saplo, you can take Vue from scratch to a working domain in just a few minutes, and Vue Router works without manual configuration. If your project grows to require SSR, migrating to Nuxt in the same directory doesn't require changing your hosting.