Building Components
InertJS doesn't force you into a specific component model, but because views are just JavaScript modules exporting HTML strings, building components is incredibly natural and intuitive.
Creating a Component
To create a reusable component, simply create a new folder and export a function that returns a Vector string. A common pattern is to create a src/components/ directory.
// src/components/Button/index.js
import { vec } from 'inertjs-vector';
export function Button({ label, type = 'button' }) {
return vec`
<button type="${type}" class="bg-cyan-500 hover:bg-cyan-600 text-white px-4 py-2 rounded-lg">
${label}
</button>
`;
}
Using Components
To use your component, just import it into your route's view.js file and call it directly inside your Vector template!
// src/routes/view.js
import { vec } from 'inertjs-vector';
import { Button } from '../components/Button/index.js';
export function render() {
return vec`
<div class="p-8">
<h1>Welcome</h1>
${Button({ label: 'Click Me!' })}
</div>
`;
}