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/
Leave a Reply
You must be logged in to post a comment.