“Unknown custom element” with separate HTML files



  • Until recently, I used to break up my Vue components in several files.

    App.vue

    <template src="./App.html" />
    <script src="./App.js"></script>
    

    App.html

    <div style="font-size: 2em">
      <q-icon name="warning" />
    </div>
    

    It worked fine for months, but for some reason now I’m getting lots of “Unknown custom element” errors now. Embedding the template again seems to solve the problem:

    App.vue

    <template>
      <div style="font-size: 2em">
        <q-icon name="warning" />
      </div>
    </template>
    <script src="./App.js"></script>
    

    Seems like this problem was introduced in some recent Vue or Quasar build, but I can’t be sure. The odd thing is that it happend only after I started choosing Sass with SCSS syntax instead of Stylus when creating new projects using the Quasar plugin (vue add quasar). Go figure…

    I’m using Vue 2.6.10 and Quasar 1.5.11. I’ve posted a similar question in the Vue forum. Thanks for any help!


Log in to reply