Setting Up Vue 3 with Tailwind CSS and Shadcn

Hello, fellow developers! In this quick guide, we’ll walk you through setting up a project with Vue 3, Tailwind CSS, and Shadcn to create a modern and responsive web app. This post will give you a clear, step-by-step process to get up and running in no time. Let’s dive in!Prerequisites

Prerequisites

– node 22+

Install the @vue/cli

To get started, you’ll need to install the Vue CLI. This powerful tool simplifies the process of scaffolding and managing Vue projects. Run the following command to install it globally on your machine:

npm install -g @vue/cli████████████████████████████████████████ 100%

Once installed, you’ll have access to the vue command, which allows you to create new projects, manage dependencies, and streamline development tasks with ease.

Create your project

After installing the Vue CLI, the next step is to create your project. You can do this by running the following command:

vue create my-vue-app Please pick a preset: (Use arrow keys)Default ([Vue 2] babel, eslint)▶ Default ([Vue 3] babel, eslint)Manually select features Installing CLI plugins. This might take a while… ········································ 100% 🎉 Successfully created project my-vue-app.

Adding Vite

To take advantage of faster builds and a smoother development experience, you can add Vite to your Vue project. Vite is a modern build tool optimized for speed and performance. If you’re starting fresh, you can use the Vite-based Vue template:

npm init vite@latest my-vue-app –template vue Target directory “open-code-hub” is not empty. Please choose how to proceed:▶ Remove existing files and continueCancel operationIgnore files and continueSelect a framework: › – Use arrow-keys. Return to submit.Vanilla▶ VueReact…Select a variant: › – Use arrow-keys. Return to submit.TypeScript▶ JavaScriptCustomize with create-vue ↗…

Adding Tailwind

To style your Vue project with Tailwind CSS, you’ll need to install and configure it. Start by installing Tailwind and its necessary dependencies:

cd my-vue-appnpm install████████████████████████████████████████ 100% npm install -D tailwindcss@latest postcss@latest autoprefixer@latest ████████████████████████████████████████ 100%npx tailwindcss init -p

To tailor Tailwind CSS to your project’s specific needs, you’ll need to modify the tailwind.config.js to look like this:

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: 'false', // or 'media' or 'class'
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Delete style.css and create main.cssin src/asssets/main.cssand add the next content:

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

To improve your development experience and enable better module resolution, create a jsconfig.json file in the root of your project. This file helps your editor (especially VSCode) understand custom path aliases, making navigation and autocompletion easier.

Simply add the following file at the root level of your project:

{
    "compilerOptions": {
      "target": "esnext",        // Target modern JavaScript (ESNext)
      "module": "esnext",        // Use ES modules
      "moduleResolution": "node",// Use Node.js-style module resolution
      "strict": true,            // Enable strict type-checking
      "jsx": "preserve",         // Keep JSX syntax for Vue 3
      "baseUrl": ".",            // Base directory for resolving paths (root)
      "paths": {
        "@/*": ["src/*"],        // Map `@` alias to `src` directory
      }
    },
    "exclude": ["node_modules"], // Exclude node_modules from project files
    "include": ["src/**/*"]      // Include all files in the src directory
  }
  

To configure Vite to work seamlessly with your project and support path aliases, you’ll need to edit your vite.config.js file. This setup will ensure that Vite correctly resolves paths and integrates with Tailwind CSS if you’re using it.

Here’s a streamlined version of what your vite.config.js might look like:

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

import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'


// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  css:{
    postcss:{
      plugins: [tailwindcss, autoprefixer]
    }
  },
  resolve:{
    alias:{
      "@": path.resolve(__dirname, "./src"),
    }
  }
})

Replace the content of your App.vue file with the following code to quickly set up your Vue 3 project with Tailwind CSS. This will give you a solid foundation to start building your application with Vue 3 and Tailwind’s utility-first styling:

<template>
  <div class="min-h-screen bg-gray-100 flex items-center justify-center">
    <h1 class="text-4xl font-bold text-blue-500">Hello Tailwind with Vue 3!</h1>
    <Button>My Shadcn Button</Button>
  </div>
</template>

Adding Shadcn to Your Project

To enhance your Vue 3 application with additional UI components, let’s integrate Shadcn. Shadcn provides a collection of customizable and reusable components that can help you build a modern, visually appealing interface with minimal effort. By following these simple steps, you’ll quickly add Shadcn to your project and start leveraging its powerful UI components.

npx shadcn-vue@latest init Would you like to use TypeScript? (recommended)? › no Which framework are you using? › – Use arrow-keys. Return to submit. ▶ ViteNuxt

Adding a Component to Your Project

Now that your project is set up, it’s time to enhance it by adding a new component. Components are the building blocks of Vue applications, allowing you to encapsulate and reuse code efficiently. In this section, we’ll walk through the process of creating a new component and integrating it into your Vue 3 project, helping you to build a more modular and maintainable application.

npx shadcn-vue@latest add button ✔ Installing

To integrate your new component, you’ll need to import and use it within your Vue template. This will allow you to utilize the component’s functionality and styling in your application. Simply import the component in your script section and then include it in the template where you want it to appear.

<script setup>
import { Button } from '@/components/ui/button'

</script>

<template>
  <div class="min-h-screen bg-gray-100 flex items-center justify-center">
    <h1 class="text-4xl font-bold text-blue-500">Hello Tailwind with Vue 3!</h1>
    <Button>My Shadcn Button</Button>
  </div>
</template>

Wrapping Up

Congratulations! You’ve successfully set up your Vue 3 project with Tailwind CSS and Shadcn, and added a new component to your application. With these tools in place, you’re now equipped to build a stylish, modern web app with a solid foundation. As you continue developing, you can explore further customization and expand your project with additional components and features.

Happy coding!