--- title: "Netlify | Deploy a Vue 3 & Vite on Netlify in 5 Minutes" description: "Learn how to deploy a Vue 3 and Vite app on Netlify in less than 5 minutes!" source: "https://www.netlify.com/blog/how-to-deploy-vue-3-and-vite-app-in-5-minutes/" last_updated: "2026-07-09T09:51:45.000Z" --- When starting a new project, you have a lot on your mind that you want to work on and build. The last thing you probably want to worry about is figuring out how to make sure your app is deployed in a reliable fashion. In this session, I’m going to show you how you can get a brand new Vue 3 + Vite app deployed and connected with continuous integration / deployment (CI/CD) in five minutes. ## Use a starter template If you want to start with a template so that you can jump straight into coding, just click on the Deploy to Netlify button below. This will automatically setup and connect a GitHub repo with your Netlify account so that you can skip all of the configuration and start working on your Vue 3 app! [![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/bencodezen/vue-3-vite-netlify-template) ## Build it from scratch On the other hand, if you’d like to see how everything was setup from the beginning, read on for detailed instructions on how you can set it all up from the terminal yourself! ### Prerequisites Before getting started, here are some tools that you’ll want to have installed on your system to make things easier: - [Node.js](https://nodejs.org/en/) 12 or greater (LTS recommended) - [GitHub CLI](https://cli.github.com/) - [Netlify CLI](https://docs.netlify.com/cli/get-started/) ### Steps to Deploy Your Vue 3 + Vite App With the brand new powerful [Vite](https://vitejs.dev/) scaffolding engine, here’s how you can get up and running in a matter of seconds. #### Step 1. Scaffold your project with Vite. Open up your terminal and run the following command: ``` npm create vite@latest YOUR_PROJECT_NAME -- --template vue ``` Navigate into your project directory with the following command: ``` cd YOUR_PROJECT_NAME ``` #### Step 2. Setup Git integration for your project. If you’re working with a new instance of GitHub CLI, make sure to start by logging in: ``` gh auth login ``` Once you do that, it’s time to initialize git in your project by running the following command: ``` git init ``` Create a new repo that’s connected to your account: ``` gh repo create ``` When prompted on what kind of repo you want to create, select: `Push an existing local repository to GitHub`. Follow the prompts to fill out the relevant project details. - **Repository name**: `YOUR_PROJECT_NAME` - **Repository description**: - **Visibility**: `Public` - **This will add an “origin” git remote to your local repository. Continue?** `Yes` Commit your initial scaffold and push up to the main branch with the following commands: ``` # Add all files to staginggit add . # Commit changes with short message on the change madegit commit -m "feature: scaffold vue 3 and vite project" # Push changes to main branchgit push origin main ``` #### Step 3. Deploy your app It’s time to connect our new app with Netlify! If you’re not logged in already, you can do so by running command below and following the prompts to authenticate the CLI: ``` netlify login ``` Next, we’ll want to initialize a brand new project with Netlify using the following command: ``` # Initialize a new project with Netlify CLInetlify init ``` Fill out the following prompts for a brand new project: - **What would you like to do?** `Create & configure a new site` - **Team:** `YOUR_TEAM` - **Site name (optional):** `CHOOSE_UNIQUE_SITE_NAME` The following prompts should be have prefilled defaults since Netlify will automatically detect what project you have. So you can just hit enter to use the defaults. - **Your build command (hugo build/yarn run build/etc):** `(vite build)` - **Directory to deploy (blank for current dir):** `(dist)` - **Netlify functions folder:** `(netlify/functions)` - **No netlify.toml detected. Would you like to create one with these build settings?** `(Yes)` With that, we’re just one step away from finishing the deployment! Because we’re using Vue 3 in SPA mode, this means that we’ll need to update the `netlify.toml` file by uncommenting the `redirects` block. The resulting `netlify.toml` should look like the following: ``` # example netlify.toml[build] command = "vite build" functions = "netlify/functions" publish = "dist" ## Uncomment to use this redirect for Single Page Applications## Not needed for static site generators.[[redirects]] from = "/*" to = "/index.html" status = 200 ``` Now we just need to commit our change and push it up to our repo with the following commands: ``` # Add all files to staginggit add . # Commit changes with short message on the change madegit commit -m "config: add netlify deploy files" # Push changes to main branchgit push origin main ``` And because we’ve hooked up Netlify to our GitHub repo, this means Netlify will automatically pick up the changes and deploy our app! #### Step 4. Celebrate! To check on the fruits of our labor, let’s run the following command: ``` netlify open:site ``` This will open up the website that has been deployed! And if you want to check on the status of your site and see what other great features you can play with, you can directly open up the dashboard for your app by running: ``` netlify open ``` ## Final Thoughts And just like that, your Vue 3 and Vite project is now configured with continuous integration and deployment! 🎉 This means that whenever you push changes to your `main` branch, Netlify will automatically kick off a new build and deploy it so everyone can see your changes without you lifting a single finger. 🙌 For additional resources on how you can continue to further leverage Netlify to build out more robust apps, be sure to check out the following resources: - [Up and Running with Serverless Functions (Free Course)](https://www.youtube.com/watch?v=PCDhpRms4Ek&list=PLzlG0L9jlhENl1o2vLw6vFKvHBb9D5A0u) - [Netlify Forms](https://docs.netlify.com/forms/setup/) I look forward to seeing what awesome projects y’all build with Vue 3, Vite and Netlify! ### Share - [X (fka Twitter)](https://twitter.com/intent/tweet?text=How to Deploy Vue 3 and Vite App in 5 Minutes&url=https://www.netlify.com/blog/how-to-deploy-vue-3-and-vite-app-in-5-minutes/) - [LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fwww.netlify.com%2Fblog%2Fhow-to-deploy-vue-3-and-vite-app-in-5-minutes%2F) - [Facebook](https://www.facebook.com/sharer.php?u=https://www.netlify.com/blog/how-to-deploy-vue-3-and-vite-app-in-5-minutes/) - [Bluesky](https://bsky.app/intent/compose?text=How to Deploy Vue 3 and Vite App in 5 Minutes+https://www.netlify.com/blog/how-to-deploy-vue-3-and-vite-app-in-5-minutes/) * * * ### Tags - [vite](/blog/tags/vite/) - [Vue 3](/blog/tags/vue-3/) - [Vue](/blog/tags/vue/) ## Keep reading ![](/_astro/3f45eb6eda4ea8814be310e3df4a7883a5bd9ba0-1200x675_ZcBDUS.webp) Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/8fe9e8a23f944c9912003233d99a2df7fee637cf-1600x900_Z1gMhmf.webp) Guides & Tutorials May 15, 2026 [ ### Tracking AI search traffic: how to use Netlify Log Drains to maximize AEO ](/blog/tracking-ai-search-traffic) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ## Recent posts News & Announcements June 25, 2026 [ ### Netlify Functions, designed for Agent Experience ](/blog/netlify-functions-designed-for-agent-experience) - ![Profile picture of Eduardo Bouças](/_astro/52958f21e8450baf6d8e60302341a984e220c0cd-512x512_13VDlu.webp) Eduardo Bouças News & Announcements June 24, 2026 [ ### How we measure Netlify’s Agent Experience ](/blog/how-we-measure-netlify-agent-experience) - ![Profile picture of Sean Roberts](/_astro/bbf2243f8171dbddd80ab2103622106cef84d125-512x512_Z1d2LKE.webp) Sean Roberts Guides & Tutorials May 15, 2026 [ ### How to build a real-time AI chatbot in minutes with Netlify Agent Runners (no backend) ](/blog/how-to-build-a-real-time-ai-chatbot-in-minutes-with-netlify-agent-runners-no-backend) - ![Profile picture of Nahrin Jalal](/_astro/f0e7c8f227a03fe58340c99ef5439d5a896c0733-272x272_Z23kDpD.webp) Nahrin Jalal ![](/_astro/3f255b372fa958df35802666ee33b4609b2d71bd-1200x1586_1VtE2D.webp) ### How do the best dev and marketing teams work together? [Access the report](https://www.netlify.com/reports/2024-leadership-trend-report/access/)