Vue

A Vue app is a Vite app, so it deploys with GCP.Website.Vite. Vue Router’s history mode works out of the box: unknown paths answer with index.html.

Install

pnpm

pnpm add -D https://pkg.alchemy.run/@alchemy.run/frontend-frameworks/a870ed4

bun

bun add -d https://pkg.alchemy.run/@alchemy.run/frontend-frameworks/a870ed4

npm

npm install -D https://pkg.alchemy.run/@alchemy.run/frontend-frameworks/a870ed4

yarn

yarn add -D https://pkg.alchemy.run/@alchemy.run/frontend-frameworks/a870ed4

Docker has to be running when you deploy.

Scaffold the app

pnpm

pnpm create vite web --template vue-ts
cd web && pnpm install && cd ..

bun

bun create vite@latest web -- --template vue-ts
cd web && bun install && cd ..

npm

npm create vite@latest web -- --template vue-ts
cd web && npm install && cd ..

yarn

yarn create vite web --template vue-ts
cd web && yarn install && cd ..

Keep the generated vite.config.ts as it is.

Deploy the site

alchemy.run.ts

import * as Alchemy from "alchemy";
import * as GCP from "@alchemy.run/gcp";
import * as Effect from "effect/Effect";

export const Website = GCP.Website.Vite("Website", { rootDir: "./web" });

export default Alchemy.Stack(
  "MyVueApp",
  { providers: GCP.providers(), state: GCP.state() },
  Effect.gen(function* () {
    const site = yield* Website;
    return { url: site.url };
  }),
);

bun alchemy deploy

When you add Vue Router in history mode, deep links work as they are: the server answers unknown paths with index.html.

Local development

alchemy dev runs Vite’s dev server with hot reload.

Where next

• Vite — env values, base paths, and 404 pages.
• Nuxt — when you need server rendering.