Add Core Web Vital rules to plugin:nuxt/recommended (RFC)

[housseindjirdeh]

eslint-plugin-nuxt does a great job introducing Nuxt.js-specific rules to a developer's ESLint workflow. This RFC proposes adding additional rules that are also aimed to enforce useful defaults but with a focus to improving Core Web Vitals.

The rules proposed to be added to the plugin:nuxt/recommended config are as follows:

• no-html-link-for-pages: Disallow usage of HTML <a> tag to navigate to internal links (i.e. use <NuxtLink> to navigate to other pages)
• no-sync-scripts: Disallow synchronous scripts (i.e. use asyncData/fetch for component or page level data)
• no-unwanted-polyfillio: Disallow inclusion of duplicate polyfills through Polyfill.io that already supported by Nuxt.js

All these rules can be set to error within the recommended configuration of the plugin. In addition, the following rules can also be added as part of this proposal but will turned off by default:

• no-img-element: Disallow usage of HTML <img> tag for images (i.e. use <nuxt-img> instead)

Any feedback will be appreciated! Will love to hear more suggestions of rules that can be added as well as if any of these do not make sense for whatever reason :)

---

Note: All of these same rules have been added to eslint-plugin-next to provide a similar set of default checks for Next.js and the feedback has been overwhelmingly positive. It would be great to see something alike that Nuxt.js developers can use!

Further reading: web.dev/conformance