Guide: What is Vue.js 🔭? Vue.js Best Practices | What is Vite âšĄ?

Vue.js is a progressive JavaScript framework for building user interfaces and single-page applications, created by Evan You in 2014. Known for its gentle learning curve and developer-friendly approach, Vue combines the best aspects of React’s component-based architecture with Angular’s powerful templating system, while maintaining a smaller footprint and simpler syntax.

What makes Vue “progressive” is its incremental adoptability – you can start by sprinkling Vue into existing projects for small interactive components, or scale up to full-featured SPAs with routing, state management, and build tooling.

With its intuitive template syntax, reactive data binding, and excellent documentation, Vue has become the third pillar of modern frontend development alongside React and Angular, powering everything from small business websites to large-scale applications at companies like GitLab, Nintendo, and Adobe.

The framework’s philosophy of being approachable for beginners yet powerful for experts has earned it a passionate community and made it one of the most loved JavaScript frameworks, offering developers a perfect balance of simplicity, performance, and flexibility.

What We should do (Good)

  1. Single File Components: The template-script-style structure is correct and standard
  2. Component Decomposition: Split large component into smaller, focused ones
  3. Utility Extraction: Moved data generation to separate utility file
  4. Clear Separation: Each component has single responsibility

🔧 Additional Modularity Options:

  • Composables (Vue 3 specific):
// composables/useUsers.ts
export const useUsers = () => {
  const users = ref([])
  const loading = ref(false)
  
  const loadUsers = async () => { /* logic */ }
  
  return { users, loading, loadUsers }
}
  • External Stylesheets:
// composables/useUsers.ts
export const useUsers = () => {
  const users = ref([])
  const loading = ref(false)
  
  const loadUsers = async () => { /* logic */ }
  
  return { users, loading, loadUsers }
}
  • Shared Constants:
<style src="./UserCard.css" scoped></style>

📁 Recommended Structure:

// constants/userConfig.ts
export const USER_NAMES = ['Alex', 'Taylor', ...]

Summary of Best Practices:

What We should Fix:

  1. Centralized Configuration: All settings in one place
  2. Environment Variables: Use VITE_ prefixed vars for Vite
  3. Type Safety: TypeScript definitions for env vars
  4. Fallback Values: Defaults if env vars aren’t set
  5. Single Source of Truth: One config module

📁 File Structure:

src/
├── config/
│   ├── index.ts        # Main config
│   └── api.ts          # API client config
├── services/
│   └── UserService.ts  # Uses config.api.baseUrl
└── .env.example        # Example env file

🔧 To Use Different Environments:

Create different .env files:

  • .env.development
  • .env.staging
  • .env.production

💡 Benefits:

  • ✅ Environment-specific URLs
  • ✅ No hardcoded values
  • ✅ Type-safe configuration
  • ✅ Easy to maintain
  • ✅ Supports CI/CD pipelines

This is now following industry best practices for configuration management!

Show dates alternatives

  1. Move to utils: Create utils/dateFormatter.ts for reuse across components
  2. Use a library: Like date-fns or dayjs for better date formatting
  3. Keep it simple: Just use new Date().toLocaleDateString() inline

This cleanup follows the DRY principle – remove unused code to keep the codebase clean!

What is this line about?

<script type="module" src="/src/main.ts"></script>

What it does:

  • Entry Point: This script tag tells the browser to load and execute /src/main.ts as the starting point of your application
  • ES Modules: type=”module” enables modern JavaScript module syntax (import/export)
  • Vite Development: During development, Vite serves this file directly with hot module replacement
  • Build Process: During production build, Vite bundles everything and replaces this with the compiled assets

What’s in main.ts:

index.html 
    ↓ (loads)
main.ts 
    ↓ (creates Vue app)
App.vue 
    ↓ (uses router)
Your Components

What main.ts does:

  1. Imports styles: import './assets/main.css'
  2. Creates Vue app: createApp(App)
  3. Adds router: app.use(router)
  4. Mounts to DOM: app.mount('#app') (attaches to <div id="app"> in index.html)

Why this approach:

  • ✅ Modern: Uses ES modules instead of old <script> tags
  • ✅ Fast: Vite’s dev server with hot reload
  • ✅ Bundled: Automatically optimized for production
  • ✅ TypeScript: Direct TypeScript support without compilation step

This is the standard Vite + Vue 3 setup – very clean and modern!

What is Vite?

Vite is a modern build tool and development server for frontend development.

https://vite.dev/

Vite (pronounced “veet”, French for “fast”) is:

  • A build tool created by Evan You (creator of Vue.js)
  • A development server with extremely fast hot module replacement (HMR)
  • A bundler that uses Rollup for production builds

Why Vite exists:

Problem with traditional tools:
Old way (Webpack, etc.):
Bundle everything → Start dev server → Slow startup (30-60s)
Change code → Rebuild entire bundle → Slow updates (5-10s)
Vite’s solution:
Vite way:
Start dev server instantly → Serve modules directly → Fast startup (<1s)
Change code → Update only changed module → Fast updates (<100ms)

How Vite works:

Development Mode:

  1. ES Modules: Serves files directly to browser using native ES modules
  2. No bundling: Browser loads modules on-demand
  3. Instant startup: No need to bundle before starting
  4. Fast HMR: Only updates changed modules

Production Mode:

  1. Rollup bundling: Creates optimized bundles
  2. Tree shaking: Removes unused code
  3. Code splitting: Splits into smaller chunks
  4. Minification: Compresses code

Vite vs Other Tools:

FeatureViteWebpackParcel
Dev startup< 1s30-60s10-20s
HMR speed< 100ms1-5s1-3s
Bundle sizeSmallMediumMedium
ConfigurationMinimalComplexZero-config

Your Project Structure:

user-management-ui/          # Vite project root
├── index.html              # Entry HTML (Vite serves this)
├── vite.config.ts          # Vite configuration
├── package.json            # Dependencies & scripts
├── src/
│   ├── main.ts            # App entry point
│   ├── App.vue            # Root component
│   └── components/        # Vue components
└── dist/                  # Built files (after npm run build)

Vite Configuration:

Your Vite Setup:
  1. Vue Plugin: vue() – Handles .vue files
  2. DevTools: vueDevTools() – Vue debugging tools
  3. Alias: @ points to src/ folder (that’s why you can import from '@/types/user')

Vite Commands:

npm run dev     # Start development server (fast)
npm run build   # Build for production (optimized)
npm run preview # Preview production build locally

Benefits for your project:

✅ Fast Development: Instant server start, fast updates

✅ Vue Support: Built-in .vue file handling

✅ TypeScript: Native TypeScript support

✅ Hot Reload: Changes appear instantly

✅ Modern: Uses latest web standards

✅ Small Bundle: Optimized production builds

Why choose Vite over alternatives:

  • Speed: 10-100x faster than Webpack in development
  • Simplicity: Minimal configuration needed
  • Modern: Uses native ES modules
  • Popular: Adopted by Vue, React, Svelte communities
  • Maintained: Actively developed by Vue team

Vite has been massively adopted across the frontend ecosystem! Here are the major users:

🏗️ Frontend Frameworks

Official Support:

  • Vue 3 – Vite is the default build tool
  • React – create-vite templates available
  • Svelte – SvelteKit uses Vite
  • Solid.js – Official Vite integration
  • Lit – Web Components framework
  • Preact – Lightweight React alternative

🌐 Major Companies & Products

Tech Giants:

  • Google – Uses Vite for internal projects
  • Shopify – Hydrogen (React framework)
  • GitLab – Frontend build tooling
  • Alibaba – Various frontend projects
  • ByteDance – Internal tooling

Popular Tools & Platforms:

  • Storybook – Component development
  • Vitest – Testing framework (built by Vite team)
  • Nuxt 3 – Vue.js framework
  • SvelteKit – Svelte’s app framework
  • Astro – Static site generator
  • Fresh – Deno’s web framework

📊 Framework Templates

When you create new projects:

# React
npm create vite@latest my-react-app -- --template react-ts

# Vue  
npm create vue@latest my-vue-app

# Svelte
npm create svelte@latest my-svelte-app

# Solid
npm create solid@latest my-solid-app

🏢 Enterprise Adoption

Startups to Fortune 500:

  • Stripe – Payment processing UI
  • Discord – Web client components
  • Notion – Web application parts
  • Linear – Project management tool
  • Vercel – Frontend development platform
  • Netlify – JAMstack platform

📈 Usage Statistics (2024)

  • NPM Downloads: 30+ million/month
  • GitHub Stars: 65,000+
  • Community: 400+ contributors
  • Framework Support: 20+ official templates

🔧 Meta-Frameworks Using Vite

Nuxt 3      → Vue + Vite
SvelteKit   → Svelte + Vite  
SolidStart  → Solid + Vite
Astro       → Multi-framework + Vite
Qwik City   → Qwik + Vite

💼 Why Companies Choose Vite

  1. Developer Experience: 10-100x faster development
  2. Performance: Smaller bundles, faster builds
  3. Modern: Native ES modules, latest standards
  4. Flexibility: Works with any framework
  5. Maintenance: Actively maintained by Evan You’s team
  6. Ecosystem: Rich plugin ecosystem

Unknown's avatar

Author: Abhilash

Hi, I’m Abhilash! A seasoned web developer with 13+ years of experience specializing in Ruby and Ruby on Rails. Since 2010, I’ve built scalable, robust web applications and worked with frameworks like Angular, Sinatra, Laravel, Node.js, and React. Passionate about clean, maintainable code and continuous learning, I share insights, tutorials, and experiences here. Let’s explore the ever-evolving world of web development together!

Leave a comment