MYDS Logo

    MYDS

    Beta

    Laravel

    A quick guide to set up MYDS in a Laravel app.

    Steps to install

    Create a Laravel project

    terminal
    laravel new project-name

    You will be prompted with a series of questions. You may choose whichever fit your project requirement(s):

    terminal
    ✔ Would you like to install a starter kit?
✔ Which testing framework do you prefer?
✔ Which database will your application use?
✔ Default database updated. Would you like to run the default database migrations?

    Important

    Laravel Breeze or Jetstream will handle the frontend setup for you, by installing the required dependencies. Just be sure to select React with Inertia or any React based option

    After the project is created, head to the project root:

    terminal
    cd project-name
npm install && npm run build
composer run dev

    Install packages

    npm i @govtechmy/myds-react @govtechmy/myds-style
// ☝️ Using a starter kit (Laravel Breeze or Jetstream)
 
npm i @govtechmy/myds-react @govtechmy/myds-style react react-dom @vitejs/plugin-react
// ☝️ Not using a starter kit

    Configure CSS stylesheet

    You may configure the styling through one of (2) methods listed below.

    1. CSS import

    resources/css/app.css
    @import "@govtechmy/myds-style/full.css";

    2. Tailwind CSS

    Please read the Style Configuration for more advanced configuration.

    Configure vite.config.js & Blade integration

    Important

    If you are using Laravel Breeze or Jetstream, this has been configured for you using an Inertia based setup. Otherwise, you need to configure it manually like below.

    vite.config.js
    import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react"; 
 
export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            refresh: true,
        }),
        react(), 
    ],
});
    resources/views/app.blade.php
    # Please make sure the following configuration exists in the Blade file.
<head>
  # Non-Inertia setup
  @viteReactRefresh
  @vite(['resources/css/app.css', 'resources/js/app.jsx']) 
 
  # Inertia setup
  @viteReactRefresh
  @vite(['resources/js/app.jsx', "resources/js/Pages/{$page['component']}.jsx"]) 
  @inertiaHead
</head>

    Start using the components!

    Here is a <Button /> for you to get started!

    resources/js/app.jsx
    import { Button } from "@govtechmy/myds-react/button";
 
function App() {
  return (
      <Button variant="primary-fill">
        Hello MYDS
      </Button>
  )
}
 
export default App

    If you are using an Inertia setup, you can start using the components in your Pages components.:

    app/js/Pages/Welcome.jsx
     
import { PageProps } from '@/types';
import { Head, Link } from '@inertiajs/react';
 
export default function Welcome() {
    return (
      <>
        <Head title="Welcome" />
        <Button variant="primary-fill">
          Hello MYDS
        </Button>
      </>
    );
 
}

    Previous

    Vite

    Next

    Accordion

    On this page

    Steps to installCreate a Laravel projectInstall packagesConfigure CSS stylesheetConfigure vite.config.js & Blade integrationStart using the components!