How to Fix “DNS_PROBE_FINISHED_NXDOMAIN” Error When Deploying Vue.js on Vercel
Direct Answer: DNS_PROBE_FINISHED_NXDOMAIN occurs when a browser cannot resolve a custom domain because the DNS record no longer exists or is misconfigured, often after moving a Vue.js app to Vercel. Fix it by verifying the domain’s DNS records, ensuring the apex domain points to Vercel’s nameservers, and confirming that the Vue router base URL matches the deployed origin.
Quick fix for the NXDOMAIN error when linking a custom domain to a Vue.js app on Vercel.
At 02:14 UTC on 12 September 2023, the on‑call engineer saw a pager alert from Opsgenie: “DNS_PROBE_FINISHED_NXDOMAIN for api.example.dev.” The production Vue.js landing page, just deployed from feat/login-flow, stopped responding to traffic. The incident forced a rollback and a three‑hour window to restore the custom domain.
What triggers DNS_PROBE_FINISHED_NXDOMAIN on Vercel?
The error appears when a client’s DNS lookup returns “Non‑Existing Domain.” This can happen for three technical reasons:
Apex domain missing an A/ANAME record. Vercel requires the apex (example.com) to resolve to its edge IP (e.g., 76.76.21.21). If the record is missing or points elsewhere, browsers receive NXDOMAIN.
Incorrect name‑server configuration. If the domain’s NS records still point to the previous hosting provider, the lookup fails after the domain is transferred.
Stale DNS cache. Even with correct records, cached entries can linger for up to 48 hours, causing temporary NXDOMAIN until the cache expires.
A quick diagnostic is to run a live curl against the domain while the deployment is live:
$ curl -v https://staging.myapp.com
* Resolving staging.myapp.com:443 port 0
* problem: unable to resolve host staging.myapp.com
* Closing connection port 0
curl: (6) Could not resolve host staging.myapp.com: Name or service not known
The output confirms the host is not reachable at the DNS level. This is the exact symptom that triggers the browser’s “page not found” with the NXDOMAIN label.
How does DNS resolution actually work when Vercel builds a Vue.js static site?
When a Vercel project publishes a Vue.js application, the platform generates static files and configures edge rules. The custom domain is added via the “Domains” tab, which creates two DNS actions:
Add an A record at the apex. The record’s value is Vercel’s edge IP (e.g., 76.76.21.21). The TTL is set to 60 seconds, ensuring rapid propagation.
Add a CNAME for www.example.com. The target is example.com. (the apex). This keeps the www subdomain consistent with the apex.
Vercel also injects a X‑Vercel‑Edge‑URL header into every request, which contains the deployment’s origin. The Vue router reads the base value from index.html. If the base is set to but the static HTML references a different origin (e.g., ), the router will issue a redirect that the browser follows, resulting again in a DNS lookup for the same domain.
About the author
Admin SarangAI · AI Tools Editor
Part of the SarangAI editorial team covering AI tools, product releases, emerging technology trends, and practical web utilities for developers and creators.
Browser → DNS(Lookup example.com) → A(76.76.21.21) → Edge → Returns index.html
Edge includes base="/", router sees request for /dashboard → internal redirect
Redirect triggers new request to same domain → DNS again → success
If any step fails, the final DNS lookup returns NXDOMAIN.
A real outage: the launch day incident that caused NXDOMAIN for a Vue.js landing page
On 12 September 2023 at 01:58 UTC, the marketing team launched a new Vue.js feature branch directly to the production Vercel project. The deployment succeeded, but the custom domain api.example.dev remained unresolved. The error log from the Vercel dashboard showed:
[2023-09-12T01:58:12Z] Domain verification failed: No A record found for api.example.dev
[2023-09-12T02:01:45Z] DNS query from edge: NXDOMAIN
The root cause was a stale NS record. The domain was originally hosted on AWS Route 53, and the NS records had been updated 12 hours earlier, but the caching name server still served the old values. The TTL for the NS set was 86 400 seconds, meaning the change took up to 24 hours to fully propagate.
Resolution steps (completed within 45 minutes):
Forced a DNS refresh on the domain registrar.
Added a temporary A record api.example.dev 300 IN A 76.76.21.21 to bypass the NS issue.
Verified propagation using the free DNS propagation checker on SarangAI.
Removed the temporary record after the NS propagation was confirmed.
Updated the Vue router’s base URL to match the new origin.
The incident highlighted the importance of checking both apex and subdomain records, especially after a platform migration.
Step‑by‑step remediation: fixing the NXDOMAIN on Vercel
Open the Vercel project dashboard → Settings → Domains. Expected result: A list of verified domains appears, with a green “verified” badge next to the custom domain.
Click “Add new domain” and type the custom domain (e.g., example.com). Expected result: Vercel sends a verification TXT record to the DNS manager.
Copy the TXT record value (e.g., vercel=abc123def456) and add it to your domain registrar. Expected result: The domain is verified within 5‑10 minutes; the badge turns blue.
Return to the domain’s DNS settings and ensure the apex has an A record pointing to Vercel’s edge IP (76.76.21.21). Expected result: Running dig example.com returns the correct IP.
Add a CNAME for www.example.com pointing to example.com. (if you need the www subdomain). Expected result:dig www.example.com resolves to the same IP.
Update the Vue router’s base in public/index.html to match the deployed origin. Expected result: The static HTML contains <base href="/"/> and the router correctly routes client‑side navigation.
Trigger a new deployment from Vercel’s “Deployments” tab. Expected result: The new build includes the corrected base and the domain becomes accessible.
Validate using the free DNS lookup tool on example.com. Expected result: The CLI reports “A record present and correct” and “Domain verified on Vercel”.
After these steps, a manual curl -I https://example.com should return an HTTP/2 200 status with the X‑Vercel‑Edge‑URL header present.
Common mistakes developers make that cause NXDOMAIN on Vercel
Missing apex A record, adding only a CNAME. Wrong:example.com CNAME → example.com. (invalid at apex). Right: Add an A record example.com → 76.76.21.21 and a CNAME for www.
Using the wrong record type for a subdomain. Wrong:api.example.com A → 192.0.2.1. Right:api.example.com CNAME → example.com. (or ALIAS if using Cloudflare).
Ignoring the TTL when migrating DNS providers. Wrong: Setting TTL to 1 hour after moving, expecting instant resolution. Right: Set TTL to 60 seconds for A/ANAME records to accelerate propagation.
Incorrect Vue base URL after domain change. Wrong:<base href="/old/"/> while the app is deployed at root. Right: Update base to match the new deployment path, then redeploy.
Relying solely on Vercel’s preview deployment for production DNS checks. Wrong: Assuming preview URLs resolve the same as production. Right: Use the SarangAI SSL chain checker on the production domain to confirm certificate and DNS alignment.
How to verify DNS configuration from the command line
Use dig to confirm the A and CNAME records, then inspect the certificate chain with OpenSSL:
Those two commands expose the same DNS and TLS signals without a vendor-specific client.
Key Takeaways
DNS_PROBE_FINISHED_NXDOMAIN is caused by missing apex A/ANAME, stale NS records, or wrong Vue base URL.
The fix requires adding the correct DNS record, verifying the domain via Vercel’s TXT check, and updating the Vue router’s base.
Use the free DNS propagation checker on SarangAI and dig for rapid verification.
Common pitfalls include using CNAME at apex, ignoring TTL, and mismatched base URLs.
Frequently Asked Questions
Can I fix NXDOMAIN without touching DNS?
No. The error originates from DNS resolution. Even if the Vue app builds correctly, a missing or incorrect DNS record will cause NXDOMAIN. Verify the DNS settings first, then adjust the Vue base URL.
Does Vercel’s preview deployment affect NXDOMAIN on the production domain?
Preview deployments have their own sub‑domains (deploy‑xyz.vercel.app). They do not influence the production custom domain’s DNS. The NXDOMAIN you see is tied to the production domain, not the preview URL.
Is a missing CNAME the same as a missing A record?
Both cause NXDOMAIN, but the fix differs. An A record is required at the apex; a CNAME is needed only for the www subdomain. Adding the appropriate record type resolves the error.
How do I confirm the Vue base URL is correct?
Inspect the generated index.html in the Vercel deployment logs or fetch it via curl https://example.com/index.html. The <base href="/"/> tag should match the deployed origin. You can also retrieve the static file with curl https://example.com/index.html and inspect the <base> tag directly.
