@lmsomeco/toyota-framework-vue

Toyota Design System Vue 3 Component Library — Ready-to-use Vue 3 components with Toyota brand styling.

Features

• ✅ Vue 3 Composition API — Modern Vue 3 components with <script setup>
• ✅ TypeScript support — Full type definitions included
• ✅ Toyota brand styling — Official design system components
• ✅ Accessible — WCAG 2.1 AA compliant with ARIA support
• ✅ Composable — Flexible slots and event emissions

Installation

npm install @lmsomeco/toyota-framework-vue @lmsomeco/toyota-framework-css

Or with pnpm:

pnpm add @lmsomeco/toyota-framework-vue @lmsomeco/toyota-framework-css

Usage

1. Import CSS

Import the CSS in your application entry point:

// main.ts
import '@lmsomeco/toyota-framework-css'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

2. Import Components

<script setup lang="ts">
import { TButton, TInput, TSelect } from '@lmsomeco/toyota-framework-vue'

const handleClick = () => {
  console.log('Button clicked!')
}
</script>

<template>
  <div>
    <TButton label="Click me" color="primary" @click="handleClick" />

    <TInput v-model="inputValue" label="Your name" placeholder="Enter your name" />
  </div>
</template>

Available Components

• TButton — Button with variants (default, primary, secondary, function)
• TInput — Text input with label and error states
• TTextarea — Multi-line text input
• TSelect — Dropdown select component
• TCheckbox — Checkbox with label
• TRadio — Radio button with label
• TFile — File upload component
• TCombobox — Autocomplete combobox
• TDatepicker — Date selection component
• TTabs — Tab navigation component
• TLoading — Loading spinner
• TDialog — Dialog/modal container

Component Props

All components are fully typed. Use your IDE's IntelliSense to explore available props, events, and slots.

Example:

<TButton
  label="Submit"          <!-- string -->
  color="primary"         <!-- 'default' | 'primary' | 'secondary' | 'function' -->
  size="default"          <!-- 'default' | 'small' -->
  :disabled="false"       <!-- boolean -->
  @click="handleClick"    <!-- (event: MouseEvent) => void -->
/>

TypeScript

The package includes full TypeScript definitions:

import type { TButtonProps, TInputProps } from '@lmsomeco/toyota-framework-vue'

Peer Dependencies

• Vue 3.5+

License

MIT © LM Someco

Repository

https://github.com/lmandcreative/toyota-framework