Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/egoist/vue-emotion
Seamlessly use emotion (CSS-in-JS) with Vue.js
https://github.com/egoist/vue-emotion
css-in-js emotion vue
Last synced: 5 days ago
JSON representation
Seamlessly use emotion (CSS-in-JS) with Vue.js
- Host: GitHub
- URL: https://github.com/egoist/vue-emotion
- Owner: egoist
- License: mit
- Created: 2017-08-05T06:21:34.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-09-06T16:58:24.000Z (about 1 year ago)
- Last Synced: 2024-10-23T00:06:18.753Z (12 days ago)
- Topics: css-in-js, emotion, vue
- Language: JavaScript
- Homepage:
- Size: 1.1 MB
- Stars: 223
- Watchers: 9
- Forks: 21
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-emotion - vue-emotion - Use emotion in Vue.js (Libraries)
README
# vue-emotion
[](https://npmjs.com/package/@egoist/vue-emotion) [](https://npmjs.com/package/@egoist/vue-emotion) [](https://circleci.com/gh/egoist/vue-emotion/tree/master) [](https://patreon.com/egoist)
_[emotion](https://github.com/tkh44/emotion) is the Next Generation of CSS-in-JS._
## Install
```bash
yarn add @egoist/vue-emotion
```
## Table of Contents
- [Usage](#usage)
* [Theming](#theming)
* [Global styles](#global-styles)
* [Server-side rendering](#server-side-rendering)
- [Caveats](#caveats)
* [Component selector doesn't work (yet)](#component-selector-doesnt-work-yet)
- [Contributing](#contributing)
- [Author](#author)
## Usage
Use the plugin:
```js
import { VueEmotion } from '@egoist/vue-emotion'
Vue.use(VueEmotion)
````
Create your styled component:
```js
import { styled } from '@egoist/vue-emotion'
const Button = styled('button')`
font-size: 15px;
`
const PinkButton = styled(Button)`
color: hotpink;
`
new Vue({
render() {
return (
normal button
pink button
)
}
})
```
Refer to https://emotion.sh for more docs.
### Theming
Using `provide/inject`:
```js
new Vue({
provide() {
return {
theme: this.theme
}
},
data() {
return {
theme: 'dark'
}
},
render() {
const Button = styled('button')`
color: ${props => (props.theme === 'dark' ? 'white' : 'black')};
`
return Hello
}
})
```
I do know that `provide/inject` is NOT recommended in generic application code, but before we find a better solution, use it as a work-around.
### Global styles
```vue
import { createGlobalStyle } from '@egoist/vue-emotion'
const GlobalStyle = createGlobalStyle`
body {
background: red;
}
`
export default {
components: {
GlobalStyle
}
}
```
### Server-side rendering
You can extract critical CSS like this during server-side rendering:
```js
const { renderStyle } = require('@egoist/vue-emotion/server')
// `cache` is the $emotionCache property on your Vue app instance
// `html` is the rendered HTML by vue-server-renderer
const style = renderStyle(cache, html)
// ...
````
## Caveats
### Component selector doesn't work (yet)
```js
const Container = styled.div`
${Button} {
color: red;
}
`
```
## 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** © [EGOIST](https://github.com/egoist), Released under the [MIT](./LICENSE) License.
Authored and maintained by EGOIST with help from contributors ([list](https://github.com/egoist/vue-emotion/contributors)).
> [github.com/egoist](https://github.com/egoist) · GitHub [@EGOIST](https://github.com/egoist) · Twitter [@\_egoistlily](https://twitter.com/_egoistlily)