WeWeb Export Code: How to Export and Self-Host Your Vue.js Project

Code export is only available on the Essential seat plan ($16/mo) and above. To check your plan, click your workspace avatar in the top-left corner of the WeWeb editor → Workspace Settings → Billing. You will see your current Seat Plan. If you are on the Free plan, you will need to upgrade to Essential before proceeding. The Free plan includes WeWeb Cloud hosting but not the ability to export code or use GitHub sync. Once on Essential or higher, the Export option will appear in your project settings.

WeWeb generates your export from the last published version of your project, not from unsaved editor changes. Click the Publish button in the top-right corner of the editor. In the publish dialog, choose your target environment (Production or Staging if on Scale hosting plan) and click Publish. Wait for the build to complete — this typically takes 30-90 seconds depending on project size. The publish step compiles your Vue.js SPA and makes it available for both WeWeb Cloud hosting and code export. If you skip this step, your export will contain the previous published version, not your latest changes.

From the WeWeb editor, click the gear icon in the left navigation bar to open App Settings. Scroll down to find the Export section (or navigate to your project dashboard at app.weweb.io, select your project, and look for the Export option). Click Export Code. WeWeb will prepare a zip file containing two folders: one with built/compiled files (ready for immediate deployment) and one with raw project files (uncompiled source). The download will start automatically. The zip file is named after your project. Extract it to inspect the contents before deploying.

Before deploying, audit your project for plugins that route through WeWeb's microservices — these will break when self-hosted. The following plugins stop working after export: Airtable (routes through WeWeb proxy), WeWeb Auth (uses WeWeb's auth servers), OpenAI and Gemini plugins (use WeWeb API key management), Stripe plugin (routes through WeWeb), SQL direct connections, SOAP APIs, and some Google service integrations. Plugins that continue working after export: REST API calls to your own backend, Supabase native plugin (direct to your Supabase project), Xano native plugin (direct to your Xano instance), custom JavaScript, and CSS. If your project uses breaking plugins, you will need to replace them with direct REST API calls to the same services before exporting.

WeWeb exports a Vue.js SPA — a single-page application where all routes are handled client-side. Most hosting platforms serve static files and will return a 404 error when users navigate directly to a deep URL like /dashboard/settings because no physical file exists at that path. You must configure a fallback that serves index.html for all routes. For Vercel: create a file named vercel.json in the root of your extracted built folder with the rewrite rule shown in the code example below. Then drag-and-drop the built folder onto Vercel, or use the Vercel CLI (npx vercel) from within the built folder. Vercel will auto-detect a static site and deploy it.

1// vercel.json — place in root of your WeWeb built folder before deploying
2{
3  "rewrites": [
4    {
5      "source": "/(.*)",
6      "destination": "/index.html"
7    }
8  ]
9}

Cloudflare Pages is the recommended self-hosting option for WeWeb projects due to its global CDN, free plan, and zero-configuration SPA support. Log into your Cloudflare dashboard at dash.cloudflare.com. Navigate to Pages → Create a project → Upload assets. Drag and drop your entire built folder contents (not the folder itself, but the files inside it) into the upload area. Click Deploy. Cloudflare Pages automatically handles SPA routing without requiring a configuration file. Once deployed, you will receive a pages.dev subdomain. You can connect a custom domain via Pages → your project → Custom domains. Cloudflare's edge network distributes your app globally, typically resulting in faster load times than other hosts for international users.

Instead of manually exporting and uploading a zip file each time, GitHub sync automates the entire process. In the WeWeb editor, navigate to App Settings → Git Integration (or find the GitHub icon in the left navigation bar). Connect your GitHub account via OAuth. Create a new repository or select an existing one. Once connected, every time you publish your WeWeb project, WeWeb automatically pushes the latest compiled code to your connected GitHub repository. You can then configure Vercel or Netlify to auto-deploy when changes are pushed to your GitHub repo. In Vercel: Projects → Import Git Repository → select your WeWeb repo → configure output directory as the built folder → Deploy. Now your workflow is: edit in WeWeb → Publish → GitHub auto-updates → Vercel auto-deploys.

After deployment, run through a checklist to verify everything works correctly. Open your deployed URL in a fresh browser window (not the WeWeb editor preview). Test direct URL navigation by typing a deep route like /dashboard directly in the browser address bar — it should load correctly rather than showing a 404. Test all data-fetching features: collections should load from your backend, forms should submit, authentication flows should complete. Open browser DevTools → Network tab and look for any failed requests. Common issues to check: CORS errors from your backend (your deployed domain needs to be whitelisted), any plugin still pointing to WeWeb microservices, and asset loading errors for images or fonts hosted on WeWeb's CDN.