Build prevented by warning about missing id property.

[Akaryatrh]

Software version

OS: OSX Node: 10.1.0 NPM: 6.1.0 Any other software related to your bug: Quasar 0.17.2

What did you get as the error?

A warning saying:

⚠️ Your newer Quasar CLI requires a minor change to the root component: /my-local-path/App.vue

Please add: id="q-app" (or write #q-app if using Pug) to the outermost HTML element of the template.

What were you expecting?

Template file linked in vue file should be checked.

What steps did you take, to get the error?

I just migrated from 0.16 to 0.17.2 and when I'm trying to start the application, I have now the above warning.

We are decoupling the App vue into multiple file, but your script doesn't test this case. Here's what looks like our App.vue file:

<template src="./components/app/app.html"></template>
<script src="./components/app/app.script"></script>
<style
  scoped
  lang="stylus"
  src="./components/app/app.styl">
</style>

[rstoenescu]

Hi,

This is a pretty custom setup, it kind of defeats the purpose of Vue SFC (single file component), but in any case, Quasar CLI can't possibly handle 100% of the scenarios. But it should still make sure (or at least convey to the developer) that your App.vue must have id="q-app" on that DIV.

In your case, you can simply add <!-- id="q-app" --> before the template tag and CLI won't complain anymore. Will see in the future if this specific case can be taken into consideration automatically without holding down performance.

Thank you and sorry for the inconvenience. Here's how your specific App.vue should look like:

<!-- id="q-app" -->
<template src="./components/app/app.html"></template>
<script src="./components/app/app.script"></script>
<style
  scoped
  lang="stylus"
  src="./components/app/app.styl">
</style>

[Akaryatrh]

Thanks for this simple tip @rstoenescu!