ATTENTION: this project is not actively maintained for now (I still push some code once in a while), if you want to see improvements or get support, please consider sponsoring me.
Please consider donating to this project's author, EGOIST, to show your ❤️ and support.
- 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!
yarn add styled-vue --devThen register the Vue plugin (optional):
import Vue from 'vue'
import { StyledVue } from 'styled-vue'
Vue.use(<
5CC0
span class="pl-v">StyledVue)So far the plugin is only required for globalStyle, if you only need scoped style, you can safely skip this.
<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.
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
}
}
]
}
}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
})
}
}In your poi.config.js:
module.exports = {
plugins: ['styled-vue/poi']
}In your nuxt.config.js:
export default {
modules: ['styled-vue/nuxt']
}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>Under the hood, it uses CSS variables for dynamic styles, that's why this feature is not supported in IE.
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>.
Use globalStyle instead of style on your component:
import { css } from 'styled-vue'
export default {
globalStyle: css`
body {
color: ${vm => vm.bodyColor};
}
`
}globalStyle relies on the Vue plugin, make sure to register it first:
import Vue from 'vue'
import { StyledVue } from 'styled-vue'
Vue.use(StyledVue)For Nuxt users we automatically register it for you.
This only adds ~100 bytes to your application.
We use Babel to parse your code, so TypeScript should work out-of-the-box, however there're some caveats.
- Syntax Highlighting - language-babel
- Autocompletion - vscode-styled-components
- Linting - stylelint
- Syntax Highlighting and Autocompletion - language-babel
- 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
styled-vue © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).
Website · GitHub @EGOIST · Twitter @_egoistlily