nuxt-community / Emotion Module
Licence: mit
๐ Emotion module for Nuxt.js
Stars: โญ 47
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Emotion Module
Styled-Responsive-Media-Queries
Responsive Media Queries for Emotion styled or styled-components โ Standard size from Chrome DevTools.
Stars: โญ 33 (-29.79%)
Mutual labels: emotion, css-in-js
satchel
The little bag of CSS-in-JS superpowers
Stars: โญ 14 (-70.21%)
Mutual labels: emotion, css-in-js
spring-keyframes
โ๏ธ1.4kb library to generate css keyframes in css-in-js based on a spring algorithm, with emotion
Stars: โญ 65 (+38.3%)
Mutual labels: emotion, css-in-js
Design System Utils
๐ฉโ๐จ Access your design tokens with ease
Stars: โญ 465 (+889.36%)
Mutual labels: css-in-js, emotion
react-awesome-reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Stars: โญ 564 (+1100%)
Mutual labels: emotion, css-in-js
Emotion
๐ฉโ๐ค CSS-in-JS library designed for high performance style composition
Stars: โญ 14,177 (+30063.83%)
Mutual labels: css-in-js, emotion
Styled Breakpoints
Simple and powerful tool for creating breakpoints in styled components and emotion. ๐
Stars: โญ 428 (+810.64%)
Mutual labels: css-in-js, emotion
Twin.macro
๐ฆนโโ๏ธ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Stars: โญ 5,137 (+10829.79%)
Mutual labels: css-in-js, emotion
Xwind
Tailwind CSS as a templating language in JS and CSS-in-JS
Stars: โญ 249 (+429.79%)
Mutual labels: css-in-js, emotion
Styled Tools
Useful interpolated functions for CSS-in-JS
Stars: โญ 761 (+1519.15%)
Mutual labels: css-in-js, emotion
Styled Ppx
Typed styled components in Reason, OCaml and ReScript
Stars: โญ 236 (+402.13%)
Mutual labels: css-in-js, emotion
tsstyled
A small, fast, and simple CSS-in-JS solution for React.
Stars: โญ 52 (+10.64%)
Mutual labels: emotion, css-in-js
Styled Components Vs Emotion
a short doc comparing the popular CSS-in-JS libraries styled-components and emotion
Stars: โญ 204 (+334.04%)
Mutual labels: css-in-js, emotion
benefit
โจ Utility CSS-in-JS library that provides a set of low-level, configurable, ready-to-use styles
Stars: โญ 51 (+8.51%)
Mutual labels: emotion, css-in-js
Vue Emotion
Seamlessly use emotion (CSS-in-JS) with Vue.js
Stars: โญ 173 (+268.09%)
Mutual labels: css-in-js, emotion
React Awesome Reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Stars: โญ 346 (+636.17%)
Mutual labels: css-in-js, emotion
Facepaint
Responsive style values for css-in-js.
Stars: โญ 523 (+1012.77%)
Mutual labels: css-in-js, emotion
@nuxtjs/emotion
Features
- Server Side Rendering (SSR)
- Critical Path CSS with Hydration
- Hot Reloads (HMR)
- Style inlining
- Minification
- Dead Code Elimination
- Source Maps
- Contextual Class Names
Setup
IMPORTANT NOTE: This module requires new hooks that works with nuxt 2.5.0
or nuxt-edge
only.
- Add
@nuxtjs/emotion
dependency to your project
yarn add @nuxtjs/emotion # or npm install @nuxtjs/emotion
- Add
@nuxtjs/emotion
to themodules
section ofnuxt.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
ornpm install
- Start development server using
npm run dev
License
Copyright (c) Nuxt Community
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].