The vite-plugin-multip plugin enables you to create multi-page applications with Vite!
- 📦 Automatic CSS file importing
- 🧬 Layouts support
- 🔎 Framework recognition
- 📝 Markdown support
- 🥏 Multi-Framework support
npm install vite-plugin-multipAlternatively, you can use your favorite package manager.
After installing the plugin, proceed with initialization in the vite.config.ts file:
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { multip } from "vite-plugin-multip";
export default defineConfig({
plugins: [
svelte(),
multip(), // Optional configuration parameters can be passed here
],
});[!NOTE] In the above example, the Svelte adapter is used, but the plugin also automatically supports Vue and React.
Now, let's start by creating the appropriate directories:
src/
pages/
index.(svelte|tsx|vue)
subroute/
index.(svelte|tsx|vue)Remove imports in index.html (required):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Svelte + TS</title>
</head>
<body>
+ <slot />
- <div id="app"></div>
- <script type="module" src="/src/main.ts"></script>
</body>
</html>index.html works as a layout
Now, build:
npm run build[!NOTE] The
dist/directory can be directly integrated with your backend without modification.
Configuration parameters
// plugins: [multip(...config)]
type Config = {
directory?: string;
page?: Page;
minify?: import("html-minifier-terser").Options;
assets?: import("rollup-plugin-copy").Target[];
};
type Page = {
title?: string | ((file: string) => string);
};| Framework | Support |
|---|---|
| React | Yes |
| Vue | Yes |
| Svelte | Yes |
| Solid | Yes |
| Qwik | No |
| Lit | No |