How to Integrate Vite with Vue.js?

Vite provides the flexibility and speed needed for modern web development by offering a fast-build tool and development server. Integrating Vite with Vue.js allows developers to use Vite’s efficient hot module replacement and optimized build processes while working with Vue's reactive framework. This integration improves the development experience and ensures a smooth workflow for building scalable Vue applications.

Prerequisites

• Nodejs
• JavaScript
• VueJS

Approach

We have discussed below how to integrate Vite with Vue.js by first creating a new Vue project using Vite’s template and then installing the necessary dependencies. We set up the project structure, wrote the Vue component with interactive features, and applied styling using scoped CSS. This approach ensures a modern and efficient development environment for building Vue applications.

Steps to Integrate Vite with Vue.js

Step 1: Install NodeJs, If you haven’t installed NodeJs, download it from the official website.

Step 2: Create a new Vite Project

Create a new Vite project using the Vue template. Open your terminal and run:

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

Step 3: Select a framework: select the Vue framework here using the downward arrow key. You can select any of the frameworks as per your requirements.

Vanilla
Vue
React
Preact
Lit
Svelte
Solid
Qwik
Others

Step 4: Select Variant: choose any variant of your choice using the downward arrow key,i.e: choose JavaScript.

TypeScript
TypeScript + SWC
JavaScript
JavaScript + SWC

Step 5: Navigate to Project Directory:

cd my-vue-app

Step 6: Install Dependencies

npm install

package.json

  "dependencies": {
    "vue": "^3.4.31"
  },

Step 7: Start Server using below command, make sure check your port no on the terminal it may be different for you system.

npm run dev
  ➜  Local:   http://localhost:5173/

Project Structure:

Example: We have integrated Vue with Vite to create an interactive component that features a counter and a dynamic message. The App.vue file includes Vue template syntax and reactive state management, while style.css provides global styling to enhance the visual appeal of the application.

/* Global styles for the Vue.js application */

body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #e0e0e0;
}

h1, h3 {
  font-family: 'Verdana', sans-serif;
}

a {
  text-decoration: none;
  color: #3498db;
}

a:hover {
  text-decoration: underline;
}

button {
  border: none;
  border-radius: 5px;
}

<!--src/App.vue-->
<template>
  <div class="app">
    <header>
      <h1>Welcome to GeeksforGeeks</h1>
      <h3>Interactive Vue Component with Vite</h3>
    </header>
    <main>
      <section class="counter-section">
        <p class="counter-text">Current Count:
        <span class="count">{{ count }}</span></p>
        <button @click="incrementCount">Increase Count</button>
        <p v-if="count > 0" class="message">
        You have clicked the button {{ count }} times!</p>
      </section>
    </main>
  </div>
</template>

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

const count = ref(0);

function incrementCount() {
  count.value++;
}
</script>

<style scoped>

.app {
  text-align: center;
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

header {
  margin-bottom: 20px;
}

h1 {
  color: green;
  font-size: 2.5em;
  margin-bottom: 0.5em;
}

h3 {
  color: #34495e;
  font-size: 1.5em;
  margin-bottom: 20px;
}

.counter-section {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.counter-text {
  font-size: 1.2em;
  margin-bottom: 10px;
}

.count {
  font-weight: bold;
  color: #e74c3c;
}

button {
  padding: 10px 20px;
  font-size: 1em;
  color: white;
  background-color: #3498db;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #2980b9;
}

.message {
  margin-top: 20px;
  font-size: 1.1em;
  color: #27ae60;
}
</style>

// src/main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

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

Output: