jetstrap laravel 10 support with php 8

i cant install on laravel 10 project.

nascent-africa/jetstrap[1.0, ..., v1.3.1] require php ^7.3 -> your php version (8.2.2) does not satisfy that requirement.
- nascent-africa/jetstrap[v1.4, ..., v1.4.1, v2.0, ..., v2.5.3] require illuminate/support ^8.0 -> found illuminate/support[v8.0.0, ..., v8.83.27] but these were not loaded, likely because it conflicts with another require.
- nascent-africa/jetstrap v2.5.4 requires illuminate/support ^8.0|^9.0 -> found illuminate/support[v8.0.0, ..., v8.83.27, v9.0.0, ..., v9.52.4] but these were not loaded, likely because it conflicts with another require.
- Root composer.json requires nascent-africa/jetstrap * -> satisfiable by nascent-africa/jetstrap[1.0, ..., v1.4.1, v2.0, ..., v2.5.4].

Mar 12 '23 13:03 rajatvermaiam

same issue

Apr 07 '23 23:04 Raicon47

same issue

Apr 12 '23 06:04 nudecode

same issue

Apr 17 '23 00:04 DDSameera

I spent a few days fighting with this and in the end I decided to integrate it on my own. The only problem is if you want to use jetstream's base components or view the template as if it were bootstrap. For that you will have to manually change the default pages and components so that they have the bootstrap classes. To use bootstrap you will also need propper (for dropdowns, popovers and other components) and sass.

The steps would be:

Install popper npm install bootstrap @popperjs/core
Install sass npm install sass --save-dev
Rename the resources css folder and file: resources/css by resources/scss and resources/scss/app.css by resources/scss/app.scss
Change the vite-config config

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

Import bootstrap styles

// resources/scss/app.scss
@import "~bootstrap/scss/bootstrap";

Import bootstrap js

// resources/js/app.js
import * as bootstrap from 'bootstrap';

Modify the blade to import it, for example, the welcome page

<!-- resources/views/welcome.blade.php -->
<head>
     @vite(['resources/scss/app.scss', 'resources/js/app.js'])
</head>

Compile it with npm run build
Test it with some bootstrap html example like https://getbootstrap.com/docs/5.3/examples/grid/

This should do the work.

Apr 17 '23 19:04 jordihuertas

thank you

Apr 20 '23 23:04 Raicon47

https://github.com/IAmShafqatAli/boostrap5-inertia-ssr

You can try this repo. I used jet strap with Laravel 9 and upgraded to Laravel 10. I am using it in my project and it seems to be doing the trick for me. Feel free to pull it and modify it as your need.

May 08 '23 17:05 IAmShafqatAli

Your requirements could not be resolved to an installable set of packages.

Problem 1 - nascent-africa/jetstrap[1.0, ..., v1.3.1] require php ^7.3 -> your php version (8.2.0) does not satisfy that requirement. - nascent-africa/jetstrap[v1.4, ..., v1.4.1, v2.0, ..., v2.5.3] require illuminate/support ^8.0 -> found illuminate/support[v8.0.0, ..., v8.83.27] but these were not loaded, likely because it conflicts with another require. - nascent-africa/jetstrap v2.5.4 requires illuminate/support ^8.0|^9.0 -> found illuminate/support[v8.0.0, ..., v8.83.27, v9.0.0, ..., v9.52.9] but these were not loaded, likely because it conflicts with another require. - Root composer.json requires nascent-africa/jetstrap * -> satisfiable by nascent-africa/jetstrap[1.0, ..., v1.4.1, v2.0, ..., v2.5.4].

You can also try re-running composer require with an explicit version constraint, e.g. "composer require nascent-africa/jetstrap:*" to figure out if any version is installable, or "composer require nascent-africa/jetstrap:^2.1" if you know which you need.

Installation failed, reverting ./composer.json and ./composer.lock to their original content.

Jun 15 '23 04:06 Jimmy2004S

I spent a few days fighting with this and in the end I decided to integrate it on my own. The only problem is if you want to use jetstream's base components or view the template as if it were bootstrap. For that you will have to manually change the default pages and components so that they have the bootstrap classes. To use bootstrap you will also need propper (for dropdowns, popovers and other components) and sass.

The steps would be:

Install popper npm install bootstrap @popperjs/core

Install sass npm install sass --save-dev

Rename the resources css folder and file: resources/css by resources/scss and resources/scss/app.css by resources/scss/app.scss

Change the vite-config config
// vite.config.js
export default defineConfig({
     plugins: [
         laravel({
             input: ['resources/scss/app.scss', 'resources/js/app.js'],
             [...]
         }),
     ],
     resolve: {
         aliases: {
             '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
         }
     }
});
Import bootstrap styles
// resources/scss/app.scss
@import "~bootstrap/scss/bootstrap";
Import bootstrap js
// resources/js/app.js
import * as bootstrap from 'bootstrap';
Modify the blade to import it, for example, the welcome page

<head>
     @vite(['resources/scss/app.scss', 'resources/js/app.js'])
</head>
Compile it with npm run build

Test it with some bootstrap html example like https://getbootstrap.com/docs/5.3/examples/grid/

This should do the work.

My two cents on this.

If you get this error Error: Dynamic require of "path" is not supported

Import path.resolve this way import {resolve} from 'path'

So you have '~bootstrap': resolve(__dirname, 'node_modules/bootstrap')

Aug 16 '23 15:08 Gupyzer0

I spent a few days fighting with this and in the end I decided to integrate it on my own. The only problem is if you want to use jetstream's base components or view the template as if it were bootstrap. For that you will have to manually change the default pages and components so that they have the bootstrap classes. To use bootstrap you will also need propper (for dropdowns, popovers and other components) and sass. The steps would be:

Install popper npm install bootstrap @popperjs/core

Install sass npm install sass --save-dev

Rename the resources css folder and file: resources/css by resources/scss and resources/scss/app.css by resources/scss/app.scss

Change the vite-config config
// vite.config.js
export default defineConfig({
     plugins: [
         laravel({
             input: ['resources/scss/app.scss', 'resources/js/app.js'],
             [...]
         }),
     ],
     resolve: {
         aliases: {
             '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
         }
     }
});
Import bootstrap styles
// resources/scss/app.scss
@import "~bootstrap/scss/bootstrap";
Import bootstrap js
// resources/js/app.js
import * as bootstrap from 'bootstrap';
Modify the blade to import it, for example, the welcome page

<head>
     @vite(['resources/scss/app.scss', 'resources/js/app.js'])
</head>
Compile it with npm run build

Test it with some bootstrap html example like https://getbootstrap.com/docs/5.3/examples/grid/

This should do the work.
My two cents on this.

If you get this error Error: Dynamic require of "path" is not supported

Import path.resolve this way import {resolve} from 'path'

So you have '~bootstrap': resolve(__dirname, 'node_modules/bootstrap')

After doing all these two quote, i have face a problem ( i have run npm i boostrap)

[vite:css] [sass] Can't find stylesheet to import. ╷ 9 │ @import "~bootstrap/scss/bootstrap"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ resources\scss\app.scss 9:9 root stylesheet

Sep 03 '23 04:09 carlx1101

Hey everyone,

if somebody is interessted, i build an update of this package which for now only supports Livewire. It will swap the Tailwind views with some Bootstrap views and works with laravel 10 with vite.

https://github.com/m1ge0/bootsjet

Feedback is very appreciated...

Nov 02 '23 20:11 m1ge0

I spent a few days fighting with this and in the end I decided to integrate it on my own. The only problem is if you want to use jetstream's base components or view the template as if it were bootstrap. For that you will have to manually change the default pages and components so that they have the bootstrap classes. To use bootstrap you will also need propper (for dropdowns, popovers and other components) and sass. The steps would be:

Install popper npm install bootstrap @popperjs/core

Install sass npm install sass --save-dev

Rename the resources css folder and file: resources/css by resources/scss and resources/scss/app.css by resources/scss/app.scss

Change the vite-config config
// vite.config.js
export default defineConfig({
     plugins: [
         laravel({
             input: ['resources/scss/app.scss', 'resources/js/app.js'],
             [...]
         }),
     ],
     resolve: {
         aliases: {
             '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap')
         }
     }
});
Import bootstrap styles
// resources/scss/app.scss
@import "~bootstrap/scss/bootstrap";
Import bootstrap js
// resources/js/app.js
import * as bootstrap from 'bootstrap';
Modify the blade to import it, for example, the welcome page

<head>
     @vite(['resources/scss/app.scss', 'resources/js/app.js'])
</head>
Compile it with npm run build

Test it with some bootstrap html example like https://getbootstrap.com/docs/5.3/examples/grid/

This should do the work.
My two cents on this. If you get this error Error: Dynamic require of "path" is not supported Import path.resolve this way import {resolve} from 'path' So you have '~bootstrap': resolve(__dirname, 'node_modules/bootstrap')
After doing all these two quote, i have face a problem ( i have run npm i boostrap)

[vite:css] [sass] Can't find stylesheet to import. ╷ 9 │ @import "~bootstrap/scss/bootstrap"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ resources\scss\app.scss 9:9 root stylesheet

Try replacing it with @import "node_modules/bootstrap/scss/bootstrap";

Nov 28 '23 13:11 alvaromoli

thank you for all

Jun 03 '24 19:06 Amjedashamiri

jetstrap jetstrap copied to clipboard

laravel 10 support with php 8

jetstrap
jetstrap copied to clipboard