# vue-emotion

> Seamlessly use emotion (CSS-in-JS) with Vue.js

Latest version **0.4.29** (published 2019-03-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-emotion
pnpm add vue-emotion
yarn add vue-emotion
bun add vue-emotion
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.29 |
| Published | 2019-03-22 |
| First published | 2017-08-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 177.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Sky Foundry |
| Maintainers | acidic9, egoist, matthewattanasio, rem |

## Links

- npm: https://www.npmjs.com/package/vue-emotion
- Repository: https://github.com/sky-foundry/vue-emotion
- Homepage: https://github.com/sky-foundry/vue-emotion#readme
- Issues: https://github.com/sky-foundry/vue-emotion/issues
- npm.io page: https://npm.io/package/vue-emotion

## Dependencies (6)

- [emotion](https://npm.io/package/emotion.md) ^10.0.0
- [nano-assign](https://npm.io/package/nano-assign.md) ^1.0.0
- [@emotion/cache](https://npm.io/package/@emotion/cache.md) 10.0.0
- [@emotion/utils](https://npm.io/package/@emotion/utils.md) 0.11.1
- [@vue/cli-service](https://npm.io/package/@vue/cli-service.md) ^3.2.0
- [@emotion/is-prop-valid](https://npm.io/package/@emotion/is-prop-valid.md) 0.7.3

## Recent versions

- 0.4.29 (latest) — 2019-03-22
- 0.4.28 — 2019-02-28
- 0.4.27 — 2019-02-28
- 0.4.2 — 2018-04-23
- 0.4.1 — 2018-03-25
- 0.4.0 — 2018-03-25
- 0.3.1 — 2017-08-22
- 0.3.0 — 2017-08-21

## README

# vue-emotion

[![NPM version](https://img.shields.io/npm/v/vue-emotion.svg?style=flat)](https://npmjs.com/package/vue-emotion) [![NPM downloads](https://img.shields.io/npm/dm/vue-emotion.svg?style=flat)](https://npmjs.com/package/vue-emotion)

*[emotion](https://github.com/tkh44/emotion) is the Next Generation of CSS-in-JS.*

## Install

```bash
yarn add emotion vue-emotion
```

## Table of Contents

<!-- toc -->

- [Usage](#usage)
- [Contributing](#contributing)
- [Author](#author)

<!-- tocstop -->

## Usage


Create your styled component:

```js
import styled from 'vue-emotion'

const Button = styled('button')`
  font-size: 15px;
`

const PinkButton = styled(Button)`
  color: pink
`

new Vue({
  render() {
    return (
      <div>
        <Button>normal button</Button>
        <PinkButton>pink button</PinkButton>
      </div>
    )
  }
})
```

Refer to https://github.com/tkh44/emotion for more docs.


## Contributing

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D


## Author

**vue-emotion** © [Sky Foundry](https://github.com/sky-foundry/vue-emotion), Released under the [MIT](./LICENSE) License.<br>
Authored and maintained by Sky Foundry with help from contributors ([list](https://github.com/egoist/vue-emotion/contributors)).

> [https://skyfoundry.agency](https://skyfoundry.agency) · Website [github.com/sky-foundry/vue-emotion](https://github.com/sky-foundry/vue-emotion) · GitHub

---
_Source: https://npm.io/package/vue-emotion · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._