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