Hosting VueJS Project on Github Pages

Hosting a VueJS project is pretty straight forward but I faced problem with VueJS Routing. First of all it did not work out of the box. I had to change the base path in the config file.

I added the base URL to the vite config file.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  base: "/bravevue/",
  plugins: [vue()],
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
  server: {
    open: true,
  },
});

I added the base also to the router file.

const router = createRouter({
  history: createWebHistory("/bravevue/"),
  routes,
  linkActiveClass: "dark:bg-slate-800 ",
});

Well even after this the code did not worked fine if we refresh the page. So I had to make a copy of index.html to 404.html. This is a work around through it sends a 404 error to the browser anyways.

I wish there could be a more elegant solution to this but for now it works.

That’s it.

I am building a open source component library called bravevue if you are looking for a customized headless UI library you are free to use this.

Homepage : https://shishirraven.github.io/bravevue/