The official Vite plugin for integrating Svelte components into Vite-based development workflows.
—
Core plugin factory function that creates the Vite plugin array for handling Svelte files in development and build processes.
Creates an array of specialized Vite plugins that handle different aspects of Svelte file processing.
/**
* Returns a list of plugins to handle svelte files
* plugins are named `vite-plugin-svelte:<task>`
*
* @param inlineOptions - Optional configuration options
* @returns Array of Vite plugins for Svelte file processing
*/
function svelte(inlineOptions?: Partial<Options>): Plugin[];Usage Examples:
// Basic usage
import { svelte } from '@sveltejs/vite-plugin-svelte';
export default {
plugins: [svelte()]
};
// With configuration
export default {
plugins: [
svelte({
emitCss: true,
compilerOptions: {
dev: true,
runes: true
},
preprocess: vitePreprocess({
style: true
})
})
]
};
// Production build configuration
export default {
plugins: [
svelte({
emitCss: true,
hot: false,
compilerOptions: {
dev: false
},
prebundleSvelteLibraries: false
})
]
};Configure which files the plugin processes and how.
interface FileProcessingOptions {
/** A picomatch pattern or array of patterns specifying files to include */
include?: Arrayable<string | RegExp>;
/** A picomatch pattern or array of patterns specifying files to exclude */
exclude?: Arrayable<string | RegExp>;
}Usage Examples:
svelte({
include: ['src/**/*.svelte'],
exclude: ['node_modules/**', 'src/**/*.test.svelte']
});
// Using RegExp patterns
svelte({
include: [/\.svelte$/, /\.svelte\.ts$/],
exclude: [/node_modules/, /\.test\./]
});Control how Svelte component styles are processed and emitted.
interface CssOptions {
/** Emit Svelte styles as virtual CSS files for Vite and other plugins to process */
emitCss?: boolean; // default: true
}Usage Examples:
// Enable CSS emission (default)
svelte({ emitCss: true });
// Disable CSS emission (styles remain in component)
svelte({ emitCss: false });Configure development-time hot reload behavior.
interface HmrOptions {
/**
* Enable or disable Hot Module Replacement
* @deprecated Use compilerOptions.hmr instead
* @default true for development, always false for production
*/
hot?: boolean;
}Usage Examples:
// Preferred approach (not deprecated)
svelte({
compilerOptions: {
hmr: process.env.NODE_ENV === 'development'
}
});
// Deprecated approach (still works)
svelte({
hot: process.env.NODE_ENV === 'development'
});Control how the plugin interacts with preprocessors from other Vite plugins.
interface PreprocessorOptions {
/**
* Ignore preprocessors contributed by other Vite plugins
* - true: ignore all plugin preprocessors
* - string[]: ignore preprocessors from specific plugins
* @default false
*/
ignorePluginPreprocessors?: boolean | string[];
}Usage Examples:
// Ignore all plugin preprocessors
svelte({ ignorePluginPreprocessors: true });
// Ignore specific plugins
svelte({
ignorePluginPreprocessors: ['vite-plugin-windicss', 'other-plugin']
});Control automatic handling of Svelte library dependencies.
interface DependencyOptions {
/**
* Control automatic dependency reinclusion in vite.optimizeDeps
* - true: disable all reinclusions
* - string[]: disable reinclusions for specific dependencies
* @default false
*/
disableDependencyReinclusion?: boolean | string[];
/**
* Enable dependency optimization to prebundle Svelte libraries
* @default true for dev, false for build
*/
prebundleSvelteLibraries?: boolean;
}Usage Examples:
// Disable all dependency reinclusion
svelte({ disableDependencyReinclusion: true });
// Disable for specific hybrid packages
svelte({
disableDependencyReinclusion: ['@routify/router', 'some-hybrid-package']
});
// Control prebundling
svelte({
prebundleSvelteLibraries: process.env.NODE_ENV === 'development'
});Configure Svelte Inspector for development debugging.
interface InspectorOptions {
/**
* Toggle or configure Svelte Inspector
* @default unset for dev, always false for build
*/
inspector?: InspectorOptions | boolean;
}Usage Examples:
// Enable inspector (default in development)
svelte({ inspector: true });
// Disable inspector
svelte({ inspector: false });
// Configure inspector options
svelte({
inspector: {
toggleKeyCombo: 'control-shift',
holdMode: true,
showToggleButton: 'always'
}
});Provide per-file dynamic compiler configuration.
interface DynamicCompileOptions {
/**
* Function to update compilerOptions before compilation
* @param data - Compilation context data
* @returns Partial compiler options to merge
*/
dynamicCompileOptions?: (data: {
filename: string;
code: string;
compileOptions: Partial<CompileOptions>;
}) => Promise<Partial<CompileOptions> | void> | Partial<CompileOptions> | void;
}Usage Examples:
svelte({
dynamicCompileOptions({ filename, compileOptions }) {
// Enable runes mode for specific files
if (filename.includes('.runes.svelte')) {
return { runes: true };
}
// Different settings for test files
if (filename.includes('.test.svelte')) {
return {
dev: true,
hydratable: false
};
}
}
});
// Async dynamic options
svelte({
async dynamicCompileOptions({ filename, code }) {
const config = await loadFileSpecificConfig(filename);
return config.compilerOptions;
}
});Control Svelte configuration file loading.
interface ConfigFileOptions {
/**
* Path to svelte config file, absolute or relative to Vite root
* Set to false to ignore svelte config file
*/
configFile?: string | false;
}Usage Examples:
// Use custom config file path
svelte({ configFile: './config/svelte.config.js' });
// Use absolute path
svelte({ configFile: '/path/to/project/custom.svelte.config.js' });
// Ignore svelte config file completely
svelte({ configFile: false });Features that may have breaking changes in future releases.
interface ExperimentalOptions {
/** Send websocket message with svelte compiler warnings during dev */
sendWarningsToBrowser?: boolean;
/** Disable svelte field resolve warnings */
disableSvelteResolveWarnings?: boolean;
/** Disable api.sveltePreprocess deprecation warnings */
disableApiSveltePreprocessWarnings?: boolean;
/** Module compilation configuration */
compileModule?: CompileModuleOptions;
}
interface CompileModuleOptions {
/** Infix that must be present in filename (default: ['.svelte.']) */
infixes?: string[];
/** Module extensions (default: ['.ts', '.js']) */
extensions?: string[];
/** Include patterns */
include?: Arrayable<string | RegExp>;
/** Exclude patterns */
exclude?: Arrayable<string | RegExp>;
}Usage Examples:
svelte({
experimental: {
// Send warnings to browser console during development
sendWarningsToBrowser: true,
// Suppress specific warning types
disableSvelteResolveWarnings: true,
disableApiSveltePreprocessWarnings: true,
// Configure module compilation
compileModule: {
infixes: ['.svelte.', '.component.'],
extensions: ['.ts', '.js', '.mjs'],
include: ['src/modules/**'],
exclude: ['**/*.test.*']
}
}
});Install with Tessl CLI
npx tessl i tessl/npm-sveltejs--vite-plugin-svelte