Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Different mobile and desktop layout with vuejs

I'm looking a lightweight and smart way to provide user with different layout or component for mobile and desktop view using vue.

My web application consist of a lot of table and as you all know table is not a best experience when use in mobile device (even thought there is a lot of method to make table useable but not enjoyable)

So i thinking to make vue js to detect whether user access web apps from desktop or mobile device. when user open in desktop it will showing a good old table because of screen real estate desktop user have. But when user open in mobile device it will show card or panel like view that more suitable for mobile device (portrait orientation in general)

I know there is a solution with great bootstrap frameworks that can do that, but it is not swapping but instead render all part (html for most part) and just hide each part according to the screen size.

But maybe there is a much more efficient and smart way to implement these features in vue js?

like image 979
PamanBeruang Avatar asked Nov 19 '17 04:11

PamanBeruang


People also ask

Can I use VueJS for mobile app?

Vue. js enables you to build high-quality, production-ready Android and iOS apps with a single codebase using the skills you're already familiar with — namely, HTML, CSS, and JavaScript.

Is VueJS a Mvvm?

js is an open-source model-view-view model (MVVM) JavaScript framework.

Is Vue mobile responsive?

It is specifically used to build desktop and mobile apps with Vue. js. However, it is not responsive in nature.

Is VueJS good for large applications?

Vue. js 3 is a solid framework for building applications both large and small.


Video Answer


1 Answers

If you have 2 different vue files, one for mobile and the other for desktop you can do like explained at this answer:

https://stackoverflow.com/a/51053611/1178478

like image 184
Derzu Avatar answered Oct 20 '22 22:10

Derzu