capo.js for Nuxt

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions][github-actions-src]][github-actions-href]
[![Codecov][codecov-src]][codecov-href]

> capo.js implementation for Nuxt 3

- ✨  Changelog
- ▶️  Online playground

What is Capo.js

Capo.js is a small snippet that identifies ways to boost the (perceived) performance of your page, by changing the order of elements in the page's section.

Features

- ✨ validates your in dev mode and when prerendering pages
- 🔎 visualises optimal head configuration

Installation

Install and add nuxt-capo to your nuxt.config.

``bash
npx nuxi@latest module add capo
`

`js
export default defineNuxtConfig({
modules: ['nuxt-capo'],
})
`

Usage

That's it! You should now see debugging info and suggestions when server rendering your routes

| | |
| - | - |
| !Optimal head configuration| !Suggestions for head |

Credits

Thanks to @rviscomi for making capo.js!

💻 Development

- Clone this repository
- Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
- Install dependencies using pnpm install
- Stub module with pnpm dev:prepare
- Run pnpm dev` to start playground in development mode

License

Made with ❤️

Published under the MIT License.

[npm-version-src]: https://img.shields.io/npm/v/nuxt-capo?style=flat-square
[npm-version-href]: https://npmjs.com/package/nuxt-capo
[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-capo?style=flat-square
[npm-downloads-href]: https://npmjs.com/package/nuxt-capo
[github-actions-src]: https://img.shields.io/github/actions/workflow/status/danielroe/nuxt-capo/ci.yml?branch=main
[github-actions-href]: https://github.com/danielroe/nuxt-capo/actions?query=workflow%3Aci
[codecov-src]: https://img.shields.io/codecov/c/gh/danielroe/nuxt-capo/main?style=flat-square
[codecov-href]: https://codecov.io/gh/danielroe/nuxt-capo