tessl/npm-vuetify

Vue Material Component Framework implementing Google's Material Design specification with comprehensive UI components, theming system, and accessibility features.

—

Pending

Overview

Eval results

Files

Framework Core

Name: tessl/npm-vuetify
Author: tessl

Core Vuetify framework initialization, configuration, and plugin functionality for Vue 3 applications.

Capabilities

Framework Initialization

Creates and configures a Vuetify instance for use with Vue applications.

/**
 * Creates a Vuetify instance with the specified configuration
 * @param options - Configuration options for the Vuetify instance
 * @returns Configured Vuetify instance with install method
 */
function createVuetify(options?: VuetifyOptions): VuetifyInstance;

interface VuetifyOptions {
  /** Component aliases for custom component names */
  aliases?: Record<string, any>;
  /** Blueprint configuration for pre-defined theme and component settings */
  blueprint?: Blueprint;
  /** Components to register globally */
  components?: Record<string, any>;
  /** Date adapter configuration */
  date?: DateOptions;
  /** Directives to register globally */
  directives?: Record<string, any>;
  /** Default component prop values */
  defaults?: DefaultsOptions;
  /** Display/responsive configuration */
  display?: DisplayOptions;
  /** Smooth scrolling configuration */
  goTo?: GoToOptions;
  /** Theme configuration */
  theme?: ThemeOptions;
  /** Icon system configuration */
  icons?: IconOptions;
  /** Locale and RTL configuration */
  locale?: LocaleOptions & RtlOptions;
  /** Server-side rendering configuration */
  ssr?: SSROptions;
}

interface VuetifyInstance {
  /** Vue plugin install method */
  install(app: App): void;
  /** Cleanup method for unmounting */
  unmount(): void;
  /** Component defaults manager */
  defaults: DefaultsInstance;
  /** Display/responsive utilities */
  display: DisplayInstance;
  /** Theme management instance */
  theme: ThemeInstance;
  /** Icon system instance */
  icons: IconSet;
  /** Locale management instance */
  locale: LocaleInstance;
  /** Date handling instance */
  date: DateInstance;
  /** Smooth scrolling instance */
  goTo: GoToInstance;
}

Usage Examples:

import { createApp } from 'vue';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

// Basic setup
const vuetify = createVuetify({
  components,
  directives,
});

const app = createApp(App);
app.use(vuetify);

// Custom configuration
const vuetify = createVuetify({
  theme: {
    defaultTheme: 'dark',
    themes: {
      light: {
        colors: {
          primary: '#1976D2',
          secondary: '#424242',
          accent: '#82B1FF',
        }
      }
    }
  },
  display: {
    mobileBreakpoint: 'sm',
    thresholds: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1264,
      xl: 1904,
    },
  },
  icons: {
    defaultSet: 'mdi',
  },
});

Blueprint System

Pre-configured theme and component configurations following Material Design specifications.

/**
 * Blueprint interface for pre-defined configurations
 * Extends VuetifyOptions without the blueprint property to prevent recursion
 */
interface Blueprint extends Omit<VuetifyOptions, 'blueprint'> {}

// Available blueprints
const md1: Blueprint;  // Material Design 1
const md2: Blueprint;  // Material Design 2  
const md3: Blueprint;  // Material Design 3

Usage Examples:

import { createVuetify } from 'vuetify';
import { md3 } from 'vuetify/blueprints';

// Using Material Design 3 blueprint
const vuetify = createVuetify({
  blueprint: md3,
  // Override specific blueprint settings
  theme: {
    defaultTheme: 'light',
  },
});

Version Information

Framework version information for compatibility checking.

/** Current Vuetify version string */
const version: string;

/** Version property on createVuetify function */
createVuetify.version: string;

Usage Examples:

import { createVuetify, version } from 'vuetify';

console.log('Vuetify version:', version); // "3.9.5"
console.log('Function version:', createVuetify.version); // "3.9.5"

Injection Symbols

Vue injection keys for accessing Vuetify services in components.

/** Injection keys for Vuetify services */
const DefaultsSymbol: InjectionKey<DefaultsInstance>;
const DisplaySymbol: InjectionKey<DisplayInstance>;
const ThemeSymbol: InjectionKey<ThemeInstance>;
const IconSymbol: InjectionKey<IconSet>;
const LocaleSymbol: InjectionKey<LocaleInstance>;
const DateAdapterSymbol: InjectionKey<DateInstance>;
const DateOptionsSymbol: InjectionKey<DateOptions>;
const GoToSymbol: InjectionKey<GoToInstance>;

Usage Examples:

import { inject } from 'vue';
import { ThemeSymbol, DisplaySymbol } from 'vuetify';

export default defineComponent({
  setup() {
    const theme = inject(ThemeSymbol);
    const display = inject(DisplaySymbol);
    
    return {
      theme,
      display,
    };
  },
});

Types

// Vue app instance type
interface App {
  use(plugin: any, ...options: any[]): App;
  component(name: string, component: any): App;
  directive(name: string, directive: any): App;
  provide<T>(key: InjectionKey<T> | string, value: T): App;
  mount(rootContainer: any): any;
  onUnmount(callback: () => void): void;
}

// Vue injection key type
interface InjectionKey<T> extends Symbol {}

// Component public instance type
interface ComponentPublicInstance {
  $: any;
}

Install with Tessl CLI