# styletron-vue

> Vue bindings for styletron.

Latest version **0.4.1** (published 2018-02-01) · MIT license · 0 weekly downloads

## Install

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

## 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.1 |
| Published | 2018-02-01 |
| First published | 2017-06-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 47 |
| Author | egoist |
| Maintainers | rem |

## Links

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

## Dependencies (2)

- [nano-assign](https://npm.io/package/nano-assign.md) ^1.0.0
- [styletron-utils](https://npm.io/package/styletron-utils.md) ^3.0.4

## Recent versions

- 0.4.1 (latest) — 2018-02-01
- 0.4.0 — 2018-02-01
- 0.3.4 — 2017-11-21
- 0.3.3 — 2017-11-21
- 0.3.2 — 2017-11-02
- 0.3.1 — 2017-11-01
- 0.3.0 — 2017-11-01
- 0.2.2 — 2017-08-05
- 0.2.1 — 2017-08-05
- 0.2.0 — 2017-08-05
- 0.1.2 — 2017-06-29
- 0.1.1 — 2017-06-28
- 0.1.0 — 2017-06-28

## README

# styletron-vue

[![NPM version](https://img.shields.io/npm/v/styletron-vue.svg?style=flat)](https://npmjs.com/package/styletron-vue) [![NPM downloads](https://img.shields.io/npm/dm/styletron-vue.svg?style=flat)](https://npmjs.com/package/styletron-vue) [![CircleCI](https://circleci.com/gh/egoist/styletron-vue/tree/master.svg?style=shield)](https://circleci.com/gh/egoist/styletron-vue/tree/master)  [![donate](https://img.shields.io/badge/$-donate-ff69b4.svg?maxAge=2592000&style=flat)](https://github.com/egoist/donate)

> Vue bindings for [Styletron](https://github.com/rtsao/styletron).

## Install

```bash
yarn add styletron styletron-vue
```

CDN: [UNPKG](https://unpkg.com/styletron-vue/dist/) | [jsDelivr](https://cdn.jsdelivr.net/npm/styletron-vue/dist/)

## Usage

Bind `styletron` instance to root Vue instance:

```js
import StyletronVue from 'styletron-vue'
import Styletron from 'styletron'
import MyApp from './MyApp.vue'

Vue.use(StyletronVue)

const styletron = new Styletron()

// You can set `styletron` instance in any parent component options
// Like in the root instance options
new Vue({
  styletron,
  render: h => h(MyApp)
})
```

Then use `styletron-vue`:

<details><summary>in single-file component</summary><br>

```vue
<template>
  <div>
    <styled-button>I am pink</styled-button>
  </div>
</template>

<script>
import { styled } from 'styletron-vue'

const StyledButton = styled('div', {
  color: 'pink'
})

export default {
  components: {
    StyledButton
  }
}
</script>
```
</details>

<details><summary>in component with render function</summary><br>

```js
import { styled } from 'styletron-vue'

const StyledButton = styled('div', {
  color: 'pink'
})

export default {
  render() {
    return <StyledButton>I am pink</StyledButton>
  }
}
```
</details>

### Access Props

```js
styled('div', props => ({
  color: props.dark ? '#000' : '#fff'
}), ['dark']) // Specify the `props` as the third arg

// You can do any prop validation here, see:
// https://vuejs.org/v2/guide/components.html#Prop-Validation
// It's required if you want to access props
```

### Styled Component

```js
const Button = styled('button', props => ({
  color: props.dark ? 'darkred' : 'red'
}), ['dark'])

const PinkButton = styled(Button, props => ({
  color: props.dark ? 'darkpink' : 'pink'
}))
// Props will also be inherited
// So you don't need to define it again
```

### Theming

Check out [discussion here](https://github.com/egoist/styletron-vue/issues/2).

## API

### styled(tag, styles, [props])

#### tag

Type: `string` `object`

String or component object.

#### styles

Type: `object` `function`

```js
// props: component props
// ctx: `ctx` of this functional component
styled(tag, (props, ctx) => ({}))
```

When you're accessing `props`, you actually have to provide the third arg: [props](#props).

#### props

Type: `Array` `object`

Prop validation.

## 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

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

> [egoist.moe](https://egoist.moe) · GitHub [@egoist](https://github.com/egoist) · Twitter [@_egoistlily](https://twitter.com/_egoistlily)

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