Vue Component Style

A Vue mixin to add style section to components.

Features

• Zero Dependency
• Tiny (~1kb gzipped)
• Simple Setup and Usage
• Nested Support
• Pseudo Selector Support
• SSR Support
• Scoped to Component

Install

npm i vue-component-style

Setup

Vue App

import Vue from 'vue';
import VueComponentStyle from 'vue-component-style';

Vue.use(VueComponentStyle);

Nuxt App

nuxt.config.js:

module.exports = {
  modules: [
    'vue-component-style/nuxt'
  ],
}

Note that You don't need to do anything else with your webpack config or whatever.

Usage

component.vue:

<template>
  <div>
    <h1 :class="$style.title"> Title </h1>
    <div :class="$style.content">
      Content <a> Link </a>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    size: {
      type: Number,
      default: 8
    },
    color: {
      type: String,
      default: 'red'
    }
  },
  style({ className }) {
    return [
      className('title', {
        color: this.color,
        fontWeight: 'bold',
      }),
      className('content', {
        color: 'gray',
        marginBottom: `${this.size}px`,
        '& > a': {
          color: this.color,
          '&:visited': {
            textDecoration: 'underline',
          },
        },
      }),
    ];
  }
}
</script>

API Documentions

1 - Define Style

Function this.style(helper)

After activating VueComponentStyle, all components can have their js style section. Just like data section, you have to pass normal function that returning an Array. This function will invoke automatically with helper util object as first argument.

2 - Use Defined Styles

Object this.$style

After you defining style prop in your component, all your classes defined by style()s are accessable with $style computed object inside your component instance.

3 - Notice When Styles Updated

VueEvent 'styleChange'

styleChange event fires when your style changes and applied to DOM.

Helper

You can use helper() object from first parameter of style() function to defining your stylesheet. Helper object has these functions

• className()
• mediaQuery()
• keyFrames()
• custom()

Class Name

Function helper.className(name, content)

To define your scopped css class styles, use this helper function.

Example

style({ className }) {
  return [
    className('customClass', {
      color: 'red',
      fontWeight: 'bold',
      borderRadius: `${this.size}px`,
      '& > div': {
        color: 'blue',
      },
    }),
  ];
}

Media Query

Function helper.mediaQuery(mediaFeature, content)

To define your customized style to different screen sizes, use this helper function.

Example

style({ mediaQuery, className }) {
  return [
    className('responsiveClass', {
      width: '50%',
    }),
    mediaQuery({ maxWidth: '320px' }, [
      className('responsiveClass', {
        width: '100%',
      }),     
    ]),
  ];
}

Key Frames

Function helper.keyFrames(name, content)

To define your scopped keyframes animation with specefic name, use this helper function.

Example

style({ keyFrames, className }) {
  return [
    className('animatedThing', {
      color: 'blue',
      animationName: keyFrames('myAnimation'),
      animationDuration: '2s',
    }),
    keyFrames('myAnimation', {
      from: {
        color: 'blue',
      },
      to: {
        color: 'red',
      },
    ]),
  ];
}

Custom

Function helper.custom(rule, content)

To define your custom css style sections, use this helper function. Note that styles generated by this helper function are not scopped!

Example

style({ custom }) {
  return [
    custom('@font-face', {
      fontFamily: 'globalFont',
      src: 'url(global_font.woff)',
    }),
  ];
}