Open rajatvermaiam opened 1 year ago
same issue
same issue
same issue
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.
thank you
[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.
Your requirements could not be resolved to an installable set of packages.
Problem 1
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.
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.
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')
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.
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
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...
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.
My two cents on this. If you get this error
Error: Dynamic require of "path" is not supported
Import path.resolve this wayimport {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";
thank you for all
i cant install on laravel 10 project.