Need help with styled-vue?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

egoist
421 Stars 18 Forks MIT License 40 Commits 24 Opened issues

Description

Use dynamic styles in Vue single-file components.

Services available

!
?

Need anything else?

Contributors list

No Data

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.

styled-vue


NPM version NPM downloads CircleCI chat

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

Then register the Vue plugin (optional):

import Vue from 'vue'
import { StyledVue } from 'styled-vue'

Vue.use(StyledVue)

So far the plugin is only required for globalStyle, if you only need scoped style, you can safely skip this.

Example

And that's it, it's like writing

.vue
file's scoped CSS in the
 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') // 

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') // 

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:

Output:



Under the hood, 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
.

Global Styles

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.

TypeScript

We use Babel to parse your code, so TypeScript should work out-of-the-box, however there're some caveats.

Editor Plugins

VSCode

Atom

Inspirations

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

styled-vue © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).

Website · GitHub @EGOIST · Twitter @_egoistlily

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.