How to host VueJS apps using GitLab Pages

Noah Ing, Sophia Manicor ·
Sep 13, 2023 · 2 min read

If you use VueJS to build websites, then you can host your website for free with GitLab Pages. This short tutorial walks you through a simple way to host and deploy your VueJS applications using GitLab CI/CD and GitLab Pages.


Setting up your VueJS application

1) Install vue-cli.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

You can check you have the right version of Vue with:

vue --version

2) Create your application using:

vue create name-of-app

When successfully completed, you will have a scaffolding of your VueJS application.

Setting up .gitlab-ci.yml for GitLab Pages

Below is the GitLab CI configuration necessary to deploy to GitLab Pages. Put this file into your root project. GitLab Pages always deploys your website from a specific folder called public.

image: "node:16-alpine"

  - build
  - test
  - deploy

  stage: build
    - yarn install --frozen-lockfile --check-files --non-interactive
    - yarn build
      - public

  stage: deploy
    - echo 'Pages deployment job'
      - public
    - main

Vue config (vue.config.js)

In Vue, the artifacts are built in a folder called dist, in order for GitLab to deploy to Pages, we need to change the path of the artifacts. One way to do this is by changing the Vue config file, vue.config.js.

const { defineConfig } = require('@vue/cli-service')

function publicPath () {
  if (process.env.CI_PAGES_URL) {
    return new URL(process.env.CI_PAGES_URL).pathname
  } else {
    return '/'

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: publicPath(),
  outputDir: 'public'

Here we have set outputDir to public so that GitLab will pick up the build artifacts and deploy to Pages. Another important piece when creating this configuration file is to change the publicPath, which is the base URL your application will be deployed at. In this case, we have create a function publicPath() that checks if the CI_PAGES_URL environment variable is set and returns the correct base URL.

Run GitLab CI


Check Pages to get your URL


Voila! You have set up a VueJS project with a fully functioning CI/CD pipeline. Enjoy your VueJS application hosted by GitLab Pages!


“This tutorial walks you through a simple way to host and deploy your VueJS applications using GitLab CI/CD and GitLab Pages for free.” – Noah Ing, Sophia Manicor

Click to tweet

Edit this page View source