1---
2name: vite-features
3description: Vite-specific import patterns and runtime features
4---
5 
6# Vite Features
7 
8## Glob Import
9 
10Import multiple modules matching a pattern:
11 
12```ts
13const modules = import.meta.glob('./dir/*.ts')
14// { './dir/foo.ts': () => import('./dir/foo.ts'), ... }
15 
16for (const path in modules) {
17  modules[path]().then((mod) => {
18    console.log(path, mod)
19  })
20}
21```
22 
23### Eager Loading
24 
25```ts
26const modules = import.meta.glob('./dir/*.ts', { eager: true })
27// Modules loaded immediately, no dynamic import
28```
29 
30### Named Imports
31 
32```ts
33const modules = import.meta.glob('./dir/*.ts', { import: 'setup' })
34// Only imports the 'setup' export from each module
35 
36const defaults = import.meta.glob('./dir/*.ts', { import: 'default', eager: true })
37```
38 
39### Multiple Patterns
40 
41```ts
42const modules = import.meta.glob(['./dir/*.ts', './another/*.ts'])
43```
44 
45### Negative Patterns
46 
47```ts
48const modules = import.meta.glob(['./dir/*.ts', '!**/ignored.ts'])
49```
50 
51### Custom Queries
52 
53```ts
54const svgRaw = import.meta.glob('./icons/*.svg', { query: '?raw', import: 'default' })
55const svgUrls = import.meta.glob('./icons/*.svg', { query: '?url', import: 'default' })
56```
57 
58## Asset Import Queries
59 
60### URL Import
61 
62```ts
63import imgUrl from './img.png'
64// Returns resolved URL: '/src/img.png' (dev) or '/assets/img.2d8efhg.png' (build)
65```
66 
67### Explicit URL
68 
69```ts
70import workletUrl from './worklet.js?url'
71```
72 
73### Raw String
74 
75```ts
76import shaderCode from './shader.glsl?raw'
77```
78 
79### Inline/No-Inline
80 
81```ts
82import inlined from './small.png?inline'    // Force base64 inline
83import notInlined from './large.png?no-inline'  // Force separate file
84```
85 
86### Web Workers
87 
88```ts
89import Worker from './worker.ts?worker'
90const worker = new Worker()
91 
92// Or inline:
93import InlineWorker from './worker.ts?worker&inline'
94```
95 
96Preferred pattern using constructor:
97 
98```ts
99const worker = new Worker(new URL('./worker.ts', import.meta.url), {
100  type: 'module',
101})
102```
103 
104## Environment Variables
105 
106### Built-in Constants
107 
108```ts
109import.meta.env.MODE      // 'development' | 'production' | custom
110import.meta.env.BASE_URL  // Base URL from config
111import.meta.env.PROD      // true in production
112import.meta.env.DEV       // true in development
113import.meta.env.SSR       // true when running in server
114```
115 
116### Custom Variables
117 
118Only `VITE_` prefixed vars exposed to client:
119 
120```
121# .env
122VITE_API_URL=https://api.example.com
123DB_PASSWORD=secret  # NOT exposed to client
124```
125 
126```ts
127console.log(import.meta.env.VITE_API_URL) // works
128console.log(import.meta.env.DB_PASSWORD)  // undefined
129```
130 
131### Mode-specific Files
132 
133```
134.env                # always loaded
135.env.local          # always loaded, gitignored
136.env.[mode]         # only in specified mode
137.env.[mode].local   # only in specified mode, gitignored
138```
139 
140### TypeScript Support
141 
142```ts
143// vite-env.d.ts
144interface ImportMetaEnv {
145  readonly VITE_API_URL: string
146}
147 
148interface ImportMeta {
149  readonly env: ImportMetaEnv
150}
151```
152 
153### HTML Replacement
154 
155```html
156<p>Running in %MODE%</p>
157<script>window.API = "%VITE_API_URL%"</script>
158```
159 
160## CSS Modules
161 
162Any `.module.css` file treated as CSS module:
163 
164```ts
165import styles from './component.module.css'
166element.className = styles.button
167```
168 
169With camelCase conversion:
170 
171```ts
172// .my-class -> myClass (if css.modules.localsConvention configured)
173import { myClass } from './component.module.css'
174```
175 
176## JSON Import
177 
178```ts
179import pkg from './package.json'
180import { version } from './package.json'  // Named import with tree-shaking
181```
182 
183## HMR API
184 
185```ts
186if (import.meta.hot) {
187  import.meta.hot.accept((newModule) => {
188    // Handle update
189  })
190  
191  import.meta.hot.dispose((data) => {
192    // Cleanup before module is replaced
193  })
194  
195  import.meta.hot.invalidate()  // Force full reload
196}
197```
198 
199<!--
200Source references:
201- https://vite.dev/guide/features
202- https://vite.dev/guide/env-and-mode
203- https://vite.dev/guide/assets
204- https://vite.dev/guide/api-hmr
205-->
206