🗒️ Начало работы

Установка

1. Установка зависимостей (Vue):

pnpm i lite-ssr @unhead/vue 

2. Заменяем createApp на createApp из lite-ssr и экспортируем приложение

import { createApp } from 'lite-ssr/vue'
import './style.css'
import App from './App.vue'

const app = createApp(App)
app.mount('#app');

export default app // Обязательно экспортируем app

::: info Экспортировать приложение требуется для того, чтобы lite-ssr мог использовать один entry-файл для рендера приложения на сервере и клиенте, а так же для проброса префетч-данных между сервером и клиентом. :::

3. Создание файла конфигурации /lssr.config.ts

// lssr.config.ts
import { defineLssrConfig } from "lite-ssr";

export default defineLssrConfig({
    entry: "/src/main.ts",
    head: {
        title: "LSSR App"
    }
});

4. kmv5 конфигурации вtsconfig.node.json

// tsconfig.node.json
{
  ...
  "include": ["lssr.config.ts"]
}

5. Меняем команды запуска и сборки в package.json

{
    "scripts": {
        "dev": "lssr --framework=vue",
        "build": "lssr --framework=vue --build",
        "serve": "lssr --framework=vue --serve",
    },
}

Запуск проекта

Запуск в dev-режиме:

pnpm run dev

Сборка проекта:

pnpm run build

Запуск проекта в production-режиме:

pnpm run serve