DOCSEARCHbyAlgolia
Submit Docs

vite-plugin-svelte

repository·main·Indexed 21 days ago

https://github.com/sveltejs/vite-plugin-svelte

The official Vite plugin for Svelte, enabling Svelte component support within a Vite-powered development environment and build pipeline. It provides configuration for the Svelte compiler, support for preprocessors, and integration of the Svelte Inspector (as of version 7). The plugin allows for custom transformation lifecycles via internal plugins and supports both inline configuration in vite.config.js and external Svelte config files.

Tokens
9K
Snippets
35
Records
47
Agent score
76%

What's inside @sveltejs/vite-plugin-svelte

  2. What is the Svelte Inspector?

    main

    @sveltejs/vite-plugin-svelte-inspector is a Vite plugin that adds a Svelte inspector to your browser during development. It allows you to see the file location of the element under your cursor and click to open your code editor directly at that location. You can also right-click elements to show a context menu with additional options.

    Note: @sveltejs/vite-plugin-svelte must be installed as a peer dependency because the inspector uses Svelte components that need to be compiled.

  3. Use a Svelte config file

    main

    The plugin automatically resolves options from a Svelte config file if it exists. The default search paths are:

    • svelte.config.js
    • svelte.config.mjs
    • svelte.config.ts
    • svelte.config.mts

    To specify a custom config file, use the configFile option. The path can be absolute or relative to the Vite root.

    To disable automatic config file resolution (useful for frameworks like SvelteKit that manage their own config), set configFile: false. Note that when disabled, you are responsible for providing the complete configuration inline.

    // vite.config.js
export default defineConfig({
  plugins: [
    svelte({
      configFile: 'my-svelte.config.js'
    })
  ]
});

  4. Choosing between Svelte + Vite and SvelteKit

    main

    This template provides a minimal setup for using Svelte with Vite. Use this template instead of SvelteKit if:

    • You require a custom routing solution (SvelteKit provides its own).
    • You want a pure Vite application rather than a framework-driven environment (in SvelteKit, vite dev and vite build are managed by the framework and may not work as expected in a standard Vite context).

    If you need extended capabilities, serverless-first deployment, or built-in support for TypeScript, SCSS, Less, and more, use SvelteKit. The structure of this template is designed to make migration to SvelteKit easier if you decide to upgrade later.

  5. When to use svelte-preprocess instead of vitePreprocess

    main

    While vitePreprocess is recommended for most Vite-based projects due to its integration with Vite's configuration, you should use svelte-preprocess if your project requires the following specific features:

    • Template tags
    • External files
    • Global styles (though using import is generally recommended instead)

    Note: If you choose to use svelte-preprocess alongside vite-plugin-svelte, ensure you turn off the script and style preprocessing options in svelte-preprocess to avoid conflicts.

  6. Managing TypeScript types with global.d.ts

    main

    This project uses a global.d.ts file with triple-slash references instead of setting compilerOptions.types in jsconfig.json or tsconfig.json.

    Why? Setting compilerOptions.types explicitly shuts out all other types not listed in the configuration. Using triple-slash references in global.d.ts allows the project to keep the default TypeScript behavior of accepting type information from the entire workspace while specifically adding svelte and vite/client type information.

  7. Customize Inspector styles with customStyles

    main

    When customStyles is set to true (the default), the inspector injects custom styles when active. This allows you to match the inspector's appearance to your application.

    To style the inspector, you can target these classes:

    • .svelte-inspector-enabled: Added to the <body> element when the inspector is active.
    • .svelte-inspector-active-target: Added to the currently active target (e.g., the element being hovered or selected via keyboard).

  8. Manage Vite pre-bundling for Svelte libraries

    main

    Vite uses pre-bundling to optimize development performance. However, combining plugins or preprocessors that rewrite imports with pre-bundling can cause issues because pre-bundling scans files on disk and cannot detect dynamically added/changed imports.

    Exclude a library from pre-bundling

    If you use tools that rewrite imports, exclude those libraries using optimizeDeps.exclude in vite.config.js:

    // vite.config.js
export default defineConfig({
  optimizeDeps: {
    exclude: ['some-library']
  }
});

    Disable pre-bundling for all Svelte libraries

    You can disable this behavior globally for Svelte libraries in svelte.config.js:

    // svelte.config.js
export default {
  vitePlugin: {
    prebundleSvelteLibraries: false
  }
};

    Import Strategies

    • Index imports (import { X } from 'lib'): Better DX and intellisense, but slower builds as the whole library is compiled.
    • Deep imports (import X from 'lib/src/X.svelte'): Faster builds and snappier dev, but requires more explicit imports and can increase initial load time if overused.

  9. Run the default Svelte app template

    main

    This template is a standard Svelte application adapted for Vite. It was originally created using npx degit sveltejs/template and modified to use Vite by moving index.html to the root and replacing Rollup configurations with Vite configurations. This specific package uses pnpm as the package manager.

    To manage the application, use the following commands:

    • pnpm dev: Starts the local development server.
    • pnpm build: Builds the application for production.
    pnpm dev
pnpm build

  11. Configure the Svelte plugin in Vite

    main

    To use the plugin, import svelte from @sveltejs/vite-plugin-svelte and add it to the plugins array in your vite.config.js file. You can pass an optional configuration object to customize plugin behavior.

    // vite.config.js
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [
    svelte({
      // plugin options
    })
  ]
});

  12. Use the default Svelte app template

    main

    This template is a standard Svelte application adapted for Vite. It was originally created using npx degit sveltejs/template and modified to work with Vite by moving index.html to the project root and replacing the Rollup configuration with Vite. This specific package is used for end-to-end (e2e) testing environments involving environment variables.

    pnpm dev # Starts the development server
pnpm build # Builds the project for production