Home » vue » Vuejs hiding style tag from head | Laravel-vuejs application

Vuejs hiding style tag from head | Laravel-vuejs application

Posted by: admin November 26, 2021 Leave a comment

Questions:

I am working with laravel-vuejs application. When vuejs renders css, then it appends some style tags in the html head like below image. Is there any way to hide this tags. I think it is possible using webpack.conf in vuejs by adding some plugin like, copy-webpack, extra-text-ebpack, optimize-css-assets-webpack etc. but how to do it in larave-vue application.

enter image description here

Answers:

you can use extractVueStyles in laravel-mix

extractVueStyles: Extract .vue component styling (CSS within
tags) to a dedicated file, rather than inlining it into the HTML.

Laravel Mix Options

###

I guess you might write CSS in each Vue single file component,like this:

 //test.vue
  <template>
    <div></div>
  </template>
  <style>
     div{
        //...
     }
  </style>

Why not write these CSS in a CSS file and then require it in main.js?then you need’t to think about removing these style tags.