Deploy Nuxt 3 on Hostinger

How to deploy Nuxt 3 on Hostinger

Let's look at how to deploy Nuxt 3 on Hostinger. Luckily this is a really simple process and takes a matter of minutes. In this example we will use Hostinger, but the same principles apply for any standard hosting.

Create new website in Hostinger

If you haven't already, create a Hostinger account. Now sign in and create a new website on. So login to your Hostinger account, click the 'Websites' link in the top navbar, then click on "Create or migrate a website."

Create a new website in Hostinger

You will now be presented with a series of questions/options. Do the following:

• What is your website type?
  Select: Skip, I don’t want personalized experience
• Create or Migrate a Website
  Select: Skip, create an empty website
• Name Your Website
  Either choose a domain you have with Hostinger or select Use an Existing Domain to use a domain purchased from another provider. If you use a domain from another provider - go through the steps to connect your domain.

Once your domain is connected go to the Control Panel (Dashboard).

Connect to your Hostinger website via FTP

Now we need to connect to our empty Hostinger website via FTP. In the sidebar on the left hand side, click the "Files" dropdown, then click "FTP Accounts". On this page you will see all of the details for you to connect to your website via FTP. The first thing we want to do is change our FTP password. In the FTP Access table, click "Change FTP password." Enter a new password, confirm it, then click "Change password." Now open Filezilla or a different FTP client. Copy and paste your FTP access details into your FTP client:

• Host = FTP hostname (eg. ftp://websitegoblin.com)
• Username = FTP username (eg. u167260493.test.websitegoblin.com)
• Password = Password you just changed in Hostinger
• Port = FTP port (eg. 21)

Click "Quickconnect" (in Filezilla) or the equivalent in your FTP client. You may be asked if you trust the certificate, confirm that you do. You should be connected to your website. And you will find yourself in the /public_html directory. You will see one file named default.php. This is the file that is being displayed on your domain currently. If you head to your domain now you will see it displayed like this:

Hostinger default new website view. Displaying default.php

If you make changes to default.php they will change on your website. Like this:

Changes to Hostinger default.php file reflected on website

Delete default.php as we don't need it.

Generate Nuxt 3 for deployment

We now need to generate our dist files so we can deploy our Nuxt 3 application to our live server. Head over to your Nuxt 3 project. In the terminal, navigate to the root of your Nuxt 3 project. Execute the following command in the terminal:

npx nuxi generate

Running this command will create a new dist directory in your Nuxt 3 project. Within this new folder will be all of the files for your website that we are going to upload to the live server on Hostinger.

Upload Nuxt 3 dist files to Hostinger server

Nearly there, we now need to upload our Nuxt 3 dist files to our Hostinger server. Go back to your FTP client. In the panel for your local computer navigate to your Nuxt 3 project. In this same panel open the dist folder. Now drag all of the files from the dist folder over to your /public_html directory on your live server.

Now head to your domain and you should see your Nuxt 3 application up and running!

Cloudways hosting is good too.

Get FREE Premium Service Area WIZARD subscription