https://github.com/vclemenzi/vite-plugin-multip

Create powerful multi-page applications with Vite
https://github.com/vclemenzi/vite-plugin-multip

mpa plugin typescript vite

Last synced: 9 days ago
JSON representation

Create powerful multi-page applications with Vite

• Host: GitHub
• URL: https://github.com/vclemenzi/vite-plugin-multip
• Owner: vclemenzi
• License: mit
• Created: 2024-03-14T15:33:38.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-05-01T07:12:08.000Z (7 months ago)
• Last Synced: 2024-05-04T09:49:04.675Z (7 months ago)
• Topics: mpa, plugin, typescript, vite
• Language: TypeScript
• Homepage: https://npmjs.com/vite-plugin-multip
• Size: 365 KB
• Stars: 8
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-multip

[![npm version](https://img.shields.io/npm/v/vite-plugin-multip)](https://npmjs.com/package/vite-plugin-multip)

[![weekly downloads](https://img.shields.io/npm/dw/vite-plugin-multip)](https://npmjs.com/package/vite-plugin-multip)

[![license](https://img.shields.io/npm/l/vite-plugin-multip)](https://github.com/vclemenzi/vite-plugin-multip/blob/main/LICENSE)

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

# Installation

```bash

npm install vite-plugin-multip

```

_Alternatively, you can use your favorite package manager._

After installing the plugin, proceed with initialization in the `vite.config.ts` file:

```typescript

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:

```bash

src/

  pages/

    index.(svelte|tsx|vue)

    subroute/

       index.(svelte|tsx|vue)

```

Remove imports in `index.html` (required):

```diff

  

  

  

  Vite + Svelte + TS

+ 

- 


- 


```

_index.html works as a layout_

Now, build:

```bash

npm run build

```

> [!NOTE]

> The `dist/` directory can be directly integrated with your backend without modification.

# Configuration

Configuration parameters

```ts

// 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

| Framework | Support |

| --------- | ------- |

| React     | Yes     |

| Vue       | Yes     |

| Svelte    | Yes     |

| Solid     | Yes     |

| Qwik      | No      |

| Lit       | No      |