Laravel

Requirements

• 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 Azalea Kit UI.

Install the Azalea Kit UI package

npm install git@bitbucket.org:azaleahealth/azalea-kit-ui.git

        
  
        
      

Import the default theme

Import the Azalea Kit UI default theme (stylesheet) in /resources/css/app.css:

@import '/node_modules/@azaleahealth/azalea-kit-ui/dist/themes/light.css';

        
  
        
      

Import Azalea Kit UI components

Import each component you plan to use in /resources/js/bootstrap.js. Use the full path to each component (as outlined in the Installation 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 '@azaleahealth/azalea-kit-ui/components/button/button.js';
import '@azaleahealth/azalea-kit-ui/components/checkbox/checkbox.js';
import '@azaleahealth/azalea-kit-ui/components/menu/menu.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>