Kind of Annoyed at Vue-Router Lately
Kind of Annoyed at Vue-Router Lately
Let me share what annoys me about Vue-Router since you all asked.
Not too long ago, Vue 2 & Vue-Router were an excellent combination, with seamless integration and a workflow that simply made sense.
However, Vue 2 has since evolved, and its current iteration significantly differs, with the Composition API and script setup now being the preferred and widely adopted method for writing our components.
Unfortunately, Vue-Router has not kept pace with these changes.
Firstly, the official documentation is primarily focused on the Options API, which can be very confusing for newcomers.
While the Composition API is mentioned, it’s only covered in a brief section that oddly relies on the setup hook from the Options API rather than the script setup syntax, further adding to the confusion.
The beforeRouteEnter navigation guard is unavailable in the script setup, which is a big pain point and likely the reason why the documentation remains outdated. This guard is crucial for fetching data before navigation, yet it only functions with the Options API syntax. The limitation exists because the setup function executes when the component is created, which happens after navigation has taken place. This restricts us to fetching data post-navigation, which is often not preferable.
Another essential but still experimental feature of Vue is Suspense. It can be used to orchestrate asynchronous dependencies with top-level await being one of them. I would expect Suspense and router-views to play along but unfortunately that’s not the case. Suspense is not even mentioned in the vue router docs. Making a router view suspendable would allow pages to fetch data without using intermediate components. Nuxt was smart enough to do this by default.
These issues are recognized, and the Data loaders RFC is intended to address them. However, the entire proposal appears verbose and unnatural, especially when compared to the simplicity of achieving the same outcomes with the Options API.
Conclusion
In conclusion, data fetching is a fundamental functionality. Vue, being low-level, lacks a clear guideline for this. The Vue Router’s approach is outdated, and while Suspense offers some hope, it remains experimental and doesn’t fully address the issue. I kind of wish that all these problems had been resolved before Vue 2 was phased out.
