title: Problem with adding src attribute to template tag in Vuejs + Laravel
body: <p>I started a project with Vuejs and Laravel using Laravel Mix.
  It works for the most part, but when I'm trying to divide my component up into separate files and load them in the .vue file like this:</p>
  <pre><code>&lt;template src=&quot;./comp.html&quot;&gt;&lt;/template&gt;
  &lt;script src=&quot;./comp.ts&quot; lang=&quot;ts&quot;&gt;&lt;/script&gt;
  &lt;style src=&quot;./comp.scss&quot; scoped lang=&quot;scss&quot;&gt;&lt;/style&gt;
  </code></pre>
  <p>I'm getting this error:</p>
  <pre><code> error  in ./resources/js/components/comp/comp.html?vue&amp;type=template&amp;id=c2090546&amp;scoped=true
  
  Module Error (from ./node_modules/vue-loader/dist/templateLoader.js):
  
  VueCompilerError: Unquoted attribute value cannot contain U+0022 (&quot;), U+0027 ('), U+003C (&lt;), U+003D (=), and U+0060 (`).
  at /home/geordyd/projects/pension-tool/htdocs/resources/js/components/comp/comp.html:2:35
  1  |  // Module
  2  |  var code = &quot;&lt;section class=\&quot;comp\&quot;&gt;\n  &lt;h1&gt;comp Component&lt;/h1&gt;\n&lt;/section&gt;\n\n&quot;;
     |                                    ^
  3  |  // Exports
  4  |  module.exports = code;
  </code></pre>
  <p>I get this output in the browser:</p>
  <p><a href="https://i.stack.imgur.com/WmMW1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WmMW1.png" alt="enter image description here" /></a></p>
  <p>package.json:</p>
  <pre><code>{
      &quot;private&quot;: true,
      &quot;scripts&quot;: {
          &quot;development&quot;: &quot;mix&quot;,
          &quot;watch&quot;: &quot;mix watch&quot;,
          &quot;watch-poll&quot;: &quot;mix watch -- --watch-options-poll=1000&quot;,
          &quot;hot&quot;: &quot;mix watch --hot&quot;,
          &quot;production&quot;: &quot;mix --production&quot;
      },
      &quot;devDependencies&quot;: {
          &quot;@vue/compiler-sfc&quot;: &quot;^3.0.3&quot;,
          &quot;axios&quot;: &quot;^0.19&quot;,
          &quot;bootstrap&quot;: &quot;^4.5.3&quot;,
          &quot;cross-env&quot;: &quot;^7.0.2&quot;,
          &quot;jquery&quot;: &quot;^3.5.1&quot;,
          &quot;laravel-mix&quot;: &quot;^6.0.0-beta.14&quot;,
          &quot;lodash&quot;: &quot;^4.17.19&quot;,
          &quot;node-sass&quot;: &quot;^5.0.0&quot;,
          &quot;postcss&quot;: &quot;^8.1.10&quot;,
          &quot;resolve-url-loader&quot;: &quot;^3.1.0&quot;,
          &quot;sass&quot;: &quot;^1.29.0&quot;,
          &quot;sass-loader&quot;: &quot;^10.1.0&quot;,
          &quot;vue-class-component&quot;: &quot;^8.0.0-0&quot;,
          &quot;vue-loader&quot;: &quot;^16.0.1&quot;
      },
      &quot;dependencies&quot;: {
          &quot;@types/webpack-env&quot;: &quot;^1.16.0&quot;,
          &quot;@vue/cli-plugin-typescript&quot;: &quot;~4.5.0&quot;,
          &quot;@vue/cli-service&quot;: &quot;~4.5.0&quot;,
          &quot;core-js&quot;: &quot;^3.6.5&quot;,
          &quot;ts-loader&quot;: &quot;^8.0.11&quot;,
          &quot;typescript&quot;: &quot;~3.9.3&quot;,
          &quot;vue&quot;: &quot;^3.0.3&quot;,
          &quot;vue-cli-plugin-vue-next&quot;: &quot;^0.1.4&quot;
      }
  }
  </code></pre>
  <p>tsconfig.json:</p>
  <pre><code>{
      &quot;compilerOptions&quot;: {
          &quot;target&quot;: &quot;esnext&quot;,
          &quot;module&quot;: &quot;esnext&quot;,
          &quot;strict&quot;: true,
          &quot;jsx&quot;: &quot;preserve&quot;,
          &quot;importHelpers&quot;: true,
          &quot;moduleResolution&quot;: &quot;node&quot;,
          &quot;experimentalDecorators&quot;: true,
          &quot;skipLibCheck&quot;: true,
          &quot;esModuleInterop&quot;: true,
          &quot;allowSyntheticDefaultImports&quot;: true,
          &quot;sourceMap&quot;: true,
          &quot;baseUrl&quot;: &quot;.&quot;,
          &quot;types&quot;: [
              &quot;webpack-env&quot;
          ]
      },
      &quot;types&quot;: [
          &quot;webpack-env&quot;
      ],
      &quot;include&quot;: [
          &quot;resources/js/**/*&quot;
      ],
      &quot;exclude&quot;: [
          &quot;node_modules&quot;
      ]
  }
  </code></pre>
  <p>webpack.mix.js:</p>
  <pre><code>const mix = require('laravel-mix');
  
  mix.ts('resources/js/app.ts', 'public/js').vue()
  .sass('resources/sass/app.scss', 'public/css');
  </code></pre>
  <p>I tried downgrading the vue-loader package, but it did not work.</p>
  <p>Changing comp.html to <code>var code = '&lt;section class=&quot;comp&quot;&gt;&lt;br&gt;&lt;h1&gt;comp Component&lt;/h1&gt;&lt;br&gt;&lt;/section&gt;&lt;br&gt;&lt;br&gt;'</code> gives this as output in the browser:</p>
  <p><a href="https://i.stack.imgur.com/V5gfJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V5gfJ.png" alt="enter image description here" /></a></p>