# simple-vite-vue-ssr

> SSR util with vite and vue, with single entry and simple state

Latest version **1.0.7** (published 2023-04-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install simple-vite-vue-ssr
pnpm add simple-vite-vue-ssr
yarn add simple-vite-vue-ssr
bun add simple-vite-vue-ssr
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2023-04-08 |
| First published | 2023-02-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 33.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | wayzer |
| Maintainers | wayzer |
| Keywords | vite, plugin, ssr, vue |

## Links

- npm: https://www.npmjs.com/package/simple-vite-vue-ssr
- Repository: https://github.com/way-zer/NpmPackages.git#master
- Homepage: https://github.com/way-zer/NpmPackages/tree/master#readme
- Issues: https://github.com/way-zer/NpmPackages/issues
- npm.io page: https://npm.io/package/simple-vite-vue-ssr

## Dependencies (1)

- [simple-vite-vue-ssr](https://npm.io/package/simple-vite-vue-ssr.md) ^1.0.4

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.0.7 (latest) — 2023-04-08
- 1.0.6 — 2023-02-09
- 1.0.5 — 2023-02-06
- 1.0.4 — 2023-02-06
- 1.0.3 — 2023-02-06
- 1.0.2 — 2023-02-06
- 1.0.1 — 2023-02-06
- 1.0.0 — 2023-02-06

## README

# SSR for vite+vue

## Install

`pnpm add simple-vite-vue-ssr`

## Usage
### vite.config.ts
```ts
import viteSSR from "simple-vite-vue-ssr/plugin";

export default defineConfig(({mode, ssrBuild}) => {
    return {
        plugins: [
            viteSSR({
                // entryPoint: '/src/main.ts'
            }),
        ],
        build: {
            outDir: "dist/client",
        },
        ssr: {}
    }
})

```
### Index.ts
```ts
import App from "@/App.vue";
import viteSSR from "@/util/viteSSR";
import createRouter from "@/plugins/router";
import {createPinia} from "pinia";

export default viteSSR(App, async (ctx) => {
    //you must provide router
    ctx.router = createRouter()
    
    //use any state store you like
    const pinia = createPinia()
    ctx.app.use(pinia)
    if (ctx.kind == 'server') {
        //pass state to client
        ctx.state.pinia = pinia.state.value
    } else if (ctx.kind == 'client') {
        //read state from SSR rendered
        pinia.state.value = ctx.state.pinia
    }
})
```
### prodServer.ts
Build with `vite build --outDir dist/server --ssr src/prodServer.ts`
```ts
import * as http from "http";

import indexProd from '../dist/client/index.html?raw'
import manifest from '../dist/client/ssr-manifest.json'
import {createProdHandler} from "@/util/viteSSR/prodHandler";

const port = +(process.env["PORT"] || 6173)

;(async () => {
    http.createServer(createProdHandler({
        manifest, indexFile: indexProd,
        render: (await import("@/main")).default //split package
    })).listen(port)
    console.log('http://localhost:' + port)
})()
```
## License - MIT

I would thank you if you give this a star.

---
_Source: https://npm.io/package/simple-vite-vue-ssr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._