Vite Runtime

The Vite runtime creates a container for client-side TypeScript applications powered by Vite.


You can install the Vite runtime via NPM or Yarn.

npm install --save @injex/core @injex/vite


Create a container

Injex.create({ ... })

Creates a new Injex container.

import { Injex } from "@injex/vite";
// Configurations

Returns a new Injex container instance.


An Injex container instance is the same on all runtimes. Check out the Container API for more info.


You can config the Vite runtime using the following configurations.


A function that returns a import map generated by the import.meta.glob() function.

Since Vite is not loading all the files in your project automatically, we need to tell Injex the pattern for our module file names.

  • Type: Function
  • Required: true

For example, to load all files with the .mdl.ts extension:

import { Injex } from "@injex/vite";
glob: () => import.meta.glob('./**/*.mdl.ts', { eager: true })
  • Be sure to use the eager option or the files in the project will be splitted into many small chunks. You can read more about it here

The arguments passed to import.meta.glob() must be a string literal!


Controls Injex's internal logger log level

  • Type: LogLevel
  • default: LogLevel.Error
  • Required: false


Set Injex's logger log lines prefix

  • Type: string
  • default: Injex
  • Required: false


List of plugins to include with the container instance.

  • Type: Array
  • default: []
  • Required: false

You can go to the vite example to see the Vite runtime in action.


When optimizing your code using tools Vite (esbuild) to minify/uglify/mangle the code, it's essential to keep the ES class names as they are. Injex automatically registers modules by their class name. When you change the class name, Injex container won't work correctly.

You can pass the keepNames: true to esbuild options in your vite.config.js file.

Code splitting

If you want, you can use code-splitting with Injex. Refer to the @lazy() decorator documentation for more details.