Does vue 3 loads css multiple times if we call same component in single page? If not how does it wor-CodePudding

My vue 3 component

<script setup lang="ts">
import { defineAsyncComponent, ref, Ref } from "vue";
import CookiesHelper from "@/utilities/cookies";
import { Banner as BannerType } from "@/interfaces/Banner";
import { usePackageStore } from "@/store/offers-package";
import { useInitDataStore } from "@/store/init-data";
import useGroupedData from "@/composables/grouped-data";


CookiesHelper.setCookies();

const isLoaded = ref(false);
const dataStore = usePackageStore();
const initDataStore = useInitDataStore();

let selectedApp: unknown;

switch (initDataStore.app) {
  case "app1":
    selectedApp = defineAsyncComponent(() => import("@/pages/app1.vue"));
    break;
  default:
    selectedApp = defineAsyncComponent(() => import("@/pages/app2.vue"));
}

dataStore
  .setDataPackage()
  .then(() => {
    isLoaded.value = true;
  })
  .catch((e: Error) => {
    console.log(e);
  });
</script>

<template>
  <div v-show="isLoaded">
    <component :is="selectedApp"></component>
    <link-tracking></link-tracking>
    <link-tracking></link-tracking>
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

I want to understand, if link-tracking component has scoped css, then that css will be loaded only once or twice? how does this actually gets compiled?

CodePudding user response：

That CSS will be loaded only once as well as JS for that component.

You can have as many instances of each component on the page, it only needs to be defined once. Scoped or not scoped styles makes no difference in this context, Vue will generate same hashed data attribute that it will apply to each instance of a component and it will be used to scope CSS to that component.