Package Exports

vite-ssg

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vite-ssg) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vite SSG

Server-side generation for Vite.

ℹ️ Vite 2 is supported from v0.2.x, Vite 1's support is discontinued.

Install

This library requires Node.js version >= 14

npm i -D vite-ssg vue-router @vue/server-renderer @vue/compiler-sfc

// package.json
{
  "scripts": {
    "dev": "vite",
-   "build": "vite build"
+   "build": "vite-ssg build"
  }
}

// src/main.ts
import { ViteSSG } from 'vite-ssg'
import App from './App.vue'

// `export const createApp` is required
export const createApp = ViteSSG(
  // the root component
  App,
  // vue-router options
  { routes },
  // function to have custom setups
  ({ app, router, isClient }) => {
    // install plugins etc.
  }
)

// vite.config.js
import Vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    Vue({
      ssr: !!process.env.VITE_SSG // <-- add this
    })
  ]
}

Client Only

<client-only>
  <your-components>
</client-only>

Component ClientOnly is registered globally along with the app creation.

Document head

From v0.4.0, we ships @vueuse/head to manage the document head out-of-box. You can directly use it in your pages/components, for example:

<template>
  <button @click="count++">Click</button>
</template>

<script setup>
import { useHead } from '@vueuse/head'

useHead({
  title: 'Website Title',
  meta: [
    {
      name: `description`,
      content: `Website description`,
    },
  ],
})
</script>

That's all, no configuration needed. Vite SSG will handle the server-side rendering and merging automatically.

Refer to @vueuse/head's docs for more usage about useHead.

Comparsion

Use Vitepress when you want:

Zero config, out-of-box
Single-purpose documentation site
Lightweight (No double payload)

Use Vite SSG when you want:

More controls on the build process and tooling
The flexible plugin systems
Multi-purpose application with some SSG to improve SEO and loading speed

Cons:

Double payload

Example

See Vitesse

JSPM

vite-ssg