After starting a project with Vuejs and Laravel using Laravel Mix, I encountered an issue. When attempting to split my component into separate files and load them in the .vue file as follows:
<template src="./comp.html"></template>
<script src="./comp.ts" lang="ts"></script>
<style src="./comp.scss" scoped lang="scss"></style>
An error was triggered:
error in ./resources/js/components/comp/comp.html?vue&type=template&id=c2090546&scoped=true
Module Error (from ./node_modules/vue-loader/dist/templateLoader.js):
VueCompilerError: Unquoted attribute value cannot contain U+0022 ("), U+0027 ('), U+003C (<), 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 = "<section class=\"comp\">\n <h1>comp Component</h1>\n</section>\n\n";
| ^
3 | // Exports
4 | module.exports = code;
The browser displayed this output:
https://i.stack.imgur.com/WmMW1.png
Included below are excerpts from package.json, tsconfig.json, and webpack.mix.js along with attempts made to resolve the issue.