Please consider donating to this project's author, EGOIST, to show your ❤️ and support.
Features
- Zero-runtime CSS-in-JS for Vue SFC without compromise
- Scoped CSS by default
- CSS preprocessors support
- Dynamic style just works (no IE support)
- Working with SSR out-of-the-box
- Hot module replacement still works
- You get all the features without any config!
Table of Contents
Install
yarn add styled-vue --dev
Example
<template>
<div><h1 class="title">hello there!</h1></div>
</template>
<script>
import { css } from 'styled-vue'
import { modularScale } from 'polished'
export default {
style: css`
.title {
/* You can access component's "this" via "vm" */
color: ${vm => vm.$store.state.themeColor};
font-size: ${modularScale(2)};
margin: 0;
}
`
}
</script>
And that's it, it's like writing .vue
file's scoped CSS in the <script>
tag.
How to use
Using with webpack
I did say that styled-vue
works without config, that might be a clickbait because you do need a single line of config in your webpack.config.js
:
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
compiler: require('styled-vue/compiler') // <- here
}
}
]
}
}
Using with Vue CLI
In your vue.config.js
:
module.exports = {
chainWebpack(config) {
config.module
.rule('vue')
.use('vue-loader')
.tap(options => {
options.compiler = require('styled-vue/compiler') // <- here
return options
})
}
}
Using with Poi
In your poi.config.js
:
module.exports = {
plugins: ['styled-vue/poi']
}
Using with Nuxt.js
In your nuxt.config.js
:
export default {
modules: ['styled-vue/nuxt']
}
How does it work
Input:
<template>
<h1>hello</h1>
</template>
<script>
import { css } from 'styled-vue'
export default {
style: css`
h1 {
color: ${vm => vm.color};
width: ${200 + 1}px;
}
`
}
</script>
Output:
<template>
<h1 :style="$options.style(this)">hello</h1>
</template>
<script>
export default {
style: function(vm) {
var v0 = vm => vm.color
var v1 = 200 + 1
return {
'--v0': v0(vm),
'--v1': v1 + 'px'
}
}
}
</script>
<style scoped>
h1 {
color: var(--v0);
width: var(--v1);
}
</style>
What a trick... It uses CSS variables for dynamic styles, that's why this feature is not supported in IE.
CSS Preprocessors
import { less, sass, scss, stylus } from 'styled-vue'
Just use corresponding exports from styled-vue
.
The CSS will be passed to vue-loader
and parsed by PostCSS if a postcss.config.js
exists in your project, so it really just works like <style scoped>
.
Global Styles
I think you should not do this, but I'm open for other thoughts, let's discuss it in issue tracker if you want this feature.
TypeScript
We use Babel to parse your code, so TypeScript should work out-of-the-box, however there're some caveats.
Editor Plugins
VSCode
- Syntax Highlighting - language-babel
- Autocompletion - vscode-styled-components
- Linting - stylelint
Atom
- Syntax Highlighting and Autocompletion - language-babel
Inspirations
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Author
styled-vue © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).
Website · GitHub @EGOIST · Twitter @_egoistlily