nitropack-vite

A Vite plugin that seamlessly integrates Nitro for server-side rendering, API routes, and full-stack development in a single unified framework.

Features

• 🚀 Zero Configuration - No configuration required to integrate Vite and Nitro
• 🔄 Hot Module Replacement - Fast development with HMR for both client and server
• 🛠️ API Routes - Create server endpoints with Nitro's powerful event handlers
• 📄 Unstorage - Nitro KV storage adapts to various storage scenarios
• 🔍️ Unimport - Default support for Unimport, applied to both client and server simultaneously
• 🌐 Universal Fetch - Use $fetch on both client and server
• 🔌 Plugin System - Extend functionality with Vite and Nitro plugins
• 📦 Production Ready - Suitable for any supplier, such as Vercel, Netlify, Cloudflare Workers, and more

Install

1pnpm add nitropack-vite -D
2pnpm add ofetch -S

Configure

• vite.config.ts

1import React from '@vitejs/plugin-react'
2import Nitro from 'nitropack-vite'
3import { defineConfig } from 'vite'
4
5export default defineConfig({
6  plugins: [
7    React(),
8    // Nitro Options
9    Nitro({
10      // The source directory for the application.
11      // srcDir - default: './src'
12
13      // Additional automatic imports will take effect on the all page and server
14      // see - https://github.com/unjs/unimport
15      // imports - default: null
16
17      // Is it compressed during construction
18      // minify - default: false
19    })
20  ]
21})

• nitro.config.ts

1// your nitro config
2export default defineNitroConfig({
3  // Do not use plugins with the same configuration here (srcDir, imports, minify)
4  // Additional Nitro-specific configuration can be added here
5})

• package.json

1{
2  "scripts": {
3    "dev": "vite dev",
4    "build": "vite build",
5    "prepare": "nitro prepare",
6    "preview": "node .output/server/index.mjs"
7  }
8}

Usage

1pnpm run dev

print:

VITE v7.0.0  ready in 1275 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help
✔ Nitro Server built in 451ms

Add an API route, for example src/routes/hello.ts

1export default defineEventHandler((event) => {
2  return 'Hello World'
3})

nitropack-vite will automatically handle the relationship between routes and page routes without the need for additional configuration.

Visit http://localhost:5173/hello, and you will see the response "Hello World".

Use $fetch to make API requests on the page.

1// App.tsx
2function App() {
3  useEffect(() => {
4    $fetch('/hello').then((response) => {
5      console.log(response) // "Hello World"
6    })
7  }, [])
8  return null
9}

And you can customize the $fetch instance:

1// Customize $fetch with additional options
2import type { $Fetch } from 'nitropack'
3import { createFetch } from 'ofetch'
4globalThis.$fetch = createFetch({
5  baseURL: 'http://...',
6  headers: { 'x-custom-header': 'value' },
7  retry: 3
8}) as $Fetch

Deployment

The built application can be deployed to various platforms:

1# Build for production
2pnpm build
3
4# Preview the production build
5pnpm preview

Vercel

You need to edit vercel.json and select nitro when selecting project deployment

1{
2  "$schema": "https://openapi.vercel.sh/vercel.json",
3  "installCommand": "pnpm install",
4  "buildCommand": "pnpm build",
5  "outputDirectory": ".output",
6  "devCommand": "pnpm dev"
7}

License

MIT License © Hairyf