After a couple years of building Vue applications for clients, I've lost count of how many times I've set up new projects from scratch. Each time, I found myself repeating the same steps: installing dependencies, configuring ESLint, setting up TypeScript, adding Prettier, and on and on... Sound familiar? That's why I finally took the time to create a streamlined Vue setup that cuts through the noise and lets me focus on what matters: building great applications for clients. Today, I'm sharing this battle-tested setup with you. ## The Pain Points If you've worked with Vue, you know the drill. You run `create-vue` or `vite create`, and then spend the next hour customizing the setup: 1. **Adding proper TypeScript configuration** that actually works with Vue 2. **Setting up linting rules** that don't drive you crazy 3. **Configuring file-based routing** because manually defining routes is so 2018 4. **Integrating UI components** that don't need endless styling from scratch 5. **Tweaking performance settings** you'll forget about until things slow down Sure, you could use Nuxt—and sometimes I do—but for many projects, it's overkill. Sometimes you just need a clean, fast Vue setup without the extra abstractions. ## My Clean Setup in 5 Minutes Here's how I can get a production-ready Vue project running in about 5 minutes. No jokes. ### Step 1: Create the Base Project I start with Vite because it's blazing fast: ```bash bun create vite@latest my-project --template vue-ts cd my-project bun install ``` > I've switched to using Bun instead of npm/yarn for package management—it's significantly faster and has built-in TypeScript support. But npm/yarn work just fine too! ### Step 2: Add Prettier (Because Life's Too Short for Formatting Debates) ```bash bun add -D prettier prettier-plugin-tailwindcss ``` Create a `.prettierrc`: ```json { "printWidth": 100, "tabWidth": 2, "semi": true, "singleQuote": false, "trailingComma": "all", "endOfLine": "lf", "plugins": ["prettier-plugin-tailwindcss"] } ``` Add to `package.json`: ```json "scripts": { "format": "prettier --write . --list-different --cache" } ``` ### Step 3: ESLint Configuration That Won't Make You Pull Your Hair Out ```bash bun add -D eslint @eslint/js globals typescript-eslint eslint-plugin-perfectionist eslint-plugin-prettier eslint-config-prettier eslint-plugin-vue ``` Create `eslint.config.mjs` with a sensible configuration that works well with Vue, TypeScript, and won't bombard you with warnings: ```javascript import eslint from "@eslint/js"; import perfectionist from "eslint-plugin-perfectionist"; import prettier from "eslint-plugin-prettier/recommended"; import vue from "eslint-plugin-vue"; import globals from "globals"; import tseslint from "typescript-eslint"; const eslintConfig = tseslint.config( eslint.configs.recommended, perfectionist.configs["recommended-natural"], tseslint.configs.recommended, { extends: [...vue.configs["flat/recommended"]], files: ["**/*.{ts,vue}"], languageOptions: { ecmaVersion: "latest", globals: { ...globals.browser, }, parserOptions: { parser: tseslint.parser, }, sourceType: "module", }, rules: { "no-console": ["warn", { allow: ["warn", "error"] }], "vue/multi-word-component-names": "off", }, }, { rules: { "@typescript-eslint/consistent-type-definitions": ["error", "type"], "@typescript-eslint/consistent-type-imports": [ "error", { fixStyle: "separate-type-imports", prefer: "type-imports", }, ], "@typescript-eslint/no-unused-vars": [ "warn", { argsIgnorePattern: "^_", ignoreRestSiblings: true, }, ], }, }, prettier, ); export default eslintConfig; ``` Add to `package.json`: ```json "scripts": { "lint": "eslint src", "lint:fix": "eslint src --fix", "typecheck": "vue-tsc --noEmit" } ``` ### Step 4: Setup TailwindCSS (Because Custom CSS Is a Time Sink) ```bash bun add tailwindcss @tailwindcss/vite ``` Update your `vite.config.ts`: ```typescript import tailwindcss from "@tailwindcss/vite"; import vue from "@vitejs/plugin-vue"; import path from "node:path"; import { defineConfig } from "vite"; export default defineConfig({ plugins: [vue(), tailwindcss()], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, server: { port: 3000, hmr: { overlay: true, }, }, }); ``` Replace your `src/style.css` with: ```css @import "tailwindcss"; ``` ### Step 5: Add File-Based Routing (The Game Changer) This is where things get good. Let's add automatic file-based routing: ```bash bun add vue-router unplugin-vue-router ``` Update your `vite.config.ts` again: ```typescript import router from "unplugin-vue-router/vite"; import vue from "@vitejs/plugin-vue"; import tailwindcss from "@tailwindcss/vite"; import path from "node:path"; import { defineConfig } from "vite"; export default defineConfig({ plugins: [ router(), // Must come before vue() vue(), tailwindcss(), ], resolve: { alias: { "@": path.resolve(__dirname, "./src"), }, }, server: { port: 3000, hmr: { overlay: true, }, }, }); ``` Update your TypeScript configuration in `tsconfig.app.json`: ```json { "extends": "@vue/tsconfig/tsconfig.dom.json", "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] }, "types": ["unplugin-vue-router/client"] }, "include": ["src/**/*.ts", "src/**/*.vue", "./typed-router.d.ts"] } ``` Add type references to `src/vite-env.d.ts`: ```typescript /// /// ``` Create `src/router.ts`: ```typescript import { createRouter, createWebHistory } from "vue-router"; import { routes } from "vue-router/auto-routes"; export const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes, scrollBehavior(_to, _from, savedPosition) { return savedPosition || { top: 0 }; }, }); export default router; ``` Update `src/main.ts` to use the router: ```typescript import "@/style.css"; import App from "@/App.vue"; import router from "@/router"; import { createApp } from "vue"; const app = createApp(App); // Performance optimization app.config.performance = import.meta.env.DEV; // Compiler options for better performance app.config.compilerOptions = { comments: false, whitespace: "condense", }; // Disable development warnings in production if (import.meta.env.PROD) { app.config.warnHandler = () => null; } app.use(router); app.mount("#app"); ``` Update `src/App.vue` to include the router view: ```vue ``` ### Step 6: Add UI Components with shadcn-vue To avoid reinventing UI components, let's add shadcn-vue: ```bash bunx --bun shadcn-vue@latest init ``` When prompted, choose your preferred color scheme (I usually go with Neutral). Now let's add a button component: ```bash bunx --bun shadcn-vue@latest add button ``` Create a page file at `src/pages/index.vue`: ```vue ``` ## The Benefits of This Setup Why do I love this setup so much? Let me count the ways: ### 1. TypeScript That Actually Works No more fighting with Vue's type system. With proper configuration and unplugin-vue-router, you get: - Fully typed routes (try `useRoute("/users/[id]")`) - Type checking on your components - Auto-completion everywhere it matters ### 2. File-Based Routing That Makes Sense Just create a file at `src/pages/about.vue` and it's automatically available at `/about`. Create `src/pages/users/[id].vue` and boom—you have a dynamic route at `/users/:id`. The best part? It's all typed: ```vue ``` ### 3. A UI System That Doesn't Slow You Down With shadcn-vue, you get: - Accessible components out of the box - Consistent styling with Tailwind - Customizable design tokens - Only the components you need (reducing bundle size) ### 4. Performance Optimizations From Day One The setup includes performance tracking in development mode and strips out unnecessary bloat in production: ```typescript // Performance optimization app.config.performance = import.meta.env.DEV; // Compiler options for better performance app.config.compilerOptions = { comments: false, whitespace: "condense", }; // Disable development warnings in production if (import.meta.env.PROD) { app.config.warnHandler = () => null; } ``` ## Real-World Results This isn't theoretical—I've used this setup on multiple client projects with clear benefits: - **Development speed**: New features take ~30% less time to implement - **Bundle size**: ~20% smaller than my previous setups - **Performance**: Consistently scoring 95+ on Lighthouse - **Maintenance**: Much easier to onboard new developers ## Conclusion: Is This Setup Right for You? This setup is perfect if you want: - A lightweight Vue setup without Nuxt's overhead - Type safety without the complexity - Modern file-based routing - Production-ready performance optimizations - A component library that won't slow you down It might not be ideal if: - You need SSR/SSG (consider Nuxt instead) - You're working with an existing project with different conventions - You prefer a different UI approach than Tailwind But for most client projects and applications I build, this setup hits the sweet spot between developer experience and performance. Want to try it yourself? I've put together a [template repository](https://github.com/pyyupsk/vue-setup) that you can clone and start using immediately. Let me know what you think in the comments! --- *What's your preferred Vue setup? I'd love to hear about your approach and any tips you might have!*

Tired of Vue Boilerplate? Here’s My Clean, Fast Setup