Best way to load CSS file based on JS variable Vuejs

Question

What would be the proper way to do this in Vue?

const brand = 'op';

switch(brand)
{
    case 'ed':
        <style lang="sass" src="./ed.css"></style>
    break;
    case 'op':
        <style lang="sass" src="./op.css"></style>
    break;
    case 'go':
        <style lang="sass" src="./go.css"></style>
    break;
}

I have the style tags in the Vue app but I know I can't use the switch in that part other than the script tags.

The style tag does not accept a src attribute. You probably want a <link> tag. — Roy J
– Roy J, Commented Apr 12, 2018 at 16:43

tony19 · Accepted Answer · 2022-07-16 00:01:56Z

2

There is no Vue way to do that. <style> tags do not take src attributes. <link> tags go only in the <head> section, and Vue operates on the <body>.

If you have single file components, and your css files are specific to them, you could make a mixin that defines the component functionality, and have three components that all use the mixin, but each has its own style. Then you could use a dynamic component to switch between them based on brand.

edited Jul 16, 2022 at 0:01

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 12, 2018 at 17:02

Roy J

44k10 gold badges84 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

arkanos Over a year ago

Thanks for the anser Roy J. I think I can do what I have in mind with Mixins.

Collectives™ on Stack Overflow

Best way to load CSS file based on JS variable Vuejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related