Light

vclemenzi / vite-plugin-multip Goto Github PK

View Code? Open in Web Editor NEW

8.0 2.0 0.0 374 KB

Create powerful multi-page applications with Vite

Home Page: https://npmjs.com/vite-plugin-multip

License: MIT License

TypeScript 100.00%

mpa plugin vite typescript

vite-plugin-multip's Introduction

vite-plugin-multip

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

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:

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

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

Framework	Support
React	Yes
Vue	Yes
Svelte	Yes
Solid	Yes
Qwik	No
Lit	No

vite-plugin-multip's People

Contributors

Stargazers

Watchers

vite-plugin-multip's Issues

not allowed to load local resource

Issue tracking all files that give this problem

init.ts with vuejs

A lot of files in the dist folder

Doing a build doesn't clear it, and if I do some builds, dist folder will have a lot of javascript and css files

404 for new pages

It says this until you restart the dev server

Fix hotUpdate function name to be Camel Case

Here:
https://github.com/vclemenzi/vite-plugin-multip/blob/main/src/server/hot.ts#L3

Layouts not working on windows

Both html and css

make a way to run both backend and frontend in dev

I'd like to use the backend without build the frontend before, maybe try to make some "fake dist" folder that will be replaced when building with the real one...

Road to stable!

Type safety and better code
Layouts
Support for vue, svelte, react
Assets support

allow filename to be either `index`, `main` or `page`

Option in the config, what should be default one?

Not allowed to load local resource

public folder wasn't copied during the build mode

Public dir doesn't get copied in the dist folder

Please provide a global entry for importing libraries, such as a UI framework in Vue.

Maybe like this：

export const vue = (file: string, css: string[], main?: string): string => {
    const generateImportMain = main ? `import {initApp} from '${main}'` : "";
    return `
    <div id="app"></div>
    <script type="module">
      import { createApp } from 'vue';
      ${generateImportMain}
      import App from '${file}';
      ${generateImports(css)}
      const app =createApp(App);
      initApp?.(app);
      app.mount('#app');
    </script>
  `;
};

Same as layout, it can be overridden locally. For the settings of the same page, I just need to provide a main.ts under src/pages.

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
import './assets/main.css'

import type {App} from 'vue'
import {createBootstrap} from 'bootstrap-vue-next'

export const initApp = (app: App<Element>) => {
    app.use(createBootstrap());
}

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.