Why Your Custom Domain Shows a Certificate Error After Adding It

You deployed a Vue 3 app to PandaStack, added a custom domain in the dashboard, updated your DNS, and visited the domain — only to see "Your connection is not private" with a certificate mismatch. The browser expected a certificate for yourapp.com but got one for *.pandastack.app instead.

This happens because SSL certificate provisioning takes a few minutes after you add a domain. PandaStack uses Let's Encrypt to issue certificates automatically, but it waits for DNS to propagate first. If you visit the domain too early, the old certificate is still active, and browsers reject it.

Deploy the Vue 3 app first

Your Vue project should have a vite.config.js:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist'
  }
});

Deploy it to PandaStack via the API:

curl -X POST https://api.pandastack.io/v1/projects \
  -H "Authorization: Bearer $PANDASTACK_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "slug": "static",
    "name": "vue-app",
    "repositoryName": "acme/vue-app",
    "branch": "main",
    "autoDeploy": true
  }'

The app is live at https://vue-app.pandastack.app with automatic SSL. Now you want to use yourapp.com instead.

Add the custom domain

Use the API to add your domain:

curl -X POST https://api.pandastack.io/v1/projects/<project-id>/domains \
  -H "Authorization: Bearer $PANDASTACK_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"domain": "yourapp.com"}'

PandaStack returns a CNAME target, usually .pandastack.app. Copy it.

Update DNS

Log in to your domain registrar (Cloudflare, Namecheap, Google Domains, etc.) and add a CNAME record:

• Type: CNAME
• Name: @ (for the root domain) or www (for a subdomain)
• Value: vue-app.pandastack.app

If your registrar doesn't support CNAME records at the root (@), use an ALIAS or ANAME record instead. Some registrars call it a "CNAME flattening" record.

Wait for DNS propagation

DNS changes take 5 minutes to 48 hours to propagate globally, depending on your TTL setting. Check propagation with dig:

dig yourapp.com CNAME +short

If it returns vue-app.pandastack.app, DNS is propagated. If it returns nothing or the old value, wait longer.

Force SSL certificate provisioning

Once DNS propagates, PandaStack detects the CNAME and requests a Let's Encrypt certificate. This usually happens automatically within 10 minutes. If it doesn't, trigger it manually:

curl -X POST https://api.pandastack.io/v1/projects/<project-id>/domains/<domain-id>/provision-ssl \
  -H "Authorization: Bearer $PANDASTACK_TOKEN"

The endpoint queues a certificate request. Check the status:

curl https://api.pandastack.io/v1/projects/<project-id>/domains/<domain-id> \
  -H "Authorization: Bearer $PANDASTACK_TOKEN"

Look for "sslStatus": "active". If it's "pending", the certificate is still being issued. If it's "failed", check the error message.

Common SSL failures

DNS_VALIDATION_FAILED: The CNAME record is missing or points to the wrong target. Verify with dig yourapp.com CNAME.

RATE_LIMIT_EXCEEDED: You requested too many certificates for the same domain in a short time. Let's Encrypt limits you to 5 per week per domain. Wait a few hours and try again.

CERTIFICATE_AUTHORITY_AUTHORIZATION_ERROR: Your domain has a CAA record that blocks Let's Encrypt. Add 0 issue "letsencrypt.org" to your DNS CAA records.

TIMEOUT: DNS hasn't propagated yet. Wait 15 minutes and retry.

Use the CLI

Add a custom domain via the CLI:

panda login
panda projects domain add vue-app yourapp.com

The CLI prints the CNAME target. Update your DNS, then check the status:

panda projects domain list vue-app

If SSL is pending, wait. If it's failed, the output shows the error.

Why the browser shows a certificate mismatch

Browsers cache SSL certificates for a few minutes. If you visited yourapp.com before the new certificate was provisioned, your browser cached the old *.pandastack.app certificate and keeps showing the warning even after the real certificate is ready.

Fix this by clearing your browser's SSL cache:

• Chrome/Edge: Go to chrome://net-internals/#sockets, click "Flush socket pools", then reload
• Firefox: Clear the cache (Preferences → Privacy & Security → Clear Data)
• Safari: Close all tabs for the domain, quit Safari, reopen

Or just wait 10 minutes and try again in a private/incognito window.

Deploy with multiple domains

You can add both yourapp.com and www.yourapp.com to the same project:

curl -X POST https://api.pandastack.io/v1/projects/<project-id>/domains \
  -H "Authorization: Bearer $PANDASTACK_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"domain": "yourapp.com"}'

curl -X POST https://api.pandastack.io/v1/projects/<project-id>/domains \
  -H "Authorization: Bearer $PANDASTACK_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"domain": "www.yourapp.com"}'

Add CNAME records for both:

• @ → vue-app.pandastack.app
• www → vue-app.pandastack.app

PandaStack issues separate certificates for each. Both domains serve the same Vue app.

Redirect www to non-www

If you want www.yourapp.com to redirect to yourapp.com (or vice versa), configure it in your DNS provider. Cloudflare, for example, has a page rule for this. PandaStack doesn't handle HTTP redirects at the platform level — it serves the app on every domain you add.

Update environment variables for the new domain

If your Vue app hardcodes the domain in API calls, update it:

const API_BASE_URL = import.meta.env.VITE_API_URL || 'https://yourapp.com/api';

Add VITE_API_URL as an environment variable in the dashboard, then redeploy. The new build will reference the custom domain instead of the default *.pandastack.app URL.

Remove a domain

If you made a mistake or want to change domains:

curl -X DELETE https://api.pandastack.io/v1/projects/<project-id>/domains/<domain-id> \
  -H "Authorization: Bearer $PANDASTACK_TOKEN"

Or use the dashboard: Settings → Custom Domains → Delete. The SSL certificate is revoked automatically.

What about apex domains with Cloudflare?

Cloudflare supports CNAME flattening, so you can add an apex domain (e.g., yourapp.com) as a CNAME record. Just set the CNAME to vue-app.pandastack.app and enable the orange cloud icon (proxied). Cloudflare handles the DNS translation, and PandaStack provisions the certificate normally.

References

• [Let's Encrypt rate limits](https://letsencrypt.org/docs/rate-limits/)
• [DNS propagation checker](https://dnschecker.org/)
• [PandaStack custom domains](https://docs.pandastack.io/projects/custom-domains)