Vue-select: Relies on bootstrap 3

[justinkames]

Nice component! I'm trying to use this component with http://v4-alpha.getbootstrap.com, but it's relying on bootstrap 3. Are there any plans to make the styling of the component customizable?

[sagalbot]

@justinkames, yes, I'd like to find a way to bundle additional stylesheets with the package and have an easy way of pulling them in with npm. That way I can add a bootstrap v4 stylesheet, and a basic stylesheet if you're not using bootstrap at all.

[seandearnaley]

+1, I'm using bulma css and it's difficult to style

[flowcki]

@sagalbot It would be great, because I don't want to use bootstrap or bulma. I just want to use my own CSS but if a default CSS can be imported it would be better.

You said "Zero dependencies" but bootstrap is a dependency.

[tyler36]

+1
Bulma user here and would love to see some kind of templates included

[sagalbot]

Next release is just about done, I've set it up so that there are base styles by default which eliminates the bootstrap dependency. The CSS makes very few assumptions, I tried to remove as many opinionated styles as possible like font-family,font-size,color, etc, while still being able to provide a baseline set of styles.

Of course if you add in bootstrap 3 or 4, it'll work nicely with that as well. Will see if I can get it playing nice with Bulma in the release after this one.

[alexcroox]

It would be super useful to be able to define the class names being used so I can apply my own BEM class names and styles. I'm using vSelect as a component inside my own single component file InputSelect.vue where I keep the styles for it

[sagalbot]

@alexcroox that might be a bit difficult without providing a lot of props/computed properties. I've had some requests for classes on dropdown items themselves which is definitely doable. I'll explore the options for custom classnames throughout the component.

This is how things look right now without any external CSS. There are no font size/family declarations anywhere except on things like the tag x and the open/closed indicator. Everything is set up to just use system defaults, and be easily overridden by your own styles.

[sagalbot]

Remove Bootstrap CSS dep

[sagalbot]

The latest release is truly zero dependencies, and works awesome with Bulma, Foundation, and Bootstrap 3 & 4.