title: Vue.js: Cannot read property 'classList' of null
body: <p>I'm using a single file component style Vue.js backed by a .NET 4.5 server. </p>
  
  <p>Here is my app.js (entry point):  </p>
  
  <pre><code>import Vue from 'vue';
  import home from './components/home.vue';
  import Quasar from 'quasar';
  Vue.use(Quasar);
  
  // Import CSS from 'quasar.css';
  import 'quasar/dist/quasar.css';
  
  const application = new Vue({
      el: '#app',
      render: h =&gt; h(home)
  });
  </code></pre>
  
  <p>Here is my home.vue:  </p>
  
  <pre><code>&lt;template&gt;
  
      &lt;div&gt;
  
          &lt;h1&gt;{{title}}&lt;/h1&gt;
          &lt;q-input outlined label="Input 1" v-model="text" /&gt;
          &lt;q-input outlined label="Input 2" placeholder="I am a Quasar input element" v-model="text2" /&gt;
  
          &lt;div&gt;{{ text }} &lt;/div&gt;
          &lt;div&gt;{{ text2 }} &lt;/div&gt;
  
      &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
  
      import QInput from 'quasar';
      import patient from './patient.vue';
          export default {
  
              data() {
  
                  return {
  
                      text: ''
                      , text2: ''
                      , title: "Welcome!"
                  }
              },
              methods: {
  
              },
              components: {
                  'patient': patient,
                  'q-input' : QInput
              }
          }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The 'patient' vue is never rendered, so I will leave it out for now. If you believe it is relevant please let me know and I can include it.  </p>
  
  <p>I have a layout and a home index file constructed server side. The HTML resulting looks like this:  </p>
  
  <p><a href="https://i.stack.imgur.com/FMxx5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FMxx5.png" alt="Vue App Elements"></a></p>
  
  <p>Now, its failing as such:  </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'classList' of null
      at bodyInit (body.js:52)
      at Object.install (body.js:86)
      at Object.eval [as install] (install.js:39)
      at Object.install (index.esm.js:327)
      at Function.Vue.use (vue.runtime.esm.js:5091)
      at eval (webpack:///./App_Client/app.js?:13)
      at Module../App_Client/app.js (client-app.js:97)
      at __webpack_require__ (client-app.js:20)
      at eval (webpack:///multi_./App_Client/app.js?:1)
      at Object.0 (client-app.js:3689)  
  </code></pre>
  
  <p>In body.js, it fails here:  </p>
  
  <pre><code>document.body.classList.add.apply(document.body.classList, cls)
  </code></pre>
  
  <p>I know there are some similar questions, but generally people are trying to do things like GetElementById(); on elements that don't exist. My body clearly exists, both in code and in the elements view. I am using webpack. I'm a bit confused as to where this error is coming from. </p>