How can I install/import/include Bootstrap Vue into my laravel project? I am new in Vue, I know how to install in a Vue JS application, but how can I add it laravel?
app.scss
// Fonts
#import url("https://fonts.googleapis.com/css?family=Nunito");
// Variables
#import "variables";
// Bootstrap
#import "~bootstrap/scss/bootstrap";
#import "node_modules/bootstrap/scss/bootstrap";
#import "node_modules/bootstrap-vue/src/index.scss";
.navbar-laravel {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}
app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require("./bootstrap")
window.Vue = require("vue")
import BootstrapVue from "bootstrap-vue" //Importing
Vue.use(BootstrapVue) // Teslling Vue to use this whole application
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i);
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
Vue.component(
"example-component",
require("./components/ExampleComponent.vue").default
)
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: "#app"
})
You can do this simply by node and npm.
install node in your system. and then open terminal from your project root directory like you do with laravel for running artisan commands.
when you open terminal.
simply run
npm i bootstrap-vue // you can also give save falg to save in package.json file
Here am not installing vue .beacuse it's already installed in laravel if you check your app.js file, inside your resources directory
and after successfully installing this you can import this in your app.js by
import BootstrapVue from 'bootstrap-vue' //Importing
Vue.use(BootstrapVue) // Telling Vue to use this in whole application
For css
you can import this by simply
#import 'node_modules/bootstrap/scss/bootstrap';
#import 'node_modules/bootstrap-vue/src/index.scss';
in app.scss
After all configuration setup
run
npm run dev //herewebpack do its work
or if you are in production, you can do this by
npm run production
Just execute npm i vue bootstrap-vue bootstrap inside folder there you have package.json or manually change package.json.
Then you have to add into ./resources/assets/js/bootstrap.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
Install your package with
npm install bootstrap-vue
or
yarn add bootstrap-vue
Then you can include globally your library by adding this row in your resources\js\app.js after window.Vue = require('vue');
Vue.use(require('bootstrap-vue'));
You can take a look to the official Vue documentation for plugins installation
Related
I use laravel and vue js in a project that I am developing on. I have installed vue-color npm package in-order to load a colour picker.
npm package installed successfully. But when I try to import it to the blade it shows the error below.
Uncaught SyntaxError: Cannot use import statement outside a module
The below code will show how I used inside the blade.
#section
<div>
.......
</div>
#endsection
#push('script')
<script>
import Photoshop from 'vue-color';
var manageDisplayStore = new Vue({
el: '#containerMain',
name: 'manageDisplayStore',
components: {
// Photoshop
},
How can I import the package?
You can import NPM packages in your /resources/js/app.js, then include /resources/js/app.js in your layout template and only then call it within a Blade template.
The app.js most probably has inclusions of NPM packages (like Bootstrap / Vue) if you've used one of the default presets when installed Laravel.
Assign the import to global variable something like window.Photoshop = require('vue-color');
The app.js should be included in your layout by default as well.
Then use it in a Blade template like you've used. Photoshop or window.Photoshop variable should be available.
Check for the document being ready before usage or it could be undefined depending where you import the app.js.
I tried to install CoreUI in my Laravel project using webpack.mix.js. I used the following for style and icons.
// CoreUI Icons Set
#import '~#coreui/icons/css/coreui-icons.min.css';
/* Import Font Awesome Icons Set */
#import '~font-awesome/scss/font-awesome.scss';
/* Import Simple Line Icons Set */
#import '~simple-line-icons/scss/simple-line-icons.scss';
/* Import Flag Icons Set */
#import '~flag-icon-css/css/flag-icon.min.css';
/* Import Bootstrap Vue Styles */
#import '~bootstrap-vue/dist/bootstrap-vue.css';
// If you want to override variables do it here
#import "variables";
// Import styles with default layout.
// If you are going to use dark layout please comment next line
#import "~#coreui/coreui-pro/scss/coreui";
// Import styles with dark layout
// If you want to use dark layout uncomment next line
//#import "~#coreui/coreui-pro/scss/themes/dark/coreui-dark";
// If you want to add something do it here
#import "custom";
// ie fixes
#import "ie-fix";
When I compile code using Laravel Mix I get the following error.
Error: Conflict: Multiple assets emit to the same filename
fonts/vendor/#coreui/icons/CoreUI-Icons-Linear-Free.eot?089ab3c11c572362d088083c561cfa55
I found some solutions on the internet, but they don't work in my case.
This had to do with a Webpack update. Ran into the same issue, just unlucky timing.
Try this.
npm install webpack#4.40.2 --save-dev
rmdir node_modules /Q /S
npm install
npm run prod
I have an empty Laravel project and have been trying to install vodal
(https://github.com/chenjiahan/vodal) into it, with no luck.
I know the basics of vue.js but am still a beginner and have never used a Vue.js package in my Laravel app before.
Note: I was able to download https://github.com/chenjiahan/vodal and get it running as a standalone. The challenge is getting it integrated into a new Laravel 5.8 project.
After running:
npm i -S vodal
Where does this code go in my laravel app? What should go in:
app.js
a blade.php view file
a new Vue component
any other location?
How do I get this Vodal (or for that matter, any vue.js) package to work with Laravel? I've been struggling for hours on end, and ANY help would be appreciated.
<vodal :show="show" animation="rotate" #hide="show = false">
<div>A vue modal with animations.</div>
</vodal>
import Vue from 'vue';
import Vodal from 'vodal';
Vue.component(Vodal.name, Vodal);
export default {
name: 'app',
data() {
return {
show: false
}
}
}
// include animation styles
#import "vodal/common.css";
#import "vodal/rotate.css";
In laravel first open terminal and install npm with the command npm install after that you can see a new folder in your project named as node_modules. all your packages code is inside this folder.
Now simply run your command for vodal like npm i -S vodal
now you can simply import this package into your app.js file as you did.
Run npm run watch for development mode which will import all vodal code from node_modules folder into your app.js file which is inside your public directory.
Update
I saw your repository and I downloaded it and edit some of your files. you were doing totally wrong.
I suggest you to learn vuejs first rather than getting deep into it.
the problem was you calling it in vue, not in the vue component so why you give the following code.
export default {
components: {
Vodal
},
data() {
return {
show: false
}
}
}
we do this in vue component, not in vue.
in data, we return only in vue component and the official documentation of vodal, they also give an example of using it in vue component.
and you not using it in vue component so simply did this in vue like below
const app = new Vue({
el: '#app',
data:{
show: false
}
});
So Now Your CSS.
so for including css. i simply import this in app.scss file like below.
#import "~vodal/common.css";
#import "~vodal/rotate.css";
now the final part and your biggest mistake is.
why you don't include app.js file in welcome.blade file. All your code is written in app.js file and you are not including it. so i simply include it in welcome.blade file like below
<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
after all, just run npm run watch
so now the main part you need to show:true for show modal. by default is false so it will not show you.
am making a click event for the show , so you understand how it's all going to work. and ill share files with the link in the comment.
I started using Vue using the Vue CLI template. In that template you create a file called 'vue.config.js' to define some settings. More to find here: https://cli.vuejs.org/guide/css.html#css-modules
I had a settings for an global css/sass file so all my components could access the variables (the file only contains vars).
vue.config.js:
module.exports = {
// So we can use the template syntages in vue components (correct me if am wrong)
runtimeCompiler: true,
// CSS settings
css: {
loaderOptions: {
sass: {
// Load in global SASS file that we can use in any vue component and any sass file
data: `
#import "#/assets/css/variables.scss";
`
}
}
}
};
Now I am working on another project. This time I use laravel and vue in one app. Laravel makes Vue works with webpack and webpack.mix.js.
Now here is where I get stuck. I can't create a config so the global css file with the variables can be recognises in the vue "one file components" I can't find any solution on the internet or my own experience to make this work.
Anyone experience with this?
Laravel mix has a shortcut to "indicate a file to include in every component styles" (look for globalVueStyles in the option available). So simply add the code below to the webpack.mix.js file at project root.
mix.options({
globalVueStyles: `resources/assets/css/variables.scss`
});
And install the dependency sass-resources-loader
npm install --save-dev sass-resources-loader
It works only as relative path. Also, the docs say that this option only works when extractVueStyles is enabled, however it was not needed for me.
To have more control over "vue-loader" you can use the undocumented function mix.override
mix.override(webpackConfig => {
// iterate and modify webpackConfig.module.rules array
})
I want to use select2 package in my laravel 5 application.
I installed it using npm install select2 and also ran npm run dev. It appears in my node_modules folder.
But how do I actually refer to the files - js and scss of select2 package in my app.blade.php ?
Run npm run watch , because keeps track of all changes in .js.
In app.js add
require('select2/dist/js/select2');
In app.blade.php example:
<div>
<select class="js-select2 css-select2-50">
<option>1</option>
</select>
</div>
I suggest an answer to this thread because it isn't marked as resolved and despite the answer given it didn't allow me to resolve the issue as of the time of reading this.
Resources
select2.org
npm
I have since found a functional solution of which here are the details in relation to the question of the OP. Verified and working with Laravel 8
Install package via npm
npm install select2
Edit /resources/js/app.js to import javascript from package
require('./bootstrap');
/* ... */
require('select2'); // Add this
/* ... */
Alpine.start();
Edit /resources/css/app.css to import styles from package
/* ... */
#import 'select2'; // Add this
Edit /resources/js/bootstrap.js to enable the use of .select2();
window._ = require('lodash');
/* ... */
window.select2 = require('select2'); // Add this
Run NPM
npm run dev
npm run watch
NPM result in my case
Laravel Mix v6.0.39
✔ Compiled Successfully in 2982ms
√ Mix: Compiled successfully in 3.05s
webpack compiled successfully
Testing
According to configuration documentation
HTML
<input type="text" class="form-control js-example-basic-single">
JS
<script type="text/javascript">
$(document).ready(function () {
$('.js-example-basic-single').select2({
placeholder: 'Select2 testing purpose'
});
});
</script>
Render