How to make responsive components?

Question

Adaptive design

For example, there is an accordion on a mobile phone (click to open the text), but on a desktop it will be tabs (tabs)?

Answer 1

1) We cut the current-device plugin into the vue context . I recommend adding it to the Vue prototype. Through Vue install so that it is always at hand. If you don’t rummage around, google something like creating plugin Vue.install - everything is simple there.
2) We create separately tabs, separately accordions. They must have the same data model by itself.
3) We create a wrapper for tabocordions, And under the root we put

<template v-if='$device.desktop()'><tabs.../></template>
<template v-else><accordions.../></template>

Voila. Depending on the user agent, the view will render the model in the desired view

Answer 2

CSS Media Queries