npm package: @strato-css/vue
Description: Vue integration for Strato CSS framework
Latest version: 1.1.0

# @strato-css/vue

Vue integration for Strato CSS framework. Provides Vue 3 directives and composables for using Strato CSS in Vue applications.

## Installation

```bash
pnpm add @strato-css/vue
```

## Usage

### Plugin Setup

Install the plugin in your Vue app:

```typescript
import { createApp } from 'vue';
import { StratoPlugin } from '@strato-css/vue';
import App from './App.vue';

const app = createApp(App);

app.use(StratoPlugin, {
  theme: {
    colors: {
      primary: '#3b82f6'
    }
  }
});

app.mount('#app');
```

### v-strato Directive

Use the `v-strato` directive to apply utilities conditionally:

```vue
<template>
  <div v-strato="'p-4 bg-white rounded'">Hello Strato CSS!</div>
</template>
```

Dynamic utilities:

```vue
<template>
  <div
    v-strato="[
      'p-4 rounded',
      isActive && 'bg-primary text-white',
      !isActive && 'bg-gray-200'
    ]"
  >
    Dynamic classes
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const isActive = ref(true);
</script>
```

### useStrato Composable

Generate utilities programmatically:

```vue
<template>
  <div :class="classes">Content</div>
</template>

<script setup lang="ts">
import { useStrato } from '@strato-css/vue';

const classes = useStrato('p-4 bg-white rounded');
</script>
```

Dynamic utilities with composable:

```vue
<template>
  <div :class="buttonClasses">Click me</div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useStrato } from '@strato-css/vue';

const variant = ref<'primary' | 'secondary'>('primary');

const buttonClasses = useStrato(
  computed(() => [
    'px-4 py-2 rounded font-semibold',
    variant.value === 'primary' && 'bg-primary text-white',
    variant.value === 'secondary' && 'bg-gray-200 text-gray-800'
  ])
);
</script>
```

### useStratoTheme Composable

Access theme values:

```vue
<template>
  <div :style="{ color: theme.colors.primary }">Themed text</div>
</template>

<script setup lang="ts">
import { useStratoTheme } from '@strato-css/vue';

const theme = useStratoTheme();
</script>
```

## Directives Reference

### v-strato

Apply utility classes to elements.

```vue
<div v-strato="'p-4 bg-white'">Content</div>
```

With array:

```vue
<div v-strato="['p-4', 'bg-white', 'rounded']">Content</div>
```

With conditional utilities:

```vue
<div v-strato="[isActive && 'bg-primary', isHover && 'scale-105']">Content</div>
```

## Composables Reference

### useStrato

Generate CSS classes from utilities.

```ts
const classes = useStrato('p-4 bg-white rounded');
```

**Parameters:**
- `utilities`: String, array, or computed ref of utility strings

**Returns:**
- Ref containing CSS class names

### useStratoTheme

Access the theme configuration.

```ts
const theme = useStratoTheme();
```

**Returns:**
- Ref containing theme object

## Examples

### Dynamic Button Component

```vue
<template>
  <button
    v-strato="[
      'px-4 py-2 rounded font-semibold transition',
      variant === 'primary' && 'bg-primary text-white hover:bg-primary-600',
      variant === 'secondary' && 'bg-gray-200 text-gray-800 hover:bg-gray-300',
      size === 'sm' && 'text-sm px-3 py-1',
      size === 'lg' && 'text-lg px-6 py-3'
    ]"
  >
    <slot />
  </button>
</template>

<script setup lang="ts">
import { prop, withDefaults } from 'vue';

interface Props {
  variant?: 'primary' | 'secondary';
  size?: 'sm' | 'md' | 'lg';
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'primary',
  size: 'md'
});
</script>
```

### Card Component

```vue
<template>
  <div v-strato="cardClasses">
    <h2 v-strato="'text-xl font-bold mb-2'">{{ title }}</h2>
    <p v-strato="'text-gray-600'">{{ description }}</p>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useStrato } from '@strato-css/vue';

interface Props {
  title: string;
  description: string;
}

const props = defineProps<Props>();

const cardClasses = useStrato(
  computed(() => ['bg-white rounded-lg shadow-md p-6'])
);
</script>
```

## SSR Support

The plugin supports Vue 3 SSR:

```typescript
// entry-server.ts
import { createSSRApp } from 'vue';
import { StratoPlugin } from '@strato-css/vue';
import App from './App.vue';

export function createApp() {
  const app = createSSRApp(App);
  app.use(StratoPlugin);
  return app;
}
```

## Development

### Testing

```bash
# Run all tests
pnpm test

# Run tests in watch mode
pnpm test --watch

# Run tests with UI
pnpm test:ui

# Run tests with coverage
pnpm test:coverage
```

### Build

```bash
# Build the package
pnpm build

# Build in watch mode
pnpm dev
```

### Type Checking

```bash
# Run TypeScript type checking
pnpm typecheck
```

## License

MIT