Vuejs hiding style tag from head | Laravel-vuejs application

0
votes

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

2
javascriptlaravelvue.jswebpackvuejs2

2 Answers

3
votes

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

0
votes

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.