nuxt-fela

Add Fela a small, high-performant and framework-agnostic toolbelt to handle state-driven styling in JavaScript to Nuxt.

Setup

• Add nuxt-fela dependency using yarn or npm to your project

yarn add nuxt-fela

• Add nuxt-fela to modules section of nuxt.config.js

{
  modules: [
    'nuxt-fela'
  ],
 
  fela: {
    components: ['Button', 'DatePicker'],
    locale: 'fr',
  },
}

or

{
  modules: [
    [
      'nuxt-fela',
      {
        components: ['Button', 'DatePicker'],
        locale: 'fr',
      },
    ],
  ],
}

• Add Element UI styles.

Properties

• name: alignContent shortcut: aC type: AlignContent

• name: alignItems shortcut: aI type: AlignItems

• name: alignSelf shortcut: aS type: AlignSelf

• name: animation shortcut: an type: string

• name: animationDelay shortcut: anDe type: NumberOrString unit: second

• name: animationDirection shortcut: anDi type: Animationdirection

• name: animationDuration shortcut: anDu type: NumberOrString unit: second

• name: animationFillMode shortcut: anFM type: AnimationFillMode

• name: animationIterationCount shortcut: anIC type: AnimationIterationCount

• name: animationName shortcut: anNa type: string

• name: animationPlayState shortcut: anPS type: AnimationPlayState

• name: animationTimingFunction shortcut: anTF type: string

• name: backfaceVisibility shortcut: bfV type: BackfaceVisibility

• name: background shortcut: bg type: string

• name: backgroundAttachment shortcut: bgA type: BackgroundAttachment

• name: backgroundBlendMode shortcut: bgBM type: string

• name: backgroundClip shortcut: bgCl type: BackgroundClip

• name: backgroundColor shortcut: bgC type: string

• name: backgroundImage shortcut: bgI type: string

• name: backgroundOrigin shortcut: bgO type: BackgroundOrigin

• name: backgroundPosition shortcut: bgP type: string

• name: backgroundRepeat shortcut: bgR type: string

• name: backgroundSize shortcut: bgS type: string

• name: border shortcut: b type: string

• name: borderBottom shortcut: bB type: string

• name: borderBottomColor shortcut: bBC type: string

• name: borderBottomLeftRadius shortcut: bBLRd type: NumberOrString

• name: borderBottomRightRadius shortcut: bBRRd type: NumberOrString

• name: borderBottomStyle shortcut: bBS type: string

• name: borderBottomWidth shortcut: bBW type: NumberOrString

• name: borderCollapse shortcut: bCo type: BorderCollapse

• name: borderColor shortcut: bC type: string

• name: borderLeftColor shortcut: bLC type: string

• name: borderLeftStyle shortcut: bLS type: string

• name: borderLeftWidth shortcut: bLW type: NumberOrString

• name: borderRadius shortcut: bRd type: NumberOrString

• name: borderRightColor shortcut: bRC type: string

• name: borderRightStyle shortcut: bRS type: string

• name: borderRightWidth shortcut: bRW type: NumberOrString

• name: borderStyle shortcut: bS type: string

• name: borderTopColor shortcut: bTC type: string

• name: borderTopLeftRadius shortcut: bTLRd type: NumberOrString

• name: borderTopRightRadius shortcut: bTRRd type: NumberOrString

• name: borderTopStyle shortcut: bTS type: string

• name: borderTopWidth shortcut: bTW type: NumberOrString

• name: borderWidth shortcut: bW type: NumberOrString

• name: bottom shortcut: b type: NumberOrString

• name: color shortcut: c type: string

• name: content shortcut: co type: AlignItems

• name: cursor shortcut: cu type: AlignSelf

• name: direction shortcut: di type: alignSelf

• name: display shortcut: d type: alignSelf

• name: elevation shortcut: el type: alignSelf

• name: flex shortcut: fl type: alignSelf

• name: flexBasis shortcut: flB type: alignSelf

• name: flexDirection shortcut: flD type: alignSelf

• name: flexGrow shortcut: flG type: alignSelf

• name: flexShrink shortcut: flS type: alignSelf

• name: flexWrap shortcut: flW type: alignSelf

• name: fontFamily shortcut: fF type: alignSelf

• name: fontSize shortcut: fS type: alignSelf

• name: fontStyle shortcut: anTF type: alignSelf

• name: fontVariant shortcut: fV type: alignSelf

• name: fontWeight shortcut: fW type: alignSelf

• name: height shortcut: h type: alignSelf

• name: justifyContent shortcut: jC type: alignSelf

• name: left shortcut: l type: alignSelf

• name: letterSpacing shortcut: lS type: alignSelf

• name: lineHeight shortcut: lH type: alignSelf

• name: marginBottom shortcut: mB type: alignSelf

• name: marginLeft shortcut: mL type: alignSelf

• name: marginRight shortcut: mR type: alignSelf

• name: marginTop shortcut: mT type: alignSelf

• name: maxHeight shortcut: maxH type: alignSelf

• name: maxWidth shortcut: maxW type: alignSelf

• name: minHeight shortcut: minH type: alignSelf

• name: minWidth shortcut: minW type: alignSelf

• name: opacity shortcut: o type: alignSelf

• name: order shortcut: anTF type: alignSelf

• name: outlineColor shortcut: ouC type: alignSelf

• name: outlineWidth shortcut: ouW type: alignSelf

• name: overflow shortcut: ov type: alignSelf

• name: paddingBottom shortcut: mB type: alignSelf

• name: paddingLeft shortcut: mL type: alignSelf

• name: paddingRight shortcut: mR type: alignSelf

• name: paddingTop shortcut: mT type: alignSelf

• name: position shortcut: p type: alignSelf

• name: right shortcut: r type: alignSelf

• name: textAlign shortcut: tA type: alignSelf

• name: textDecorationColor shortcut: tDC type: alignSelf

• name: textDecorationLine shortcut: tDL type: alignSelf

• name: textDecorationStyle shortcut: tDS type: alignSelf

• name: top shortcut: t type: alignSelf

• name: transform shortcut: tr type: alignSelf

• name: width shortcut: w type: NumberOrString unit: rem

• name: zIndex shortcut: zI type: ZIndex