Integrating Jux with Vite
This guide will walk you through the process of setting up Jux in a Vite project. Vite is a modern build tool that provides a faster and leaner development experience for modern web projects.
-
Create a New Vite Project (Skip if using an existing project)
If you’re starting from scratch, create a new Vite project:
-
Install Jux CLI
-
Initialize Jux in your project
Run the Jux CLI to initialize Jux in your project. This will install the necessary dependencies and create the
jux.config.ts
file in your project root.This will install the necessary dependencies, and create
jux.config.ts
andpostcss.config.js
files in your project root. -
Configure Jux
Open
jux.config.ts
and update theinclude
paths to match your Vite project structure: -
Add Jux’s @layer directive to your main CSS file
Create or update your global CSS file (e.g.,
src/index.css
) to include Jux layers: -
Import Global CSS in your Vite project
In your main entry point (usually
src/main.tsx
orsrc/main.js
), import your global CSS: -
Start using Jux in your project
Now you can start using Jux in your Vite components: