How to Host VueJS Apps Using GitLab Pages

Prerequisites

• VueJS application
• Working knowledge of GitLab CI

Setting up your VueJS application

1. Install vue-cli.
2. Create your application using vue-cli.

Setting up .gitlab-ci.yml for GitLab Pages

• Add the GitLab CI configuration file to the root of your project.

Vue config (vue.config.js)

• Change the path of the artifacts in the Vue config file so that GitLab can deploy to Pages.
• Set the base URL for the deployment of your application.

Run GitLab CI Check Pages to get your URL

• Check the Pages URL to verify the deployment of your VueJS application.

Conclusion

• You have successfully set up a VueJS project with a CI/CD pipeline for hosting on GitLab Pages.