vue-recipes v0.1.4

vue-recipes

A tiny utility to make type-safe variant Vue components from your vanilla-extract recipes.

Installation

pnpm add vue-recipes # or npm or yarn

Usage

Create a recipe:

// button.css.ts
import { recipe } from '@vanilla-extract/recipes'

export const button = recipe({
  variants: {
    color: {
      neutral: { background: 'whitesmoke' },
      brand: { background: 'blueviolet' },
      accent: { background: 'slateblue' }
    },
    size: {
      small: { padding: 12 },
      medium: { padding: 16 },
      large: { padding: 24 }
    },
    rounded: {
      true: { borderRadius: 999 }
    }
  },
})

Import and use the styled function:

<script setup>
import styled from 'vue-recipes'
import { button } from './button.css'

const Button = styled('button', button)
</script>

<template>
  <Button color="brand" size="medium" rounded>
    Button
  </Button>
</template>

Recommended IDE Setup

• VS Code + Volar

License

MIT