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

maldestor95 — Fri, 07 Feb 2025 08:37:12 +0000

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;

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++;
    },
  },
});

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! 🚀

DEV Community: maldestor95

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

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

Prerequisites

Step 1: Create a Vite Project

Step 2: Install TailwindCSS

Step 3: Setup Vue Router

Step 4: Setup Pinia

Step 5: Configure Environment Variables

Step 6: Project Structure and package.json

package.json

Directory Structure

Conclusion

Step 6: Project Structure and `package.json`

`package.json`