title: Is it possible to put a CSS template inside a Vue component?
body: <p>I've created the following Vue component:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var loading = new Vue({
      el: "#loading_id",
      components:{
          'loading' : {
              template : `
                  &lt;div&gt;
                      &lt;div id="screenLoading" class="background"&gt;
                          &lt;div class="loading"&gt;
                              &lt;div class="obj"&gt;&lt;/div&gt;
                              &lt;div class="obj"&gt;&lt;/div&gt;
                              &lt;div class="obj"&gt;&lt;/div&gt;
                              &lt;div class="obj"&gt;&lt;/div&gt;
                              &lt;div class="obj"&gt;&lt;/div&gt;
                              &lt;div class="obj"&gt;&lt;/div&gt;
                              &lt;div class="obj"&gt;&lt;/div&gt;
                              &lt;div class="obj"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
               `,
              methods: {
                  startLoading: function() {
                      const load = document.getElementById("screenLoading");
                      load.classList.add('show')
                  },
                  stopLoading: function(){
                      const load = document.getElementById("screenLoading");
                      load.classList.remove('show')
                  }
              }
          }
      }
  });
  
  loading.$children[0].startLoading()
  setTimeout(() =&gt; {
      loading.$children[0].stopLoading()
  }, 3500);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.background {
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0,.5);
      position: fixed;
      top: 0px;
      left: 0px;
      z-index: 2000;
      display: none;
      justify-content: center;
      align-items: center;
  }
  
  .background.show {
      display: flex;
  }
  
  .loading{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 40px;
      display: flex;
      align-items: center;
  }
  
  .obj{
      width: 12px;
      height: 70px;
      background: white;
      margin: 0 3px;
      border-radius: 10px;
      animation: loading 0.8s infinite;
  }
  
  .obj:nth-child(2){
      animation-delay: 0.1s;
  }
  .obj:nth-child(3){
      animation-delay: 0.2s;
  }
  .obj:nth-child(4){
      animation-delay: 0.3s;
  }
  .obj:nth-child(5){
      animation-delay: 0.4s;
  }
  .obj:nth-child(6){
      animation-delay: 0.5s;
  }
  .obj:nth-child(7){
      animation-delay: 0.6s;
  }
  .obj:nth-child(8){
      animation-delay: 0.7s;
  }
  
  @keyframes loading{
      0%{
          height: 0;
      }
      50%{
          height: 70px;
      }
      100%{
          height: 0;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue"&gt;&lt;/script&gt;
  &lt;loading id="loading_id"&gt;&lt;/loading&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>It works perfectly fine, its purpose is to be a loading screen for me to use when I have to make something wait on my webpage. However, instead of loading the CSS from an external CSS file with the <code>&lt;style&gt;</code> tag on the main HTML, I'd like to load my CSS directly from inside Vue, just like I did with the HTML on the <code>template</code> variable. Basically, it'd be something like the following:</p>
  <pre class="lang-js prettyprint-override"><code>var loading = new Vue({
      el: &quot;#loading_id&quot;,
      components:{
          'loading' : {
              template : `myHTML template`,
              cssTemplate: `myCSS template`,
              methods: {
                  // my methods
              }
          }
      }
  });
  </code></pre>
  <p>Is it possible to do on Vue? Can I write CSS templates inside a Vue component?</p>
  <p>I know I also can load small pieces of CSS styles with Vue as described <a href="https://stackoverflow.com/a/68778585/14739472">here</a>, but in my case, I'd like to keep the classes and ids declaration as they are in a normal CSS file...</p>