How to load external CSS, js in Vue and Laravel

Question

i created vue layout in my components but i have problem. Actually i m using vue3 in my laravel project with breeze library. And my template needs a some js and css file and i m import like this

onMounted(() => {

 const stylesheets = [
    "../adminassets/css/nucleo-icons.css",
    "../adminassets/css/nucleo-svg.css",
    "../adminassets/css/argon-dashboard-tailwind.css?v=1.0.1",
    "https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"
  ];

  stylesheets.forEach(stylesheet => {
    let stTag = document.createElement('link');
    stTag.setAttribute('rel', 'stylesheet');
    stTag.setAttribute('href', stylesheet);
    document.head.appendChild(stTag);
  });

 const heads = [
    "https://kit.fontawesome.com/42d5adcbca.js",
    "https://unpkg.com/@popperjs/core@2",
    "../adminassets/js/plugins/chartjs.min.js",
    "../adminassets/js/plugins/perfect-scrollbar.min.js",
    "../adminassets/js/argon-dashboard-tailwind.js?v=1.0.1",

  ];

  heads.forEach(head => {
    let headTag = document.createElement('script');
    headTag.setAttribute('src', head);
    document.head.appendChild(headTag)
  });

});

this code work but loading every page refresh. How can i import external template files for healty code.

Thans Stackoverflow family.

i tried external template files import my vue 3 project. and i expect how can i import this files in my layout

Answer 1

Try to remove the wrapping onMounted.

docs