or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

build-features.md configuration.md css-preprocessing.md file-operations.md framework-integration.md index.md javascript-compilation.md

tile.json

Framework Integration

Support for popular JavaScript frameworks including Vue.js, React, and Preact. Laravel Mix automatically configures webpack loaders and plugins for seamless framework development.

Capabilities

Vue.js Support

Enables Vue.js Single File Component (SFC) support with automatic version detection and style extraction.

/**
 * Enable Vue.js support with automatic version detection
 * @param config - Vue configuration options
 * @returns Mix API instance for chaining
 */
vue(config?: VueConfig): Api;

interface VueConfig {
  /** Which version of Vue to support. Detected automatically if not given. */
  version?: number;
  
  /** A file to include w/ every vue style block. */
  globalStyles?: false | string | string[] | Record<string, string | string[]> | null;
  
  /** Whether or not to extract vue styles. If given a string the name of the file to extract to. */
  extractStyles?: boolean | string;
  
  /** Use vue-style-loader to extract Vue Styles. */
  useVueStyleLoader?: boolean;
  
  /** Whether or not to use the runtime only version of Vue. */
  runtimeOnly?: boolean;
  
  /** Options to pass to Vue Loader */
  options?: VueLoaderOptions;
}

Usage Examples:

const mix = require('laravel-mix');

// Basic Vue.js support (auto-detects version)
mix.js('resources/js/app.js', 'public/js')
   .vue();

// Vue 3 with TypeScript support
mix.ts('resources/js/app.ts', 'public/js')
   .vue({ version: 3 });

// Vue with global styles injection
mix.js('resources/js/app.js', 'public/js')
   .vue({
     globalStyles: 'resources/sass/_variables.scss'
   });

// Vue with style extraction
mix.js('resources/js/app.js', 'public/js')
   .vue({
     extractStyles: 'public/css/vue-components.css'
   });

// Advanced Vue configuration
mix.js('resources/js/app.js', 'public/js')
   .vue({
     version: 3,
     runtimeOnly: true,
     extractStyles: true,
     globalStyles: {
       scss: 'resources/sass/_variables.scss',
       less: 'resources/less/_mixins.less'
     },
     options: {
       compilerOptions: {
         isCustomElement: (tag) => tag.startsWith('ion-')
       }
     }
   });

React Support

Enables React JSX compilation with optional style extraction and hot reloading support.

/**
 * Enable React support with JSX compilation
 * @param config - React configuration options
 * @returns Mix API instance for chaining
 */
react(config?: ReactConfig): Api;

interface ReactConfig {
  /** Whether or not to extract React styles. If given a string the name of the file to extract to. */
  extractStyles?: boolean | string;
}

Usage Examples:

const mix = require('laravel-mix');

// Basic React support
mix.js('resources/js/app.jsx', 'public/js')
   .react();

// React with TypeScript
mix.ts('resources/js/app.tsx', 'public/js')
   .react();

// React with style extraction
mix.js('resources/js/app.jsx', 'public/js')
   .react({
     extractStyles: 'public/css/react-components.css'
   });

// React with custom Babel configuration
mix.babelConfig({
  presets: [
    ['@babel/preset-react', {
      runtime: 'automatic'
    }]
  ]
});

mix.js('resources/js/app.jsx', 'public/js')
   .react();

Preact Support

Enables Preact compilation with JSX support and smaller bundle size compared to React.

/**
 * Enable Preact support with JSX compilation
 * @returns Mix API instance for chaining
 */
preact(): Api;

Usage Examples:

const mix = require('laravel-mix');

// Basic Preact support
mix.js('resources/js/app.jsx', 'public/js')
   .preact();

// Preact with TypeScript
mix.ts('resources/js/app.tsx', 'public/js')
   .preact();

Vue.js Integration Details

Version Detection

Laravel Mix automatically detects the Vue.js version based on your package.json dependencies:

Vue 2.x: Uses vue-loader 15.x
Vue 3.x: Uses vue-loader 16.x

You can override this by explicitly setting the version option.

Global Styles

Global styles are automatically injected into every Vue SFC style block:

// Single global file
mix.vue({ globalStyles: 'resources/sass/_variables.scss' });

// Multiple files by preprocessor
mix.vue({
  globalStyles: {
    scss: ['resources/sass/_variables.scss', 'resources/sass/_mixins.scss'],
    less: 'resources/less/_theme.less'
  }
});

Style Extraction

Vue component styles can be extracted to separate CSS files:

// Extract to default location
mix.vue({ extractStyles: true });

// Extract to specific file
mix.vue({ extractStyles: 'public/css/vue-styles.css' });

React Integration Details

JSX Transformation

React support automatically configures Babel for JSX transformation with modern React JSX runtime.

Hot Reloading

React Fast Refresh is automatically enabled in development mode for instant component updates.

TypeScript Support

Full TypeScript support for React components with proper type checking:

mix.ts('resources/js/app.tsx', 'public/js')
   .react();

Framework-Specific File Structure

Vue.js Single File Components

<template>
  <div class="component">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
};
</script>

<style scoped>
.component {
  color: blue;
}
</style>

React JSX Components

import React, { useState } from 'react';

export default function Component() {
  const [message, setMessage] = useState('Hello React!');
  
  return (
    <div className="component">
      {message}
    </div>
  );
}

Preact JSX Components

import { useState } from 'preact/hooks';

export default function Component() {
  const [message, setMessage] = useState('Hello Preact!');
  
  return (
    <div className="component">
      {message}
    </div>
  );
}

Integration Notes

Framework methods should be called after JavaScript compilation methods
Hot module replacement works automatically with all supported frameworks
Source maps are properly generated for framework-specific transformations
TypeScript support works seamlessly with all frameworks
CSS-in-JS libraries are supported alongside traditional CSS preprocessing

Version

Tile

Files