CSS optimization using critters for Nuxt

Overview

@nuxtjs/critters

npm version npm downloads Github Actions CI Codecov License

CSS optimization using critters for Nuxt

Features

  • Zero-configuration required
  • Enables CSS Extraction
  • Critical CSS automatically injected to page

Quick setup

  1. Add @nuxtjs/critters dependency to your project
yarn add @nuxtjs/critters # or npm install @nuxtjs/critters
  1. Add @nuxtjs/critters to the modules section of nuxt.config.js
{
  modules: [
    '@nuxtjs/critters',
  ],
}

How it works

Nuxt has a number of ways to optimize your CSS in production:

  1. Nuxt uses cssnano at the build step to minify CSS rules
  2. 📦 You can enable purgecss to remove unused CSS rules from your bundle.
  3. with @nuxtjs/critters you can now extract CSS files and load them separately, just inlining the CSS necessary to render the page.

Options

You can override the @nuxtjs/critters defaults like this:

// nuxt.config.js
export default {
  critters: {
    // Options passed directly to critters: https://github.com/GoogleChromeLabs/critters#critters-2
    config: {
      // Default: 'media'
      preload: 'swap'
    }
  }
}

Development

  1. Clone this repository
  2. Install dependencies using yarn install
  3. Start development server using yarn dev

License

MIT License

Comments
Releases(0.4.0)
Owner
Nuxt Community
Modules & Projects from Nuxt Community
Nuxt Community
:skull: An ancient tiny JS and CSS loader from the days before everyone had written one. Unmaintained.

LazyLoad Note: LazyLoad is no longer being maintained. I'm not responding to issues or pull requests, since I don't use this project anymore and don't

Ryan Grove 1.4k Jan 3, 2023
A sequence of smart contracts to practice gas optimization. These are used as practice assignments for RareSkills.io and the Udemy Gas Optimization Course

RareSkills Gas Puzzles Puzzles that are ready for you Distribute (hard) Array Sum (easy) Escrow EscrowV2 Mint Presale Require (easy) Staking Contribut

RareSkills 240 Dec 31, 2022
🦔 AstroJS GoogleChromeLabs critters integration. Inline your critical CSS with Astro.

astro-critters ?? This Astro integration brings critters to your Astro project. Critters is a plugin that inlines your app's critical CSS and lazy-loa

Nikola Hristov 33 Dec 11, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Blockchain Critters for Fighting, Breeding, Gambling for the Degens

Gotchis-Den Blockchain Critters for Fighting, Breeding, Gambling for the Degens. What Is It An experiment to create a blockchain-based game using game

Anthony Albertorio 3 Mar 22, 2022
Vantage is a web optimization tool designed for NEXTjs apps.

VANTAGE Vantage is a web optimization tool designed for NEXTjs apps. Uses Google lighthouse under the hood to determine key web vital scores and impro

OSLabs Beta 107 Dec 20, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
🌉 Experience Nuxt 3 features on existing Nuxt 2 projects

?? Nuxt Bridge Experience Nuxt 3 features on existing Nuxt 2 projects. Bridge is a forward-compatibility layer that allows you to experience many of t

Nuxt 180 Jan 5, 2023
Localtunnel module for Nuxt to allow remote/external access to your Nuxt development server.

Nuxt Localtunnel A Nuxt module for automatically running localtunnnel to externally expose your development instance of Nuxt to the outside world. All

null 14 Sep 7, 2022
Parse, validate and transform data with confidence in nuxt using zod

nuxt-parse A nuxt focused package to make data validation and parsing easy. This package follows the design philosophy of the article parse, don't val

sidebase 12 Jan 7, 2023
🕋Assets Compression module for Nuxt 3

@nuxt-modules/compression Assets Compression module for Nuxt 3 ✨ Release Notes ?? Read the documentation Features Nuxt 3 ready Assets Compression usin

Nuxt Modules 26 Nov 21, 2022
"Nuxt-like" routing in Quasar projects

Quasar App Extension auto-routing "Nuxt-like" routing in Quasar projects Install quasar ext add auto-routing Quasar CLI will retrieve it from the NPM

Luke Diebold 19 Dec 2, 2022
Tools for Dump NUXT JS Environment Config Through Browser Window Object

Introduction Nuxt JS is an open source javascript framework making web development simple and powerful. This tool is used to get environment configura

Agus Setya R 7 Sep 5, 2022
Authenticated server-side rendering with Nuxt 3 and Firebase 9

Authenticated server-side rendering with Nuxt 3 and Firebase 9.

Robert Soriano 51 Dec 23, 2022
Partytown integration for Nuxt

@nuxtjs/partytown Partytown integration for Nuxt Features ?? Zero-config required ?? Relocates resource intensive scripts into a web worker ⚡️ Speeds

Nuxt Community 217 Jan 5, 2023
⚡️ Minimal GraphQL Client + Code Generation for Nuxt

nuxt-graphql-client ⚡️ Minimal GraphQL Client + Code Generation for Nuxt ⚡️ Minimal GraphQL Client + Code Generation for Nuxt Features Zero Configurat

Dizzy 245 Dec 27, 2022
A nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory

This package is a nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory. Thanks to @derrickreimer for this framework agnostic library ❤️‍??.

wellá 6 Aug 18, 2022
Nuxt.js module to use Unleash toggle feature services

nuxt-unleash Nuxt.js module to use Unleash toggle feature services ?? Release Notes Features Use $unleash to access and handle your Unleash feature fl

Juanjo Conejero 15 Dec 3, 2022
Easy generation of OpenGraph & Twitter meta-tags in Nuxt 3 📋

nuxt-social-tags Easy generation of OpenGraph & Twitter meta-tags in Nuxt 3 ✨ Release Notes ?? Read the documentation Features Nuxt3 ready Composables

Conner 19 Dec 17, 2022