Deploy a Vue, Vite, and Tailwind project to Vercel

Learn how to set up your Vue, Vite, and Tailwind project and deploy it instantly on Vercel.

Check out the Live Demo or...

In this guide, you'll set up a Vue 3, Vite, and Tailwind project and deploy instantly to Vercel. You can view the completed source code here as well as the deployed example.

Note: Prerequisites: You'll need Node.js installed, Git installed, and familiarity with the command line.

Setting Up Your Vue Project

In the past, Vue developers have primarily used the Vue CLI to compile Vue apps. In this tutorial, we'll explain how to create our project using Vue's new build tool, Vite.

Why Use Vite?

Vite is a build tool that aims to provide a faster and leaner development experience for modern web applications. By only compiling the code imported on the current screen, Vite makes Hot Module Replacement (HMR) consistently fast, whether your app contains 1 or 1,000 pages.

Create a New Vue 3 Project

To create a new Vue project using Vite, run the following command in your terminal.

npm init vite-app my-project

Create a new Vue and Vite application.

This command will create a new Vue project with the name my-project. Next, you can change into your project directory using the cd command and install all dependencies.

cd my-project && npm install

Change into your project directory and install dependencies.

Finally, run the following command to start the application locally.

npm run dev

Starts your Vue and Vite application at `localhost:3000`.

You should see the default Vue landing page on your screen.

Set Up Tailwind CSS

Now that we have our Vue project created, we can install Tailwind CSS.

After stopping your dev server, run the following command to install Tailwind and its peer dependencies.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Installing Tailwind dependencies.

Next, we can generate our tailwind.config.js and postcss.config.js files by running:

npx tailwindcss init -p

Initilizing Tailwind inside our project.

This will create a minimal tailwind.config.js file at the root of our project. Tailwind will look for any optional customizations in this file. If you want to learn more about customizing Tailwind classes, check out the configuration documentation.

In this file, we want to configure Tailwind to remove any unused styles in production. We can use the purge option with the paths to all of your pages and components.

module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Your tailwind.config.js file with the correct purge configuration.

The previous command also creates a postcss.config.js file with tailwindcss and autoprefixer already configured.

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

Your auto-generated postcss.config.js file.

We should already have an index.css file in our source folder. If not, be sure to create the .src/index.css file. In this file, we want to use the @tailwind directive to include Tailwind's base, components, andutilities styles. Replace the original .src/index.css contents with:

@tailwind base;
@tailwind components;
@tailwind utilities;

Your index.css file configured to use Tailwind.

Next, make sure your CSS file is being imported in your ./src/main.js file:

import { createApp } from 'vue';
import App from './App.vue';
import './index.css';

createApp(App).mount('#app');

Your main.js file importing your stylesheet.

Now, both Tailwind and Vue are installed in your project! After starting your dev server, you can begin adding Tailwind classes to your project and seeing your app update instantly. Finally, let's deploy our project.

Deploy Your Project With Vercel

To deploy your Vue, Vite, and Tailwind app with Vercel for Git, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git provider of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.

Once deployed, you will get a URL to see your app live, such as the following: https://vite.examples.vercel.com/

Set up a Vue, Vite, and Tailwind app with a few clicks using the Deploy button, and create a Git repository for it in the process for automatic deployments for your updates.



Written By
Written by stephdietzstephdietz