Learn Nuxt with a Collection of 100+ Tips!

emotion
@nuxtjs/emotion

The Next Generation of CSS-in-JS for Nuxt

emotion

@nuxtjs/emotion

npm version npm downloads circle ci coverage License

Emotion module for Nuxt.js

Features

  • Server Side Rendering (SSR)
  • Critical Path CSS with Hydration
  • Hot Reloads (HMR)
  • Style inlining
  • Minification
  • Dead Code Elimination
  • Source Maps
  • Contextual Class Names

📖 Release Notes

Setup

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

Nuxt 2

Nuxt 2 is supported with @nuxtjs/emotion@0.1.0, Documentation is on https://github.com/nuxt-community/emotion-module/tree/v0 and the code on the v0 branch.

Development

  • Clone this repository
  • Install dependencies using yarn install or npm install
  • Start development server using npm run dev

License

MIT License

Copyright (c) Nuxt Community