@strato-css/vue

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

Installation

pnpm add @strato-css/vue

Usage

Plugin Setup

Install the plugin in your Vue app:

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:

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

Dynamic utilities:

<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:

<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:

<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:

<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.

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

With array:

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

With conditional utilities:

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

Composables Reference

useStrato

Generate CSS classes from utilities.

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.

const theme = useStratoTheme();

Returns:

• Ref containing theme object

Examples

Dynamic Button Component

<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

<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:

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

# 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

# Build the package
pnpm build

# Build in watch mode
pnpm dev

Type Checking

# Run TypeScript type checking
pnpm typecheck

License

MIT