How to Set Up Vite + Vue 3 for Rapid Frontend Development

npm create vite@latest my-vue-app -- --template vue

cd my-vue-app
npm install
npm run dev

Setting Up Vue 3 Project Structure

After initializing a Vite + Vue 3 project, organizing your project structure is crucial. A clean and consistent folder layout ensures scalability and easier maintenance:

src/
├─ assets/
├─ components/
├─ composables/
├─ views/
├─ router/
├─ store/
├─ App.vue
└─ main.js

This structure helps maintain separation of concerns:

• assets/: Images, fonts, static files.
• components/: Reusable Vue components.
• composables/: Shared logic using Composition API.
• views/: Page-level components mapped to routes.
• router/: Vue Router configuration.
• store/: Pinia or Vuex state management.

Integrating Vue Router

Vue Router allows SPA navigation. Install it via npm:

npm install vue-router@4

Configure routes in router/index.js:

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

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

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

export default router

Integrate the router in main.js:

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

createApp(App).use(router).mount('#app')

State Management with Pinia

Pinia provides a modern, type-safe alternative to Vuex:

npm install pinia

Create a store in store/counter.js:

import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const increment = () => count.value++
  const decrement = () => count.value--
  return { count, increment, decrement }
})

Integrate Pinia in main.js:

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'

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

Component Communication Patterns

Vue 3 supports props, emits, provide/inject, and composables for component communication:

<!-- CounterChild.vue -->
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({ count: Number })
const emit = defineEmits(['update'])
const increment = () => emit('update', props.count + 1)
</script>

<template>
  <div>
    <span>{{ count }}</span>
    <button @click="increment">Increment</button>
  </div>
</template>

<!-- Parent.vue -->
<script setup>
import { ref } from 'vue'
import CounterChild from '@/components/CounterChild.vue'

const count = ref(0)
const updateCount = (value) => count.value = value
</script>

<template>
  <CounterChild :count="count" @update="updateCount" />
</template>

Handling Forms

Vite + Vue 3 makes form handling easy using ref and v-model:

<script setup>
import { ref } from 'vue'

const formData = ref({ name: '', email: '' })
const submitForm = () => {
  console.log(formData.value)
}
</script>

<template>
  <form @submit.prevent="submitForm">
    <input v-model="formData.name" placeholder="Name" />
    <input v-model="formData.email" placeholder="Email" />
    <button type="submit">Submit</button>
  </form>
</template>

Styling and Component Libraries

Integrate CSS frameworks like Tailwind or component libraries for faster development. Use scoped styles in Vue components to avoid global conflicts:

<style scoped>
.button {
  background-color: #42b883;
  padding: 10px 20px;
  border-radius: 5px;
}
</style>

Unit Testing with Vitest

Set up Vitest for fast unit testing:

npm install -D vitest @vue/test-utils

import { mount } from '@vue/test-utils'
import Counter from '@/components/CounterChild.vue'

test('increments count on button click', async () => {
  const wrapper = mount(Counter, { props: { count: 0 } })
  await wrapper.find('button').trigger('click')
  expect(wrapper.emitted().update[0]).toEqual([1])
})

Conclusion of Part Two

By structuring your project, integrating Vue Router and Pinia, using clean component communication, handling forms effectively, applying styles properly, and setting up unit tests, you create a scalable and maintainable frontend workflow. Vite's HMR ensures instant updates, making development fast and efficient.

Optimizing Performance for Production

After completing development, optimizing the Vite + Vue 3 project for production is essential. Vite provides an efficient build process that includes code minification, tree-shaking, and asset optimization:

npm run build

Configure vite.config.js for production:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist',
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor'
          }
        }
      }
    }
  }
})

Environment Variables and Configuration

Using environment variables allows you to manage API endpoints and feature flags for different environments:

# .env.development
VITE_API_URL=http://localhost:5000
VITE_FEATURE_X=true

Access them in your Vue components:

const apiUrl = import.meta.env.VITE_API_URL

Deploying Your Application

After building your project, the dist folder contains the production-ready application. You can deploy it to services like Netlify, Vercel, or traditional servers. For example, to deploy on Netlify:

netlify deploy --dir=dist

Debugging and Monitoring

Even in production, monitoring performance and errors is important. Use browser devtools, logging services, or third-party monitoring tools to track issues. Vite’s fast rebuilds during development make debugging easier before deployment.

Advanced Features with Vue 3 + Vite

Take advantage of advanced Vue 3 features like Suspense for async components, Teleport for modals, and dynamic imports for route-based code splitting. This further improves performance and user experience.

Continuous Integration and Deployment

Automating build and deployment ensures smooth releases. CI/CD pipelines (GitHub Actions, GitLab CI) can run tests, build the project, and deploy automatically. Example workflow:

name: CI

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '20'
      - run: npm install
      - run: npm run build
      - run: npm run test

Learning and Improving

For further guidance on Vue 3 and frontend best practices, check our detailed article on optimizing Vue projects and maintaining scalable architecture. Continuous learning ensures that you stay up to date with modern frontend techniques.

Conclusion

Setting up Vite + Vue 3 for rapid frontend development involves configuring the project structure, routing, state management, form handling, testing, and production optimization. By following these steps and leveraging Vite’s fast HMR and build tools, developers can create scalable, maintainable, and high-performance applications efficiently.