Columns not working in Vue3/Nuxt3

Visual Editor Help
1

Hi,
it seems like the display:flex; style is not applied to the right component in the builder editor.

I’m dropping a basic Columns component, and adding some text in each column.
In the generated code, their is a parent component which has the display: flex style applied, then this parent has one child with builder-columns class, and that child has the actual columns as children.

The result is that all the content appears in the first column.

Capture d’écran 2023-07-26 à 12.37.58
Capture d’écran 2023-07-26 à 12.37.58988×392 65.5 KB

Capture d’écran 2023-07-26 à 12.38.02
Capture d’écran 2023-07-26 à 12.38.18
Capture d’écran 2023-07-26 à 12.38.181180×938 103 KB

I am using Nuxt with the vue3 sdk. And it seems to be the same issue as this unresolved post.

2

Hi @marinelbg, We are trying to reproduce this issue in our setup and will keep you posted about the potential solution or fix!

1 Like
3

I have the same issue in my Nuxt3 setup. @garima, is there any update on this?

4

Hello @tubstrr,

To address the column issue in vue3/Nuxt, importing the following CSS package should fix the issue:

import '@builder.io/sdk-vue/vue3/css';