Sometimes, we want to use Vue.js with Nginx.

In this article, we’ll look at how to use Vue.js with Nginx.

How to use Vue.js with Nginx?

To use Vue.js with Nginx, we should redirect all Vue.js app URLs to index.html.

For instance, we write

location / {
  try_files $uri $uri/ /index.html;
}

in our Nginx config to redirect all Vue app URLs to index.html.

Then we can use history mode with Vue Router to remove the hash by writing

const router = new VueRouter({
  mode: "history",
  routes: [
    //...
  ],
});

by setting mode to 'history' when we’re creating a VueRouter instance.

Conclusion

To use Vue.js with Nginx, we should redirect all Vue.js app URLs to index.html.