Vue does not recognize bootstrap properties

Question

  <b-container fluid="xl">
     <h2>Example</h2>
  </b-container>

When using a "fluid" prop, Vue.js gives me a warning in the console:

[Vue warning]: Invalid prop: Type check failed for "fluid" prop. Boolean expected, got String with value "xl".

In bootstrap-vue documentation the "fluid" prop is known to be valid.

How to make Vue.js recognize bootstrap props without generating warnings?

The code you provided looks correct, the value used in fluid is a string.The problem might come from another place Have you declared fluid anywhere else in code? — Ankit.Z, Commented Nov 25, 2022 at 12:57
Could you check this i have created basic container. I could not produce your error. — Ankit.Z, Commented Nov 25, 2022 at 13:15
Are you using the latest bootstrap-vue version? Because you need to use at least the version v2.2.0 in order to get the fluid prop as a string (commit related to this change). — Valentin Richet, Commented Nov 25, 2022 at 23:25

Valentin Richet · Accepted Answer · 2022-11-26 00:04:37Z

I think you are getting this error because you might be using an older version of bootstrap-vue.
You should update your bootstrap-vue to 2.2.0 or newer (2.23.1 is the latest at the time of my answer).
There might be breaking changes between the version you are using and the newest but it will be better for you in the end and you will be able to use the fluid prop as a string (as stated in the documentation).

Collectives™ on Stack Overflow

Vue does not recognize bootstrap properties

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related