# Vite подключение jQuery

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

```yaml
    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

```bash
npm install
```

устанавливаем jQuery через npm

```bash
npm i jquery
```

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

{% code title="resources/js/app.js" %}

```javascript
import jQuery from 'jquery';
window.$ = jQuery;
```

{% endcode %}

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

{% code title="vite.config.js" %}

```javascript
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',
    },
});
```

{% endcode %}

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

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

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

```bash
npm run build
```

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

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