0

I want to make a adaptive website with vuetify : https://vuetifyjs.com/en/

so there will provide several versions of the website which will be used according to the device.

Adaptive design will provide several designs with different sizes, namely 320, 480, 760, 960, 1200, and 1600 pixels.

so there are about 6 different sizes. does that mean I will make 6 types of web?

I read on docs of vuetify https://vuetifyjs.com/en/styles/float#responsive. but seems it only responsive website. no adaptive website

I am confused about adaptive website implementation with vuetify

I know responsive website. but for this case, i want to implement adaptive website to my project

moses toh
  • 12,344
  • 71
  • 243
  • 443

1 Answers1

1

So the whole idea of adaptive design is to create several different designs. If you have six different sizes, you would have six different versions of each page. Would recommend using Vuetify's breakpoint system (which you can get programatically via this.$vuetify.breakpoint.name) to determine which design that you show. More details here: https://vuetifyjs.com/en/customization/breakpoints

Cathy Ha
  • 1,637
  • 7
  • 17
  • Ok, thank you. I want to ask again. does that mean I will make 6 components for each page? or I make 1 component for one page and add some conditions to differentiate it? – moses toh Oct 27 '19 at 00:32
  • You can do either - six components or one component with logic. I would probably recommend a "master" component with layout, logic, and data and sub-components for each of the views. Then dynamically import whichever sub-component you need depending on the breakpoint so to optimize size. – Cathy Ha Oct 27 '19 at 01:41
  • It also depends on how different your designs are. Will the navigation change? or is it just the layout? – Cathy Ha Oct 27 '19 at 01:45
  • there are pages that only layout changes. but there are also pages whose navigation has also changed – moses toh Oct 27 '19 at 02:40
  • hi what do you think? please give a few more ideas. so I can accept and upvote your answer – moses toh Oct 27 '19 at 08:18
  • So, if there's substantial change to navigation etc, I'd probably recommend six master folders for the six layouts, with more or less the same internal folder structure (state, router, components, etc). And then you'd have some logic dictating which components to use depending on the viewport size. – Cathy Ha Oct 27 '19 at 19:11