Building a Vue 3 App with Vite, TailwindCSS, Pinia, Vue Router, and TypeScript

In this tutorial, we will set up a Vue 3 project using Vite with TailwindCSS for styling, Pinia for state management, Vue Router for navigation, and TypeScript for type safety. Additionally, we'll configure environment variables for managing configurations.

Prerequisites

Before getting started, make sure you have the following installed:

• Node.js (LTS recommended)
• pnpm or npm or yarn

Step 1: Create a Vite Project

Run the following command to create a Vue 3 project using Vite with TypeScript:

pnpm create vite my-vue-app --template vue-ts

Change to the project directory:

cd my-vue-app

Install dependencies:

pnpm install

Step 2: Install TailwindCSS

Install TailwindCSS and its dependencies:

pnpm install -D tailwindcss postcss autoprefixer

Initialize TailwindCSS configuration:

npx tailwindcss init -p

Modify tailwind.config.cjs to enable Vue files:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Update src/assets/main.css:

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

Import it in main.ts:

import './assets/main.css';

Step 3: Setup Vue Router

Install Vue Router:

pnpm install vue-router@4

Create a router.ts file inside src:

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import About from './views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

Register the router in main.ts:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

Step 4: Setup Pinia

Install Pinia:

pnpm install pinia

Create a store src/stores/counter.ts:

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

Register Pinia in main.ts:

import { createPinia } from 'pinia';

const pinia = createPinia();
app.use(pinia);

Step 5: Configure Environment Variables

Create a .env file in the project root:

VITE_API_URL=https://api.example.com

Access it in your app:

const apiUrl = import.meta.env.VITE_API_URL;
console.log('API URL:', apiUrl);

Step 6: Project Structure and package.json

package.json

{
  "name": "my-vue-app",
  "version": "0.0.1",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "lint": "eslint src --ext .ts,.vue"
  },
  "dependencies": {
    "vue": "^3.3.4",
    "vue-router": "^4.2.5",
    "pinia": "^2.1.6"
  },
  "devDependencies": {
    "@types/node": "^20.10.0",
    "@vitejs/plugin-vue": "^5.0.3",
    "autoprefixer": "^10.4.14",
    "postcss": "^8.4.30",
    "tailwindcss": "^3.3.5",
    "typescript": "^5.3.3",
    "vite": "^5.0.8"
  }
}

Directory Structure

my-vue-app/
│── node_modules/
│── public/
│   └── index.html
│── src/
│   ├── assets/
│   │   └── main.css
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── stores/
│   │   └── counter.ts
│   ├── views/
│   │   ├── Home.vue
│   │   ├── About.vue
│   ├── App.vue
│   ├── main.ts
│   ├── router.ts
│── .env
│── .gitignore
│── index.html
│── package.json
│── tailwind.config.cjs
│── tsconfig.json
│── vite.config.ts
│── pnpm-lock.yaml (or yarn.lock/npm-lock.json)

Conclusion

You have successfully set up a Vue 3 application with Vite, TailwindCSS, Pinia, Vue Router, TypeScript, and environment variables. This provides a strong foundation for building modern Vue applications with fast performance and modular architecture.

Happy coding! 🚀