> ## Documentation Index
> Fetch the complete documentation index at: https://docs.liteshop.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue

> Build a Vue Site with Vite and deploy its static output to Liteshop.

Liteshop hosts the static files a Vue build produces. This guide uses [Vite](https://vite.dev), whose default output works on Liteshop without extra configuration.

## Before you begin

* Install [Node.js](https://nodejs.org) 22 or later.
* Sign in to the [Liteshop dashboard](https://app.liteshop.me).

## Create the app

```sh theme={null}
npm create vite@latest my-site -- --template vue-ts
cd my-site
npm install
```

## Add the manifest

Vite copies everything in `public/` to the root of the build, so put `liteshop.json` there:

```json theme={null}
{
  "$schema": "https://docs.liteshop.me/schemas/site-v0.1.json",
  "specVersion": "0.1",
  "site": {
    "name": "My Site",
    "defaultLocale": "en",
    "supportedLocales": ["en"],
    "timezone": "Europe/Paris"
  },
  "frontend": {
    "entry": "index.html"
  },
  "capabilities": {
    "forms": [
      {
        "id": "contact",
        "name": { "en": "Contact" },
        "fields": [
          { "id": "email", "type": "email", "label": { "en": "Email" }, "required": true },
          { "id": "message", "type": "textarea", "label": { "en": "Message" }, "required": true }
        ]
      }
    ]
  }
}
```

Leave `capabilities` as `{}` if the Site has no Form. The [Site Bundle reference](https://docs.liteshop.me/reference/site-bundle.md) lists every field.

## Add the SDK

Install the Liteshop SDK:

```sh theme={null}
npm install @liteshop.ai/sdk
```

Import `liteshop` from it wherever the Site uses Forms, bookings or the catalogue. It calls the Site's own Liteshop endpoints and includes its TypeScript types.

To try Forms with `npm run dev`, add the Liteshop plugin to `vite.config.ts`:

```ts theme={null}
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { liteshop } from "@liteshop.ai/sdk/vite";

export default defineConfig({
  plugins: [vue(), liteshop()],
});
```

On the dev server, the plugin answers the SDK from `liteshop.json`: Form submissions are checked and printed in the terminal, the catalogue lists every item as available, and nothing is saved or sent to Liteshop.

## Submit a Form

Import the SDK and pass the Form ID as a literal string. Liteshop reads `liteshop.forms.submit("contact", ...)` from your built JavaScript to check that every declared Form has a handler. For example, put the Form in `src/App.vue`:

```vue theme={null}
<script setup lang="ts">
import { ref } from "vue";
import { liteshop } from "@liteshop.ai/sdk";

const status = ref<"idle" | "sent" | "error">("idle");

async function submit(event: Event) {
  const form = event.currentTarget as HTMLFormElement;
  const data = new FormData(form);
  try {
    await liteshop.forms.submit("contact", {
      email: String(data.get("email")),
      message: String(data.get("message")),
    });
    form.reset();
    status.value = "sent";
  } catch {
    status.value = "error";
  }
}
</script>

<template>
  <form @submit.prevent="submit">
    <label>Email <input name="email" type="email" required /></label>
    <label>Message <textarea name="message" required /></label>
    <button type="submit">Send</button>
    <p v-if="status === 'sent'">Thanks, your message was sent.</p>
    <p v-if="status === 'error'">Your message could not be sent. Try again.</p>
  </form>
</template>
```

`@submit.prevent` stops the browser's own submit. Don't add `method="post"` or an `action` to the form. See the [Forms reference](https://docs.liteshop.me/reference/forms.md) for field types and the anti-spam field.

## Build and package the Site

```sh theme={null}
npm run build
cd dist
zip -r ../site.zip .
```

The ZIP must have `index.html` and `liteshop.json` at its root, which zipping the contents of `dist` gives you.

## Upload the Site

To publish a new Site:

1. In the [Liteshop dashboard](https://app.liteshop.me), click **Website** > **Upload files**.
2. Enter the Site name and subdomain, and select `site.zip`.
3. Click **Check and publish**.

To update a Site, open **Website settings** (the gear button on the **Website** page), and upload the new ZIP file in **Upload an update**. An update's `liteshop.json` must name the live version in `baseDeployment`. If the value is missing or out of date, validation fails, and its repair message gives the exact value to set in `public/liteshop.json`. For details, see [Publish and manage a Site](https://docs.liteshop.me/develop/deploy.md).

## Routing

For a client-side router such as Vue Router with `createWebHistory`, set `fallback` in `public/liteshop.json`:

```json theme={null}
"frontend": {
  "entry": "index.html",
  "fallback": "index.html"
}
```

Liteshop then serves `index.html` with status 200 for any path without a file extension that matches no file, such as `/shop/oil`, and your router renders the page. Vite links its assets from the site root (`/assets/…`), so they load from any path. Paths with an extension, such as a missing image, still get Not Found.

## What runs on Liteshop

Liteshop hosts static output only: no server rendering, API routes or server functions. The Site's security policy blocks scripts, styles and network requests to other origins, frames, workers and `eval`. Validation warns when your build appears to use one of those features, and fails on external scripts and frames. Vite's module preload code mentions `fetch`, so every Vue build gets that warning; you can ignore it if your own code doesn't call `fetch`.

## Dashboard edits

Site Owners can edit catalogue items, collections, and stock in the dashboard, which publishes a new Deployment from your files without rebuilding your app. Read the catalogue in the browser with `liteshop.catalogue.list()`. Don't import `liteshop.json` or render catalogue items at build time; otherwise, dashboard edits don't appear on the Site until you rebuild and upload it again. See the [Catalogue reference](https://docs.liteshop.me/reference/catalogue.md).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.