# Configuring plugin

Default export provides Plugin API.

# Config File

import { defineConfig } from 'vite'
import ssrgPlugin from 'vite-plugin-ssr-ssg'

export default defineConfig({
  plugins: [ssrgPlugin()]
})

# Build Options

# build.outDirClient

• Type: string

• Default: client

Specify the output client directory on SSR (relative to project root).
This is combined with build.outDir.

Example:
Output: build.outDir / build.outDirClient

# build.outDirServer

• Type: string

• Default: server

Specify the output server directory on SSR (relative to project root). This is combined with build.outDir.

Example: build.outDir / build.outDirServer

# Generate Options

# generate.routes

• Type: string[] | () => Promise<string[]>

This option is inspired by generate.routes in Nuxt.js.

If you want vite-plugin-ssr-ssg to generate routes with dynamic parameters, you need to set the generate.routes property to an array of dynamic routes.

Example:

.
├── index.vue
└── users
    └── [id].vue

Only the root / is generated by vite-plugin-ssr-ssg.

Add root for /users/:id:

export default defineConfig({
  plugins: [
    ssrgPlugin({
      generate: {
        routes: ['/users/1', '/users/2', '/users/3']
      }
    })
  ]
})

And if you run vite-ssrg generate:

vite-plugin-ssr-ssg pre-rendered:

✔ Generated route "dist/index.html"

If there are dynamic parameters, use Function which returns Promise.

# Function which returns a Promise

import axios from 'axios'

export default defineConfig({
  plugins: [
    ssrgPlugin({
      generate: {
        routes: () => {
          return axios.get('https://my-api/users').then((res) => {
            return res.data.map((user) => {
              return '/users/' + user.id
            })
          })
        }
      }
    })
  ]
})