Change Navigation Based On View With Vue JS

My thoughts

Imagine, you have a website with a navigation, which is not responsive, and the goal is to build a mobile variation. How can you do this without CSS media queries? And what kind of benefits do you have with Vue JS?

Should be the mobile version utterly different from the desktop variation, starting from the HTML structure, over the functionality and until to the CSS styling, then, of course, the implementation can be quite difficult.
And if you wanna implement this with CSS media queries and many javascript conditions, for example, that can be a bit annoying and confusing.

So, in my opinion, it's a better solution to create a different Component for the mobile navigation and use the reactivity from Vue JS to switch between these components, based on the current viewport.

Handle the current view

The core idea is to check out the current innerWidth with your specific breakpoint and hold the status (true or false) in a local data attribute. In the App.vue Component or in the Component you want to handle the navigation.

methods: {
    handleView() {
        this.mobileView = window.innerWidth <= 990;
    }
}

Use your method

Next, you can use the created lifecycle hook and fire your method if the Component is created. Further, you have the opportunity to bind the method with an eventListener to the browser resize event.

This will allow you to run the method again if the user changes the browser size.

created() {
    this.handleView();
    window.addEventListener('resize', this.handleView);
}

And Now?

Now it's pretty easy to show either the mobile version or the normal navigation in your template depending on your mobileView status.

    <NavigationMobile v-if="mobileView" />
    <Navigation v-else />

My YouTube Tutorial about this topic

In this tutorial, I show you step by step, how you can implement this in a Vue JS project.

Conclusion

With this solution, you have both cleanly separated and can also use and adapt independently.

What are your thoughts?

Would you rather use CSS Media queries?

Thanks for reading and watching.