How to load css file dynamically

Question

We are using Vue.js and Vuetify for my application. As part of my application, I will make API call on page load based on that API response entire application will render all the components. As part of this API, I will get property named as cssDirection and it tells which css file suppose to load either it's LTR or RTL.

When I worked in Angular, We used this approach.

Now my question is there any workaround to achieve this in Vue instead of the above approach ? I googled I didn't find any solutions.

Thanks

Bob Fanger · Accepted Answer · 2018-10-11 22:04:34Z

24

To load css file dynamically you can do somethings like this

<template>
  <div>
    <button @click="appendFile">Click me to add css file</button>
  </div>
</template>

<script>
export default {
  methods : {
    appendFile(){
      let file = document.createElement('link');
      file.rel = 'stylesheet';
      file.href = 'myfile.css'
      document.head.appendChild(file)
    }
  }
}
</script>

edited Oct 11, 2018 at 22:04

Bob Fanger

30k7 gold badges68 silver badges83 bronze badges

answered Oct 11, 2018 at 21:56

Mamadou Hady Barry

6394 silver badges11 bronze badges

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

Comments

Bob Fanger · Accepted Answer · 2018-10-11 22:28:23Z

3

Injecting a <link> into the page also works in vue, an alternative is to use webpack's code splitting.

if (data.rtl) {
  import("./css/rtl.css")
} else {
  import("./css/ltr.css")
}

edited Oct 11, 2018 at 22:28

answered Oct 11, 2018 at 22:22

Bob Fanger

30k7 gold badges68 silver badges83 bronze badges

2 Comments

snehanshu.js Over a year ago

Does it work with loading CSS file from an external source like a CDN?

Bob Fanger Over a year ago

Not out of the box, there are plugins for that openbase.io/js/webpack-external-import but unless it happens frequently in your codebase i'd suggest adding it manually to the dom like the other answer suggest

Marvin Correia · Accepted Answer · 2021-08-02 22:30:30Z

3

Use import("") to load the static css from assets, for example if are you using multiple files for styling:

On App.vue:

<script setup>
import { useStore } from "vuex";
import { computed, watchEffect } from "@vue/runtime-core";

const store = useStore();
const theme = computed(() => store.state.theme);

watchEffect(() => {
  import(`./assets/css/themes/${theme.value}.css`);
});
<script/>

answered Aug 2, 2021 at 22:30

Marvin Correia

8718 silver badges11 bronze badges

Comments

Adrian Mole · Accepted Answer · 2023-05-27 13:39:25Z

0

You can use:

import(path);
in lifecycle

And set your file name dynamically in data, for example:

data(){
   return{
      filename: 'test1',
   }
}
created(){
import(`./assets/css/themes/${this.filename}.css`);
}

edited May 27, 2023 at 13:39

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered May 27, 2023 at 13:18

amir arbabi

1

Collectives™ on Stack Overflow

How to load css file dynamically

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related