---
title: "Deploy OpenPanel Vue"
description: "Product analytics for Vue and Nuxt apps on your own server"
category: "Analytics"
url: https://railway.com/deploy/deploy-openpanel-for-vue-apps
---

# Deploy OpenPanel Vue

Product analytics for Vue and Nuxt apps on your own server

**[Deploy OpenPanel Vue on Railway](https://railway.com/template/deploy-openpanel-for-vue-apps)**

Machine-readable deploy manifest (JSON, validated by TemplateCI): https://railway.com/deploy/deploy-openpanel-for-vue-apps/manifest.json

- **Creator:** onepush
- **Category:** Analytics

## Template content

### op-proxy

- **Image:** caddy:2-alpine@sha256:d8542f48d34a9cf4e4c11a478865229840e87e4c96ea3f439101f31a5d35f75f
- **Start command:** `sh -c "echo \"$CADDYFILE\" > /etc/caddy/Caddyfile; echo START_OK PORT=$PORT; cat /etc/caddy/Caddyfile; exec caddy run --config /etc/caddy/Caddyfile --adapter caddyfile"`
- **Public domain:** Yes

### op-postgres

- **Image:** ghcr.io/railwayapp-templates/postgres-ssl:17

### op-api

- **Image:** lindesvard/openpanel-api:2.3.0@sha256:cee4855cd715a7248c5c49090fe93a28ffc505541de20cb238d8884a6bcb9223
- **Start command:** `sh -c "echo Running migrations...; CI=true pnpm -r run migrate:deploy; exec pnpm start"`
- **Health check:** /healthcheck

### op-worker

- **Image:** lindesvard/openpanel-worker:2.3.0@sha256:b22e247fb6980b820c1a954d0e3d2fe88b3edf40a58aa53329467af239538e80
- **Health check:** /healthcheck

### op-redis

- **Image:** redis:8.2.1@sha256:5fa2edb1e408fa8235e6db8fab01d1afaaae96c9403ba67b70feceb8661e8621
- **Start command:** `/bin/sh -c "rm -rf ${RAILWAY_VOLUME_MOUNT_PATH}/lost+found/ && exec docker-entrypoint.sh redis-server --requirepass ${REDIS_PASSWORD} --bind '* -::*' --protected-mode no --port ${PORT:-6379} --save 60 1 --dir ${RAILWAY_VOLUME_MOUNT_PATH}"`

### op-dashboard

- **Image:** lindesvard/openpanel-dashboard:2.3.0@sha256:b773cf864454a0ec89b2a133b48bf06202880ed650a75cc2f1f5c87aaed1cffa
- **Health check:** /api/healthcheck

### op-clickhouse

- **Image:** clickhouse/clickhouse-server:25.12@sha256:8a790dd3468db22b1d4e7b18a176f378ff5ff6053b9c48dd4ea1fa71a24c5ba6
- **Start command:** `sh -c 'mkdir -p /etc/clickhouse-server/config.d && printf "%s\n" "<clickhouse><listen_host>::</listen_host><listen_host>0.0.0.0</listen_host><trace_log remove=\"remove\"/><text_log remove=\"remove\"/><metric_log remove=\"remove\"/><asynchronous_metric_log remove=\"remove\"/><processors_profile_log remove=\"remove\"/><query_metric_log remove=\"remove\"/><query_thread_log remove=\"remove\"/><query_views_log remove=\"remove\"/><asynchronous_insert_log remove=\"remove\"/><opentelemetry_span_log remove=\"remove\"/><background_schedule_pool_log remove=\"remove\"/></clickhouse>" > /etc/clickhouse-server/config.d/railway-listen.xml && exec /entrypoint.sh'`

## Documentation

# Deploy and Host self hosted OpenPanel Vue (Self-Hosted Product Analytics for Vue) on Railway

This template runs a self-hosted OpenPanel stack on Railway for Vue and Nuxt developers who want page views, custom events and identify calls on their own server.

## About Hosting OpenPanel Vue open-source software on Railway (self hosted self-hosted OpenPanel analytics in Vue and Nuxt apps template)

Self-hosting OpenPanel Vue keeps your page views, custom events and user profiles in a database you control.

## Why Deploy OpenPanel Vue, the Segment alternative on Railway (Railway Free Trial)

Segment charges by tracked volume and routes user events through its servers. Railway's $5 trial is enough to test the stack before you commit.

Railway is a singular platform to deploy your infrastructure stack. Railway will host your infrastructure so you don't have to deal with configuration, while allowing you to vertically and horizontally scale it.

By deploying OpenPanel Vue on Railway, you are one step closer to supporting a complete full-stack application with minimal burden. Host your servers, databases, AI agents, and more on Railway.

### Railway vs Other Hosting Providers and VPS for OpenPanel Vue self hosting

Self-hosting OpenPanel means running ClickHouse, Postgres, Redis and four app services, so compare where that stack lives.

| Provider | What You Get with Railway | What You Get with the Other Provider |
| --- | --- | --- |
| DigitalOcean | One-click template with all seven services wired together and one public domain. | A droplet you size yourself, plus a Compose setup you maintain. |
| AWS | The same template with no VPC or load balancer setup. | More networking control, but you own IAM, ECS or EC2 and the database wiring. |
| Hetzner | Managed deploys with built-in domains, so no SSH or reverse proxy config. | Cheap raw compute, but you install Docker, configure Caddy and patch the OS. |

Pick the option that matches how much infrastructure time you want to spend on analytics.

## Common Use Cases for hosted OpenPanel Vue

- **Page views across a Vue SPA:** Set `trackScreenViews: true` on the shared `OpenPanel` instance and route changes get recorded without wiring each page. Click through a few routes and confirm they show up before you trust the numbers.
- **Button clicks and signup funnels:** Call `op.track('signup_started', { plan: 'pro' })` from the component that owns the button, then build funnels from those named events. Keep event names stable, since a rename splits your history.
- **Identifying logged-in users:** After login, call `op.identify({ profileId: '123', email: 'joe@doe.com', properties: { tier: 'premium' } })`. Use your database id for `profileId`, because emails change.
- **Keeping behavior data in-house:** Events land in your own Postgres and ClickHouse on Railway instead of a third-party SaaS, which helps when users or legal ask where click data goes.
- **Revenue in a Nuxt storefront:** With the `@openpanel/nuxt` module, call `await op.revenue(29.99, { currency: 'USD' })` after checkout so revenue sits next to the events that led to it.

## Dependencies for OpenPanel Vue Docker hosted on Railway

The template runs seven services on Railway's private network, and only op-proxy is public. The first deploy takes a few minutes while ClickHouse and Postgres initialize.

### Deployment Dependencies for Managed OpenPanel Vue Service (Product Analytics)

You don't install these yourself. op-proxy runs caddy:2-alpine on port 8080 and routes /api/* to op-api and everything else to op-dashboard. op-api is the Fastify event API on port 3000, op-dashboard is Next.js on port 3000, and op-worker handles queued jobs.

### Implementation Details for OpenPanel Vue (Using OpenPanel official docker image)

The template sets the environment variables for you. One public domain means cookies work without a custom domain.

## How does OpenPanel Vue compare against other ways to add product analytics to Vue or Nuxt apps

Most Vue and Nuxt teams choose between a closed SaaS tool, a heavier open-source suite, or a privacy-first page counter. Here is how the self-hosted OpenPanel stack compares.

### OpenPanel Vue vs Google Analytics (Free Closed SaaS Alternative)

- **Data ownership:** Events land in your own ClickHouse on Railway, not Google's systems.
- **Per-user view:** `op.identify({ profileId, ... })` ties events to real user profiles, while GA4 mostly reports sessions.
- **Where GA wins:** It's free and plugs into Google Ads and Search Console with no setup.

### OpenPanel Vue vs PostHog (Open-Source Product Suite Alternative)

- **Scope:** PostHog bundles feature flags, session replay and experiments; OpenPanel focuses on funnels, cohorts, retention and revenue.
- **Vue setup:** OpenPanel's path is one shared `@openpanel/web` instance plus an optional `@openpanel/nuxt` module, which is less to configure.
- **Where PostHog wins:** If you want flags and replays next to analytics, it is the more complete suite.

### OpenPanel Vue vs Mixpanel (Closed Product Analytics Alternative)

- **Hosting:** Mixpanel keeps your event history on their infrastructure; self-hosted OpenPanel keeps it on your Railway project.
- **Feature overlap:** Both cover funnels, retention and user profiles, so the analysis workflow feels familiar.
- **Where Mixpanel wins:** It has a mature free tier, a polished UI and years of integrations with no database to run.

### OpenPanel Vue vs Plausible (Privacy-First Web Analytics Alternative)

- **Depth:** Plausible focuses on page-level traffic, while OpenPanel adds per-user profiles, custom events and revenue tracking.
- **Where Plausible wins:** It is simpler and easier to explain to non-technical stakeholders.
- **Choosing between them:** If you only need top pages, Plausible is enough; once you need events tied to logged-in users, OpenPanel fits better.

## How to use OpenPanel Vue (the OSS product analytics platform)?

1. Deploy the Railway template, open your Railway domain, create the first account and a project. Registration closes after the first user signs up.
2. Copy the client id from that project.
3. In the Vue app run `pnpm install @openpanel/web`. Vue SPAs use the web SDK directly.
4. Create `src/openpanel.ts` with the code below. Point `apiUrl` at your Railway domain with `/api` on the end.
5. Import `op` from `'@/openpanel'` and call `op.track('my_event', { foo: 'bar' })` or `op.identify({ profileId: '123', ... })`.
6. For Nuxt, add the `@openpanel/nuxt` module to `nuxt.config.ts` under the `openpanel` key with `clientId`, `apiUrl` and the tracking flags.

```typescript
// src/openpanel.ts
import { OpenPanel } from '@openpanel/web';

export const op = new OpenPanel({
  clientId: 'YOUR_CLIENT_ID',
  apiUrl: 'https://your-domain/api',
  trackScreenViews: true,
  trackOutgoingLinks: true,
  trackAttributes: true,
});
```

## How to self host OpenPanel Vue on other VPS Services (OpenPanel self hosting guide)

You can run the same stack on any VPS with Docker instead of Railway. The upstream docs ship a Docker Compose file and a setup script.

### Clone the Repository

Clone the OpenPanel repository onto your server and move into it. Check the upstream self-hosting docs for the exact path, since it can change between releases.

```bash
git clone https://github.com/Openpanel-dev/openpanel.git
cd openpanel
```

### Install Dependencies

Install Docker and the Compose plugin on the host. You don't need Node.js on the server, because the images carry their own runtime.

### Configure Environment Variables

Copy the example env file and set your domain. Point the API URL at your own host, since that's what your Vue app's `apiUrl` will use.

```bash
cp .env.example .env
# set API_URL=https://your-domain/api and DASHBOARD_URL=https://your-domain
# generate COOKIE_SECRET and the Postgres, Redis and ClickHouse passwords
```

### Start the OpenPanel Vue Application

Bring the stack up with Compose, then open your domain, create the first account, and copy the client id. Set `apiUrl` in `src/openpanel.ts` to `https://your-domain/api`.

## Official Pricing of OpenPanel Vue (OpenPanel pricing)

OpenPanel Vue is free and open source under AGPL-3.0, so self-hosting it costs you nothing in licence fees and you pay only for the Railway infrastructure it runs on.

## OpenPanel Vue cloud vs self hosted comparison (Pricing, features, costs, and more)

Running OpenPanel yourself on Railway trades a monthly bill for an infrastructure bill.

### Monthly cost of self hosting OpenPanel Vue on Railway

Expect roughly $20-40 a month at low volume on Railway. Railway's trial is $5, so you can test the full stack first. Self-hosting is free with unlimited events.

### System Requirements for Hosting OpenPanel Vue on a VPS

The stack is heavier than a typical Vue app because it runs ClickHouse beside Postgres and Redis.

## Frequently Asked Questions (FAQs)

### Do I need a separate Vue SDK for OpenPanel?

No. Nuxt is the separate path, using the `@openpanel/nuxt` module in `nuxt.config.ts`.

### Why are my page views missing in my SPA?

Turn on `trackScreenViews: true` in the constructor, because that is the documented option for automatic screen views in the web SDK.

### How do I set apiUrl for my Railway domain?

Set `apiUrl` to your public Railway domain with `/api` on the end, such as `https://your-domain/api`.

### How do I identify logged-in users?

Call `op.identify({ profileId: '123', email: 'joe@doe.com', properties: { tier: 'premium' } })` after login. The `profileId` is required, and the rest is optional.

### Does tracking work on the server?

Not with the web SDK, which only runs on the client. Server-side events need the Node SDK with your client id and client secret.

### What does the Railway deployment cost?

Expect roughly $20-40 per month at low volume, since ClickHouse, Postgres, Redis and four app services all run. The cost grows as event volume grows.


## Similar templates

- [Plausible WordPress](https://railway.com/deploy/deploy-plausible-for-wordpress-sites) — Cookie-free WordPress stats from your own Plausible
- [Typesense Multilingual](https://railway.com/deploy/deploy-typesense-multilingual-search) — Locale-aware multilingual search with Typesense
- [Formbricks](https://railway.com/deploy/formbricks-surveys) — Surveys, NPS and in-app feedback on your own Postgres, Hub and Cube

Open this page in a browser: https://railway.com/deploy/deploy-openpanel-for-vue-apps