Laravel Vite, bootstrap doesn't work

Hi everyone, I'm running into a problem using vite, I'm using the last version of laravel, running with Homestead it's the first time that I use vite, seems like everything is configurated well but bootstrap it's not working... someone can help me ?

this is my vite.config.js file:



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

export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
    server: {
        host: '192.168.10.10',
        watch: {
            usePolling: true,
        },
    },
});

and I imported vite in my app.blade.php:


<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

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

thinkverse

3 years ago

Level 15

Could you elaborate on what isn't working? Is the CSS classes not working? If so what does your app.css look like? Is it the JavaScript, the dropdowns, carousel, and, alerts, etc. that aren't working? Again, if so, what does your app.js look like?

Just saying "doesn't work" gives no context as to what isn't working.

sirap95

3 years ago

Level 1

@thinkverse yes sorry, I installed bootstrap running:

composer require laravel/ui php artisan ui bootstrap --auth npm install

I update the file bootstrap.js inside of resources and I runned npm run dev

inspecting the front end I didn't see any error in the console.

So in the end I started all over again, but this time I changed my vite.config.js including:

    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
        }
    },

with this and adding in resources/app.js


import './bootstrap';

import '../sass/app.scss'

import * as bootstrap from 'bootstrap'

and running again npm run dev, it worked now I can see the assets and javascript loaded well.

thinkverse

3 years ago

Level 15

@sirap95 Seems you added UI v3, which still uses Laravel Mix. If you'd used the 4.x-dev version then you'd probably not have this problem.

composer require laravel/ui:4.x-dev

But since you have, I'd recommend copying the stubs directly from the v4 version. And you might also want to check your package.json and see if the versions matched the ones that do work with Vite.

Please or to participate in this conversation.