Blog Engineering How to host VueJS apps using GitLab Pages
Published on: September 13, 2023
2 min read

How to host VueJS apps using GitLab Pages

Follow this tutorial, including detailed configuration guidance, to quickly get your application up and running for free.


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.


  • A VueJS application
  • Working knowledge of GitLab CI
  • 5 minutes

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
  1. 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!


We want to hear from you

Enjoyed reading this blog post or have questions or feedback? Share your thoughts by creating a new topic in the GitLab community forum. Share your feedback

Ready to get started?

See what your team could do with a unified DevSecOps Platform.

Get free trial

Find out which plan works best for your team

Learn about pricing

Learn about what GitLab can do for your team

Talk to an expert