vite

Instant Server Start

With Vite, you can start a development server instantly due to its use of native ES modules. Here's a simple command to start the server:

npx vite

Hot Module Replacement (HMR)

Vite provides out-of-the-box support for HMR, which enables you to update code and see changes in real-time without a full page reload. The code sample shows how to use HMR with a Vue application.

import { createApp } from 'vue';
const app = createApp(App);
if (import.meta.hot) {
  import.meta.hot.accept();
}

Optimized Build

For production, Vite uses Rollup to bundle your code. This results in an optimized build that's ready for deployment. The command to create a production build is straightforward.

npx vite build

Plugin System

Vite supports a rich plugin system that allows you to extend its functionality. This code sample demonstrates how to include the official Vue plugin in your Vite configuration.

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

export default defineConfig({
  plugins: [vue()]
});

TypeScript Support

Vite comes with built-in TypeScript support, allowing you to develop your application using TypeScript without additional setup. The command to start a server with TypeScript support is the same as for JavaScript.

npx vite --host