Vite подключение Bootstrap

Импортируем npm пакеты в laravel приложение через vite

В настройках docker-compose.yml в сервисе FPM должен быть прописан дополнительный порт для websocketa что бы на нём запускался vite:

fpm:
        build:
            context: .
            dockerfile: docker/Fpm.dockerfile
        volumes:
            -   ./:/var/www/laravel-docker # вся текущая папка пробрасывается в контейнер по пути /var/www/laravel-docker
            - type: "bind" # пробрасываем папку /tmp в систему по адресу /tmp (для сохранения логов и профайлов xdebug)
              source: "/tmp"
              target: "/tmp"
        links:
            -   mysql
        ports:
            - "9000:9000"
            - "3000:3000" # дополнительный порт для websocket/Vite

Устанавливаем все зависимости которые изначально прописаны в package.json

npm install

Устанавливаем bootstrap через npm

npm i bootstrap

Импортируем bootstrap в resources/js/app.css

resources/css/app.css

@import "/node_modules/bootstrap/dist/css/bootstrap.css";

Импортируем bootstrap в resources/js/app.js

resources/js/app.js

import * as bootstrap from 'bootstrap/dist/js/bootstrap.bundle';
window.bootstrap = bootstrap;

Добавляем настройки порта в vite.config.js

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    // Задаём настройки порта для соеденения vite
    server: {
        hmr: {
            host: 'localhost'
        },
        port: 3000,
        host: '0.0.0.0',
    },
});

Добавляем подключение js и css фалов в head блейд файла...

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

И запускаем команду сборки...

npm run build

К переменной bootstrap надо обращаться внутри тега...

<script type="module"></script>