# eslint-plugin-quasar

**Repository Path**: lemon_engine/eslint-plugin-quasar

## Basic Information

- **Project Name**: eslint-plugin-quasar
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-29
- **Last Updated**: 2021-05-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# eslint-plugin-quasar [WIP]

> **~~Currently, in this phase of development, eslint-plugin-quasar is concentrating on helping to convert legacy Quasar v0.17+ to v1 Quasar ONLY.~~**

> **Starting with 1.0.0-alpha.10, eslint-plugin-quasar now supports v1+ with the `quasar/no-invalid-props` rule.** More information below...

> ** The rule `quasar/check-valid-props` has been deprecated. Use the rule `quasar/no-invalid-props` instead.

Help us test this plugin. If you see any issues, please file an [issue](https://github.com/quasarframework/eslint-plugin-quasar/issues).

Also, expect more to come. We have plans for even more Quasar support to help streamline your development efforts.

## Install

Prerequisites: Node.js (>=8.10), npm (>=5.6.0), yarn (>=1.6.0)

```bash
$ yarn add --dev eslint-plugin-quasar

# or

$ npm install --save-dev eslint-plugin-quasar
```

## Usage


The following changes need to be made to your `.eslintrc.js` configuration file.

Modification to the `plugins` section:
```js
{
  "plugins": [
    "quasar"
  ]
}
```

### v.17

Modification to  the `extends` section:
```js
{
  "extends": [
    "plugin:quasar/legacy"
  ]
}
```

Modification to  the `rules` section:
```js
{
  "rules": [
    'quasar/no-legacy-components': "error",
    'quasar/no-legacy-css': "error",
    'quasar/no-legacy-directives': "error",
    'quasar/no-legacy-properties': "error",
    'quasar/no-legacy-plugins': "error"
  ]
}
```

### v1+

Modification to  the `extends` section (for v1+):
```js
{
  "extends": [
    "plugin:quasar/standard"
  ]
}
```

Modification to  the `rules` section:
```js
{
  "rules": [
    'quasar/no-invalid-props': "error",
    'quasar/no-invalid-qfield-usage': "error"
  ]
}
```

### Turning on the Rules

The number zero (0) above tells eslint to turn off the rule. To turn it on use the following numbers:
1. 1 - display output as a warning
2. 2 - display output as an error

Alternatively, you can use 'off', 'warn' or 'error' instead of the number values.

Make sure you save the configuration file.

## A Note About ESLint
If you have `eslint` installed globally, then your eslint plugins **must** also be installed globally. For better control, it is best to install `eslint` locally and your plugins locally with it.

## Testing
To test your `eslint` configuration against your legacy Quasar project, run this from the command-line:
```bash
./node_modules/eslint/bin/eslint.js src/**
```

### Results
You may see results that look like this (for v.17):

```bash
/home/me/my-project/src/pages/About.vue
   5:9  error  'q-card-title' has been replaced with 'q-card-section'
quasar/no-legacy-components
   8:9  error  'q-card-separator' has been replaced with 'q-separator'
quasar/no-legacy-components
   9:9  error  'q-card-main' has been replaced with 'q-card-section'
quasar/no-legacy-components

/home/me/my-project/src/pages/Archive.vue
     3:5   error  'q-window-resize-observable' has been
removed                     quasar/no-legacy-components
    12:17  error  'q-resize-observable' has been replaced with
'q-resize-observer'  quasar/no-legacy-components
    32:17  error  'q-progress' has been replaced with
'q-linear-progress'           quasar/no-legacy-components
    67:17  error  'q-progress' has been replaced with
'q-linear-progress'           quasar/no-legacy-components
    82:11  error  'q-progress' has been replaced with
'q-linear-progress'           quasar/no-legacy-components
   145:9   error  'q-resize-observable' has been replaced with
'q-resize-observer'  quasar/no-legacy-components
   261:19  error  'q-popover' has been replaced with
'q-menu'                       quasar/no-legacy-components
   265:23  error  'q-list-header' has been replaced with
'q-item-label'             quasar/no-legacy-components
   266:23  error  'q-item-separator' has been replaced with
'q-separator'           quasar/no-legacy-components
   330:19  error  'q-datetime' has been replaced with 'q-date,
q-time'              quasar/no-legacy-components
...
✖ 89 problems (89 errors, 0 warnings)
```

## Fixing Issues
Currently, **eslint-plugin-quasar** can fix some issues for you (for v0.17), but not all. To do this, you have to use the `--fix` command-line option with `eslint`.

What will be fixed are any legacy css class usage to be converted to the new name as per the [Quasar Docs Upgrade Guide](https://quasar.dev/start/upgrade-guide#CSS). As well, it can also fix any legacy directive name changes as per the [Quasar Docs Upgrade Guide](https://quasar.dev/start/upgrade-guide#Directives).

Also, it should be noted that **eslint-plugin-quasar** currently has no support for legacy `QField` and as such, this should be a manual process.

# Tests
If you are interested in the output of the testing, you can view the results below (for v.17 and v1.+):

```
$ yarn mocha tests --recursive
yarn run v1.22.4
$ .../eslint-plugin-quasar/node_modules/.bin/mocha tests --recursive


  check-valid-props
    valid
      ✓ <template>
  <div class="q-pa-md q-gutter-md" style="font-size: 36px">
    <q-icon name="settings_remote" class="text-brown cursor-pointer">
      <q-popup-proxy transition-show="flip-up" transition-hide="flip-down">
        <q-banner class="bg-brown text-white">
          <template v-slot:avatar>
            <q-icon name="signal_wifi_off" />
          </template>
          You have lost connection to the internet. This app is offline.
        </q-banner>
      </q-popup-proxy>
    </q-icon>

    <q-icon name="perm_data_setting" class="text-purple cursor-pointer">
      <q-popup-proxy :offset="[10, 10]">
        <q-banner class="bg-purple text-white">
          <template v-slot:avatar>
            <q-icon name="signal_wifi_off" />
          </template>
          You have lost connection to the internet. This app is offline.
        </q-banner>
      </q-popup-proxy>
    </q-icon>
  </div>
</template>
 (107ms)
      ✓ <template>
  <div class="q-pa-md">
    <q-input filled v-model="input" mask="date" :rules="['date']">
      <template v-slot:append>
        <q-icon name="event" class="cursor-pointer">
          <q-popup-proxy :breakpoint="600">
            <q-date v-model="input" />
          </q-popup-proxy>
        </q-icon>
      </template>
    </q-input>
  </div>
</template>

      ✓ <template>
  <div class="q-pa-md">
    <q-btn push color="purple" label="Handles right-click">
      <q-popup-proxy context-menu>
        <q-banner>
          <template v-slot:avatar>
            <q-icon name="signal_wifi_off" color="primary" />
          </template>
          You have lost connection to the internet. This app is offline.
        </q-banner>
      </q-popup-proxy>
    </q-btn>
  </div>
</template>


      ✓ <template><q-btn flat color="primary" :label="Flat" @click="onClick" /></template>
      ✓ <template><q-btn class="glossy" round color="deep-orange" icon="local_activity" /></template>
      ✓ <template><q-btn dense color="primary" :size="size" :label="`Size xl`" /></template>
      ✓ <template><q-btn type="submit" :loading="submitting" label="Save" class="q-mt-md" color="teal"><template v-slot:loading><q-spinner-facebook /></template></q-btn></template>
      ✓ <template><q-popup-proxy transition-show="scale"></q-popup-proxy></template>
      ✓ <template>
  <div class="q-pa-md" style="max-width: 350px">
    <q-list ref="list">
      <q-expansion-item popup default-opened icon="mail" label="Inbox" caption="5 unread emails">
        <q-separator />
        <q-card>
          <q-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
            commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </q-card-section>
        </q-card>
      </q-expansion-item>
      <q-expansion-item popup icon="send" label="Outbox" caption="Empty">
        <q-separator />
        <q-card>
          <q-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
            commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </q-card-section>
        </q-card>
      </q-expansion-item>
      <q-expansion-item popup icon="drafts" label="Draft" caption="Draft a new email">
        <q-separator />
        <q-card>
          <q-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
            commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </q-card-section>
        </q-card>
      </q-expansion-item>
    </q-list>
  </div>
</template>
      ✓ <template>
  <div class="q-pa-md row items-start q-gutter-md">
    <q-card class="my-card">
      <q-card-section>
        {{ lorem }}
      </q-card-section>
    </q-card>

    <q-card
      class="my-card text-white" style="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)"
    >
      <q-card-section>
        <div class="text-h6">Our Changing Planet</div>
        <div class="text-subtitle2">by John Doe</div>
      </q-card-section>

      <q-card-section>
        {{ lorem }}
      </q-card-section>
    </q-card>

    <q-card dark bordered class="bg-grey-9 my-card">
      <q-card-section>
        <div class="text-h6">Our Changing Planet</div>
        <div class="text-subtitle2">by John Doe</div>
      </q-card-section>

      <q-separator dark inset />

      <q-card-section>
        {{ lorem }}
      </q-card-section>
    </q-card>

    <q-card flat bordered class="my-card">
      <q-card-section>
        <div class="text-h6">Our Changing Planet</div>
      </q-card-section>

      <q-card-section>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </q-card-section>

      <q-separator inset />

      <q-card-section>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </q-card-section>
    </q-card>
  </div>
</template>

    invalid
      ✓ <template><q-btn flat color="primary" label="Flat" boo-boo /></template>
      ✓ <template><q-btn class="glossy" round color="deep-orange" icon="local_activity" bad-prop="nothing" /></template>
      ✓ <template><q-btn dense color="primary" :size="size" :label="`Size xl`" :invalid-prop="invalid" /></template>
      ✓ <template><q-btn type="submit" :loading="submitting" label="Save" class="q-mt-md" color="teal" :wrong="wrong"><template v-slot:loading><q-spinner-facebook /></template></q-btn></template>

  no-invalid-props
    valid
      ✓ <template>
  <div class="q-pa-md q-gutter-md" style="font-size: 36px">
    <q-icon name="settings_remote" class="text-brown cursor-pointer">
      <q-popup-proxy transition-show="flip-up" transition-hide="flip-down">
        <q-banner class="bg-brown text-white">
          <template v-slot:avatar>
            <q-icon name="signal_wifi_off" />
          </template>
          You have lost connection to the internet. This app is offline.
        </q-banner>
      </q-popup-proxy>
    </q-icon>

    <q-icon name="perm_data_setting" class="text-purple cursor-pointer">
      <q-popup-proxy :offset="[10, 10]">
        <q-banner class="bg-purple text-white">
          <template v-slot:avatar>
            <q-icon name="signal_wifi_off" />
          </template>
          You have lost connection to the internet. This app is offline.
        </q-banner>
      </q-popup-proxy>
    </q-icon>
  </div>
</template>

      ✓ <template>
  <div class="q-pa-md">
    <q-input filled v-model="input" mask="date" :rules="['date']">
      <template v-slot:append>
        <q-icon name="event" class="cursor-pointer">
          <q-popup-proxy :breakpoint="600">
            <q-date v-model="input" />
          </q-popup-proxy>
        </q-icon>
      </template>
    </q-input>
  </div>
</template>

      ✓ <template>
  <div class="q-pa-md">
    <q-btn push color="purple" label="Handles right-click">
      <q-popup-proxy context-menu>
        <q-banner>
          <template v-slot:avatar>
            <q-icon name="signal_wifi_off" color="primary" />
          </template>
          You have lost connection to the internet. This app is offline.
        </q-banner>
      </q-popup-proxy>
    </q-btn>
  </div>
</template>


      ✓ <template><q-btn flat color="primary" :label="Flat" @click="onClick" /></template>
      ✓ <template><q-btn class="glossy" round color="deep-orange" icon="local_activity" /></template>
      ✓ <template><q-btn dense color="primary" :size="size" :label="`Size xl`" /></template>
      ✓ <template><q-btn type="submit" :loading="submitting" label="Save" class="q-mt-md" color="teal"><template v-slot:loading><q-spinner-facebook /></template></q-btn></template>
      ✓ <template><q-popup-proxy transition-show="scale"></q-popup-proxy></template>
      ✓ <template>
  <div class="q-pa-md" style="max-width: 350px">
    <q-list ref="list">
      <q-expansion-item popup default-opened icon="mail" label="Inbox" caption="5 unread emails">
        <q-separator />
        <q-card>
          <q-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
            commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </q-card-section>
        </q-card>
      </q-expansion-item>
      <q-expansion-item popup icon="send" label="Outbox" caption="Empty">
        <q-separator />
        <q-card>
          <q-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
            commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </q-card-section>
        </q-card>
      </q-expansion-item>
      <q-expansion-item popup icon="drafts" label="Draft" caption="Draft a new email">
        <q-separator />
        <q-card>
          <q-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, eius reprehenderit eos corrupti
            commodi magni quaerat ex numquam, dolorum officiis modi facere maiores architecto suscipit iste
            eveniet doloribus ullam aliquid.
          </q-card-section>
        </q-card>
      </q-expansion-item>
    </q-list>
  </div>
</template>
      ✓ <template>
  <div class="q-pa-md row items-start q-gutter-md">
    <q-card class="my-card">
      <q-card-section>
        {{ lorem }}
      </q-card-section>
    </q-card>

    <q-card
      class="my-card text-white" style="background: radial-gradient(circle, #35a2ff 0%, #014a88 100%)"
    >
      <q-card-section>
        <div class="text-h6">Our Changing Planet</div>
        <div class="text-subtitle2">by John Doe</div>
      </q-card-section>

      <q-card-section>
        {{ lorem }}
      </q-card-section>
    </q-card>

    <q-card dark bordered class="bg-grey-9 my-card">
      <q-card-section>
        <div class="text-h6">Our Changing Planet</div>
        <div class="text-subtitle2">by John Doe</div>
      </q-card-section>

      <q-separator dark inset />

      <q-card-section>
        {{ lorem }}
      </q-card-section>
    </q-card>

    <q-card flat bordered class="my-card">
      <q-card-section>
        <div class="text-h6">Our Changing Planet</div>
      </q-card-section>

      <q-card-section>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </q-card-section>

      <q-separator inset />

      <q-card-section>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </q-card-section>
    </q-card>
  </div>
</template>

    invalid
      ✓ <template><q-btn flat color="primary" label="Flat" boo-boo /></template>
      ✓ <template><q-btn class="glossy" round color="deep-orange" icon="local_activity" bad-prop="nothing" /></template>
      ✓ <template><q-btn dense color="primary" :size="size" :label="`Size xl`" :invalid-prop="invalid" /></template>
      ✓ <template><q-btn type="submit" :loading="submitting" label="Save" class="q-mt-md" color="teal" :wrong="wrong"><template v-slot:loading><q-spinner-facebook /></template></q-btn></template>

  no-invalid-qfield-usage
    valid
      ✓ <template><q-field label="Standard" stack-label><template v-slot:control><div class="self-center full-width no-outline" tabindex="0">Field content</div></template></q-field></template>
    invalid
      ✓ <template><q-field label="Standard" stack-label><q-select></q-select></q-field></template>
      ✓ <template><q-field label="Standard" stack-label><q-input></q-input></q-field></template>

  no-legacy-components
    valid
      ✓ <template><q-ajax-bar></q-ajax-bar></template>
      ✓ <template><q-avatar></q-avatar></template>
      ✓ <template><q-badge></q-badge></template>
      ✓ <template><q-banner></q-banner></template>
      ✓ <template><q-bar></q-bar></template>
      ✓ <template><q-breadcrumbs></q-breadcrumbs></template>
      ✓ <template><q-breadcrumbs-el></q-breadcrumbs-el></template>
      ✓ <template><q-btn></q-btn></template>
      ✓ <template><q-btn-dropdown></q-btn-dropdown></template>
      ✓ <template><q-btn-group></q-btn-group></template>
      ✓ <template><q-btn-toggle></q-btn-toggle></template>
      ✓ <template><q-card></q-card></template>
      ✓ <template><q-card-actions></q-card-actions></template>
      ✓ <template><q-card-section></q-card-section></template>
      ✓ <template><q-carousel></q-carousel></template>
      ✓ <template><q-carousel-constrol></q-carousel-constrol></template>
      ✓ <template><q-carousel-slide></q-carousel-slide></template>
      ✓ <template><q-chat-message></q-chat-message></template>
      ✓ <template><q-checkbox></q-checkbox></template>
      ✓ <template><q-chip></q-chip></template>
      ✓ <template><q-circular-progress></q-circular-progress></template>
      ✓ <template><q-color></q-color></template>
      ✓ <template><q-date></q-date></template>
      ✓ <template><q-dialog></q-dialog></template>
      ✓ <template><q-drawer></q-drawer></template>
      ✓ <template><q-editor></q-editor></template>
      ✓ <template><q-expansion-item></q-expansion-item></template>
      ✓ <template><q-fab></q-fab></template>
      ✓ <template><q-field></q-field></template>
      ✓ <template><q-file></q-file></template>
      ✓ <template><q-footer></q-footer></template>
      ✓ <template><q-form></q-form></template>
      ✓ <template><q-header></q-header></template>
      ✓ <template><q-icon></q-icon></template>
      ✓ <template><q-img></q-img></template>
      ✓ <template><q-infinite-scroll></q-infinite-scroll></template>
      ✓ <template><q-inner-loading></q-inner-loading></template>
      ✓ <template><q-input></q-input></template>
      ✓ <template><q-intersection></q-intersection></template>
      ✓ <template><q-item></q-item></template>
      ✓ <template><q-item-label></q-item-label></template>
      ✓ <template><q-item-section></q-item-section></template>
      ✓ <template><q-knob></q-knob></template>
      ✓ <template><q-layout></q-layout></template>
      ✓ <template><q-linear-progress></q-linear-progress></template>
      ✓ <template><q-list></q-list></template>
      ✓ <template><q-markup-table></q-markup-table></template>
      ✓ <template><q-menu></q-menu></template>
      ✓ <template><q-no-ssr></q-no-ssr></template>
      ✓ <template><q-option-group></q-option-group></template>
      ✓ <template><q-page></q-page></template>
      ✓ <template><q-page-container></q-page-container></template>
      ✓ <template><q-page-scroller></q-page-scroller></template>
      ✓ <template><q-page-sticky></q-page-sticky></template>
      ✓ <template><q-pagination></q-pagination></template>
      ✓ <template><q-parallax></q-parallax></template>
      ✓ <template><q-popup-edit></q-popup-edit></template>
      ✓ <template><q-popup-proxy></q-popup-proxy></template>
      ✓ <template><q-pull-to-refresh></q-pull-to-refresh></template>
      ✓ <template><q-radio></q-radio></template>
      ✓ <template><q-range></q-range></template>
      ✓ <template><q-rating></q-rating></template>
      ✓ <template><q-resize-observer></q-resize-observer></template>
      ✓ <template><q-responsive></q-responsive></template>
      ✓ <template><q-route-tab></q-route-tab></template>
      ✓ <template><q-scroll-area></q-scroll-area></template>
      ✓ <template><q-scroll-observer></q-scroll-observer></template>
      ✓ <template><q-select></q-select></template>
      ✓ <template><q-separator></q-separator></template>
      ✓ <template><q-skeleton></q-skeleton></template>
      ✓ <template><q-slide-item></q-slide-item></template>
      ✓ <template><q-slider></q-slider></template>
      ✓ <template><q-slide-transition></q-slide-transition></template>
      ✓ <template><q-space></q-space></template>
      ✓ <template><q-spinner></q-spinner></template>
      ✓ <template><q-spinner-audio></q-spinner-audio></template>
      ✓ <template><q-spinner-ball></q-spinner-ball></template>
      ✓ <template><q-spinner-bars></q-spinner-bars></template>
      ✓ <template><q-spinner-comment></q-spinner-comment></template>
      ✓ <template><q-spinner-cube></q-spinner-cube></template>
      ✓ <template><q-spinner-dots></q-spinner-dots></template>
      ✓ <template><q-spinner-facebook></q-spinner-facebook></template>
      ✓ <template><q-spinner-gears></q-spinner-gears></template>
      ✓ <template><q-spinner-grid></q-spinner-grid></template>
      ✓ <template><q-spinner-hearts></q-spinner-hearts></template>
      ✓ <template><q-spinner-hourglass></q-spinner-hourglass></template>
      ✓ <template><q-spinner-infinity></q-spinner-infinity></template>
      ✓ <template><q-spinner-ios></q-spinner-ios></template>
      ✓ <template><q-spinner-oval></q-spinner-oval></template>
      ✓ <template><q-spinner-pie></q-spinner-pie></template>
      ✓ <template><q-spinner-puff></q-spinner-puff></template>
      ✓ <template><q-spinner-radio></q-spinner-radio></template>
      ✓ <template><q-spinner-rings></q-spinner-rings></template>
      ✓ <template><q-spinner-tail></q-spinner-tail></template>
      ✓ <template><q-spitter></q-spitter></template>
      ✓ <template><q-step></q-step></template>
      ✓ <template><q-stepper></q-stepper></template>
      ✓ <template><q-stepper-navigation></q-stepper-navigation></template>
      ✓ <template><q-tab></q-tab></template>
      ✓ <template><q-table></q-table></template>
      ✓ <template><q-tab-panel></q-tab-panel></template>
      ✓ <template><q-tab-panels></q-tab-panels></template>
      ✓ <template><q-tabs></q-tabs></template>
      ✓ <template><q-tabs></q-tabs></template>
      ✓ <template><q-td></q-td></template>
      ✓ <template><q-th></q-th></template>
      ✓ <template><q-timeline></q-timeline></template>
      ✓ <template><q-timeline-entry></q-timeline-entry></template>
      ✓ <template><q-toggle></q-toggle></template>
      ✓ <template><q-toolbar></q-toolbar></template>
      ✓ <template><q-toolbar-title></q-toolbar-title></template>
      ✓ <template><q-tooltip></q-tooltip></template>
      ✓ <template><q-tr></q-tr></template>
      ✓ <template><q-tree></q-tree></template>
      ✓ <template><q-uploader></q-uploader></template>
      ✓ <template><q-uploader-add-trigger></q-uploader-add-trigger></template>
      ✓ <template><q-uploader-base></q-uploader-base></template>
      ✓ <template><q-video></q-video></template>
      ✓ <template><q-virtual-scroll></q-virtual-scroll></template>
    invalid
      ✓ <template><q-action-sheet></q-action-sheet></template>
      ✓ <template><q-alert></q-alert></template>
      ✓ <template><q-autocomplete></q-autocomplete></template>
      ✓ <template><q-card-title></q-card-title></template>
      ✓ <template><q-card-main></q-card-main></template>
      ✓ <template><q-card-media></q-card-media></template>
      ✓ <template><q-card-separator></q-card-separator></template>
      ✓ <template><q-chips-input></q-chips-input></template>
      ✓ <template><q-collapsible></q-collapsible></template>
      ✓ <template><q-color-picker></q-color-picker></template>
      ✓ <template><q-context-menu></q-context-menu></template>
      ✓ <template><q-date-picker></q-date-picker></template>
      ✓ <template><q-datetime></q-datetime></template>
      ✓ <template><q-item-main></q-item-main></template>
      ✓ <template><q-item-separator></q-item-separator></template>
      ✓ <template><q-item-side></q-item-side></template>
      ✓ <template><q-item-tile></q-item-tile></template>
      ✓ <template><q-jumbotron></q-jumbotron></template>
      ✓ <template><q-layout-drawer></q-layout-drawer></template>
      ✓ <template><q-layout-header></q-layout-header></template>
      ✓ <template><q-layout-footer></q-layout-footer></template>
      ✓ <template><q-list-header></q-list-header></template>
      ✓ <template><q-modal></q-modal></template>
      ✓ <template><q-modal-layout></q-modal-layout></template>
      ✓ <template><q-popover></q-popover></template>
      ✓ <template><q-progress></q-progress></template>
      ✓ <template><q-resize-observable></q-resize-observable></template>
      ✓ <template><q-scroll-observable></q-scroll-observable></template>
      ✓ <template><q-search></q-search></template>
      ✓ <template><q-spinner-mat></q-spinner-mat></template>
      ✓ <template><q-table-columns></q-table-columns></template>
      ✓ <template><q-tab-pane></q-tab-pane></template>
      ✓ <template><q-time-picker></q-time-picker></template>
      ✓ <template><q-window-resize-observable></q-window-resize-observable></template>

  no-legacy-css
    valid
      ✓ <template><div class="text-red-4"></div></template>
      ✓ <template><div class="rounded-borders"></div></template>
    invalid
      ✓ <template><div class="tertiary q-display-3 q-headline quote capitalize mat-only gutter-md"></div></template>
      ✓ <template><div class="tertiary"></div></template>
      ✓ <template><div class="bg-tertiary"></div></template>
      ✓ <template><div class="text-tertiary"></div></template>
      ✓ <template><div class="q-display-4"></div></template>
      ✓ <template><div class="q-display-3"></div></template>
      ✓ <template><div class="q-display-2"></div></template>
      ✓ <template><div class="q-display-1"></div></template>
      ✓ <template><div class="q-headline"></div></template>
      ✓ <template><div class="q-title"></div></template>
      ✓ <template><div class="q-subheading"></div></template>
      ✓ <template><div class="q-body-1"></div></template>
      ✓ <template><div class="q-body-2"></div></template>
      ✓ <template><div class="q-caption"></div></template>
      ✓ <template><div class="quote"></div></template>
      ✓ <template><div class="capitalize"></div></template>
      ✓ <template><div class="lowercase"></div></template>
      ✓ <template><div class="uppercase"></div></template>
      ✓ <template><div class="highlight-and-fade"></div></template>
      ✓ <template><div class="mat-only"></div></template>
      ✓ <template><div class="ios-only"></div></template>
      ✓ <template><div class="mat-hide"></div></template>
      ✓ <template><div class="ios-hide"></div></template>
      ✓ <template><div class="round-borders"></div></template>
      ✓ <template><div class="gutter-xs"></div></template>
      ✓ <template><div class="gutter-sm"></div></template>
      ✓ <template><div class="gutter-md"></div></template>
      ✓ <template><div class="gutter-lg"></div></template>
      ✓ <template><div class="gutter-xl"></div></template>

  no-legacy-directives
    valid
      ✓ <template><div v-close-popup></div></template>
      ✓ <template><div v-go-back></div></template>
      ✓ <template><div v-intersection></div></template>
      ✓ <template><div v-mutation></div></template>
      ✓ <template><div v-ripple></div></template>
      ✓ <template><div v-scroll></div></template>
      ✓ <template><div v-scroll-fire></div></template>
      ✓ <template><div v-touch-hold></div></template>
      ✓ <template><div v-touch-pan></div></template>
      ✓ <template><div v-touch-repeat></div></template>
      ✓ <template><div v-touch-swipe></div></template>
    invalid
      ✓ <template><div v-back-to-top></div></template>
      ✓ <template><div v-close-overlay></div></template>

  no-legacy-plugins
    valid
      ✓ <template>
  <q-list :dense="$q.screen.lt.md">
    <q-item>
      <q-item-section>John Doe</q-item-section>
    </q-item>

    <q-item>
      <q-item-section>Jane Doe</q-item-section>
    </q-item>
  </q-list>
</template>

export default {
  computed: {
    buttonColor () {
      return this.$q.screen.lt.md
        ? 'primary'
        : 'secondary'
    }
  }
}

    invalid
      ✓ <template>
  <q-list :dense="$q.actionSheet">
    <q-item>
      <q-item-section>John Doe</q-item-section>
    </q-item>

    <q-item>
      <q-item-section>Jane Doe</q-item-section>
    </q-item>
  </q-list>
</template>

export default {
  computed: {
    buttonColor () {
      return this.$q.actionSheet
        ? 'primary'
        : 'secondary'
    }
  }
}


  no-legacy-properties
    valid
      ✓ <template><q-avatar color="red" text-color="white" icon="directions" /></template>
    invalid
      ✓ <template><q-banner actions avatar color detail icon message text-color type></q-banner></template>
      ✓ <template><q-breadcrumbs color></q-breadcrumbs></template>
      ✓ <template><q-breadcrumbs-el color event></q-breadcrumbs-el></template>
      ✓ <template><q-btn no-ripple repeat-timeout wait-for-ripple></q-btn></template>
      ✓ <template><q-btn-dropdown dark-percentage no-ripple percentage popover-anchor popover-self repeat-timeout wait-for-ripple></q-btn-dropdown></template>
      ✓ <template><q-btn-toggle no-ripple wait-for-ripple></q-btn-toggle></template>
      ✓ <template><q-card color inline text-color></q-card></template>
      ✓ <template><q-carousel animation color easing handle-arrow-keys no-swipe quick-nav quick-nav-icon quick-nav-position swipe-easing thumbnails-horizontal thumbnails-icon></q-carousel></template>
      ✓ <template><q-checkbox checked-icon indeterminate-icon no-focus readonly unchecked-icon></q-checkbox></template>
      ✓ <template><q-chip avatar closable detail floating pointing small tag></q-chip></template>
      ✓ <template><q-dialog cancel color ok message options prevent-close prompt stack-buttons title></q-dialog></template>
      ✓ <template><q-drawer no-hide-on-route-change></q-drawer></template>
      ✓ <template><q-infinite-scroll handler inline></q-infinite-scroll></template>
      ✓ <template><q-inner-loading visible></q-inner-loading></template>
      ✓ <template><q-input after align before clear-value decimals float-label hide-underline initial-show-password inverted inverted-light lower-case max-height no-parent-field no-pass-toggle numeric-keyboard-toggle step upper-case warning></q-input></template>
      ✓ <template><q-item event highlight inset-separator link multiline separator sparse></q-item></template>
      ✓ <template><q-knob decimals line-width></q-knob></template>
      ✓ <template><q-linear-progress animate height keep-on-percentage></q-linear-progress></template>
      ✓ <template><q-list highlight inset-separator link no-border sparse striped striped-odd></q-list></template>
      ✓ <template><q-menu anchor-click disabled keep-on-screen></q-menu></template>
      ✓ <template><q-option-group no-parent-group readonly></q-option-group></template>
      ✓ <template><q-popup-edit keep-on-screen validate></q-popup-edit></template>
      ✓ <template><q-pull-to-refresh handler distance inline pull-message release-message refresh-icon refresh-message></q-pull-to-refresh></template>
      ✓ <template><q-radio checked-icon no-focus readonly unchecked-icon></q-radio></template>
      ✓ <template><q-range decimals error fill-handle-always square warning></q-range></template>
      ✓ <template><q-route-tab color count hidden hide></q-route-tab></template>
      ✓ <template><q-select after before chips chip-bg-color chips-color clear-value filter filter-placeholder float-label hide-underline inverted inverted-light no-parent-field popup-cover popup-max-height radio separator toggle warning></q-select></template>
      ✓ <template><q-slider decimals error fill-handle-always square warning></q-slider></template>
      ✓ <template><q-step default order subtitle></q-step></template>
      ✓ <template><q-stepper color contractable no-header-navigation></q-stepper></template>
      ✓ <template><q-tab color count default hidden hide></q-tab></template>
      ✓ <template><q-table selected-rows-label pagination-label></q-table></template>
      ✓ <template><q-tabs animated color glossy inverted panes-container-class position swipeable text-color two-line underline-color no-pane-border></q-tabs></template>
      ✓ <template><q-timeline no-hover responsive></q-timeline></template>
      ✓ <template><q-timeline-entry subtitle title></q-timeline-entry></template>
      ✓ <template><q-toggle no-focus readonly></q-toggle></template>
      ✓ <template><q-toolbar color glossy inverted shrink text-color></q-toolbar></template>
      ✓ <template><q-tooltip disabled></q-tooltip></template>
      ✓ <template><q-uploader additional-fields after align auto-expand before clear-value clearable error expand-style extensions float-label hide-underline hide-upload-button hide-upload-progress inverted inverted-light name no-content-type no-parent-field placeholder prefix stack-label suffix upload-factory url-factory warning></q-uploader></template>


  270 passing (678ms)

Done in 1.07s.
```