Integrating with Laravel
Requirements
Instructions
Install the OnliveUI package
Import the Default Theme
Import Your OnliveUI Components
Copy the OnliveUI Static Assets (icons, images, etc.) to a Public Folder
Set the Base Path
Verify Vite Entry Points
Compile Front-End Assets
Include Front-End Assets in Your Layout File

Integrating with Laravel

This page explains how to integrate OnliveUI with a Laravel 9 app using Vite. For additional details refer to the Bundling Assets (Vite) section in the official Laravel docs.

This is a community-maintained document. Please ask the community if you have questions about this integration. You can also suggest improvements to make it better.

Requirements

This integration has been tested with the following:

Laravel 9.1
Vite 3.0

Instructions

These instructions assume a default Laravel 9 install that uses Vite to bundle assets. Be sure to run npm install to install the default Laravel front-end dependencies before installing OnliveUI.

Install the OnliveUI package

npm install @onlive.site/ui

Import the Default Theme

Import the OnliveUI default theme (stylesheet) in /resources/css/app.css:

@import '/node_modules/@onlive.site/ui/dist/themes/light.css';

Import Your OnliveUI Components

Import each OnliveUI component you plan to use in /resources/js/bootstrap.js. Use the full path to each component (as outlined in the Cherry Picking instructions). You can find the full import statement for a component in the Importing section of the component’s documentation (use the Bundler import). Your imports should look similar to:

import '@onlive.site/ui/dist/components/button/button.js';
import '@onlive.site/ui/dist/components/icon/icon.js';
import '@onlive.site/ui/dist/components/dialog/dialog.js';

Copy the OnliveUI Static Assets (icons, images, etc.) to a Public Folder

Since Vite has no way to copy arbitrary assets into your build (like webpack), you need to manually copy the OnliveUI static assets to your project’s public folder. Run this command from your project’s root directory to copy the OnliveUI static assets to the ./public/assets folder:

cp -aR node_modules/@onlive.site/ui/dist/assets/ ./public/assets

Set the Base Path

Add the base path to your OnliveUI assets (icons, images, etc.) in /resources/js/bootstrap.js. The path must point to the same folder where you copy assets to in the next step.

import { setBasePath } from '@onlive.site/ui/dist/utilities/base-path.js';
setBasePath('/');

Example /resources/js/bootstrap.js file:

import { setBasePath } from '@onlive.site/ui/dist/utilities/base-path.js';
setBasePath('/');

import '@onlive.site/ui/dist/components/button/button.js';
import '@onlive.site/ui/dist/components/icon/icon.js';
import '@onlive.site/ui/dist/components/dialog/dialog.js';

Verify Vite Entry Points

Laravel pre-configures the Vite entry points in vite.config.js as resources/css/app.css and resources/js/app.js. If you use a different location for your CSS and/or Javascript entry point, update this configuration to accordingly.

plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
    ],

Compile Front-End Assets

Run the Vite development server or production build.

## run the Vite development bundle
npm run dev

## build a production bundle (with versioning)
npm run build

Include Front-End Assets in Your Layout File

Add the @vite() Blade directive to the <head> of your application’s root template.

<head>
  ... @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Have fun using OnliveUI components in your Laravel app!