For all the steps below, it is required that you have installed the HerokuCLI on your computer. It also assumes you have Node.js and npm already installed.
If you are running Homebrew on your Mac, you can simply run the following command:
brew tap heroku/brew && brew install heroku
If you are not using Homebrew, I would recommend installing it.
Homebrew install: Installing Homebrew
🚫 If you prefer not to use Homebrew, please consult the official documentation for other options. (Link provided below)
Heroku provides an installer for Windows 64 and 32 bit. You can find it from the official documentation link below.
Heroku recommends using the official snap to install the CLI:
sudo snap install --classic heroku
If you want to read more about the installation and other options, feel free to take a look at the official documentation.
You may verify that the CLI was successfully installed by running the version command:
If you can see a version printed out in the terminal, you have successfully installed the Heroku CLI.
Vue is incredibly simple to deploy to Heroku. We can deploy an app in 3 easy steps!
Create a new file and call it
static.json in the root of your Vue.js project.
Add the static.json to the git repository. Also ensure that all your other files have also been added.
git add . git commit -m "Create static.json for Heroku deployment"
👏 Even if you don't have your app on a remote repository, the Vue app is initialised with an empty local repository.
The last step is to create a new Heroku app and push to the heroku repository.
⚠️ Remember to run each line individually, don't copy-paste all the lines at one time into the terminal.
First login, and create your application. You can replace
your-app-name-here with anything that is unique on the herokuapp.com domain.
heroku login heroku create your-app-name-here
⚠️ Remember replace
you-app-name-herewith a unique name for your heroku app. It will deploy to
Next add the required Heroku buildpacks to your newly created application.
heroku buildpacks:add heroku/nodejs heroku buildpacks:add https://github.com/heroku/heroku-buildpack-static
Lastly, you can push to the Heroku repository's master branch to deploy your code into the new Heroku app.
git push heroku master
You should see your Vue app being pushed to the Heroku repository and built on the Heroku servers. Once this is done, it will print out a success message with the URL to where the app has been deployed.
You can easily open the app running:
Be careful when deploying apps that do not use a proper server. You might run into 404 problems when using the
history mode. This is the case if you do not have the ability to configure your server to route traffic via the index file.
For more information about VueRouter's history mode, please consult the official documentation: VueRouter Deployment Documentation
Drop some comments if something wasn't clear enough, or if you experience any problems. You can check the official Vue documentation for more Deployment options: