Is it possible to render a Vue component to a hidden display: none container (talking about Swiper)?

Question

Vue.js

There is a slider implemented by the component via vue-awesome-swiper. At the moment the page is loaded, the component does not have time to work out yet, so all the pictures in this slider line up in a long column for a second, then everything is redrawn in its normal form, but naturally this distortion must be corrected during loading.
We decided to try to hide the parent container of the component through a class with display: none, render to hidden and remove the hiding class in mounted, but it turned out that the slider breaks (part of it is not rendered at all, the functionality crashes). If you hide through visibility: hidden or similar "sparing" methods, then the component is rendered normally.

Actually the question is: is there a practice of drawing in containers hidden through display?
And, if suddenly someone is familiar with vue-swiper, maybe you can explain how to set it up so that it works immediately when the page loads. Logic tells me that it will not work before js is loaded, but what if there is a solution?

Answer 1

We decided to try to hide the component's parent container through a class with display: none, draw to hidden and remove the hiding class in mounted

There is no need to manually fiddle with classes, to hide the template until the end of compilation there is v-cloak .