Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

sebaxba's avatar

Problem with Laravel Vite and bootstrap

Hi, I am having an errors and I have no idea how to fix it. I've been working for a 3rd day and cannot find any mistakes in my code but it is not running.

My vite.config.js file:

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

export default defineConfig({
    plugins: [
        laravel([
                'resources/js/app.js',
            ],
        ),
    ],
    resolve:{
        alias:{
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        }
    }
});

My app.js file:

import './bootstrap';
import '../sass/app.scss';

When I put following code in my blade file

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

I receive following error "htmlspecialchars(): Argument #1 ($string) must be of type string, array given"

but when I delete brackets like below

@vite('resources/js/app.js')

I receive anothe error: "Configuration "resources/js/app.js" does not exist."

Maybe someone had similar issue or is able to help me. I would be greatefull for any help.

0 likes
7 replies
fylzero's avatar

@sebaxba Easiest way to go about this would be to install a new copy of Laravel, install laravel/ui, then install Bootstrap scaffolding via the command

How to Install Bootstrap w/ Vite via Laravel/UI (easiest):

https://github.com/laravel/ui

laravel new bootstrap-project
cd bootstrap-project
composer require laravel/ui
php artisan ui bootstrap
composer install
npm install
npm run dev

How to Install Bootstrap w/ Vite manually:

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.3",
        "laravel-vite-plugin": "^0.7.0",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "sass": "^1.56.1",
        "vite": "^3.0.0"
    }
}

Rename resources/css/app.css to resources/sass/app.scss (folder should be sAss, ext should be sCss)

vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

app.js (or bootstrap.js, do not confuse the package import w/ the Laravel default js files)

import 'bootstrap';

app.scss

@import 'bootstrap/scss/bootstrap';

app.blade.php - right above/before the closing </head> tag

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

Then run:

npm update
composer install
npm run dev

Should be all you need.

Update: I just did this in a fresh project and it is working, just do what is listed here.

3 likes
sebaxba's avatar

@fylzero Hi, thanks I followed your advice and it works. Thanks! I thought that there is some error in a code but your advice is a simplest solution.

1 like
danielcrb's avatar

@fylzero how long does it take to run npm run dev? it seems to remain in this forever

fanreza's avatar

could you please provide some package.json and compose.json

fylzero's avatar

@fanreza I provided the package.json already and there are no changes needed in composer.json

Please or to participate in this conversation.