v-emotion v2.1.0

v-emotion

Use Emotion CSS-in-JS library with Vue.js

Installation

npm install v-emotion --save

Usage

Client/Server:

import Vue from 'vue';
import VueEmotion from 'v-emotion';

// Use as a Vue plugin.
Vue.use(VueEmotion);

Optional with theme

import Vue from 'vue';
import VueEmotion from 'v-emotion';

// Use as a Vue plugin.
Vue.use(VueEmotion, {
  theme: {
    palette: {
      primary: 'blue',
    },
  },
});

Directive:

<template>
  <div v-css="styles">
    Hello!
  </div>
</template>

<script>
export default {
  data() {
    return {
      styles: {
        color: 'red',
        padding: 10,
        // with a defined theme
        backgroundColor: this.$emotion.theme.palette.primary
      },
    };
  },
}
</script>

Component:

<template>
  <div :class="componentClass">
    Hello!
  </div>
</template>

<script>
export default {
  data() {
    const componentClass = this.$emotion.css({
      color: 'red',
    });

    return { componentClass };
  },
}
</script>

SSR API

import {
  hydrate,
  renderStylesToString,
  renderStylesToNodeStream,
  extractCritical,
} from 'v-emotion';