@nuxtjs/emotion

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

IMPORTANT NOTE: This module requires new hooks that works with nuxt 2.5.0 or nuxt-edge only.

1. Add @nuxtjs/emotion dependency to your project

yarn add @nuxtjs/emotion # or npm install @nuxtjs/emotion

2. Add @nuxtjs/emotion to the modules section of nuxt.config.js

export default {
  modules: [
    // Simple usage
    '@nuxtjs/emotion',

    // With options
    ['@nuxtjs/emotion', { /* module options */ }]
  ]
}

Using top level options

export default {
  modules: [
    '@nuxtjs/emotion'
  ],
  emotion: {
    /* module options */
  }
}

Options

ssr

• Default: 'critical'

Can be 'critical' or 'render' or false.

In the critical mode, module automatically injects window.$emotionSSRIds for hydration.

babel

• Default: { inline: true }

Options for babel-plugin-emotion integration.

Can be disabled by setting to false.

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