https://github.com/wspl/vite-static-component
https://github.com/wspl/vite-static-component
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/wspl/vite-static-component
- Owner: wspl
- License: mit
- Created: 2022-12-09T14:28:19.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-10T09:28:13.000Z (over 3 years ago)
- Last Synced: 2025-02-12T05:42:18.948Z (over 1 year ago)
- Language: TypeScript
- Size: 52.7 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vite-static-component
A Vite plugin that allows you to pre-render a subset of components in your project based on server-side rendering (SSR) technology. Using this plugin is simple and requires only a few easy configurations.
## Installation
To install this plugin, run the following command:
```sh
npm i -D vite-static-component
```
## Usage
1. Add a mount anchor to an HTML file, such as `#static`
```html
Example
```
2. Create a file named `static-entry.ts`
```typescript
import { createSSRApp, createApp } from 'vue'
import Static from './Static.vue'
export function createStaticApp() {
// Currently, static generation is only used in production in order to reduce complexity in development.
if (import.meta.env.PROD) {
return createSSRApp(Static)
} else {
return createApp(Static)
}
}
export function renderStatic() {
return createStaticApp().mount('#static')
}
```
This file is the entry point for your statically-rendered component, and it actually creates a new Vue SSR app.
3. Then, in the entry point of your application, call the `renderStatic` function you just created.
```typescript
import { createApp } from 'vue'
import App from './App.vue'
import { renderStatic } from './static-entry'
createApp(App).mount('#app')
// Call the render function (It actually performs the hydration work in SSR.)
renderStatic()
```
4. Finally, import this plugin in your vite.config.ts file and specify the entry point file you just created, as well as the selector for the anchor you added to the HTML file.
```typescript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import staticComponent from 'vite-static-component'
export default defineConfig({
plugins: [
vue(),
// Add and configure the plugin to vite.
staticComponent({
entry: 'src/static-entry.ts',
selector: '#static',
})
],
})
```
5. Now, you can build your project to see the resulting output.
## License
MIT License © 2022-PRESENT Plutonist Fu