Long story short. I've installed a package via NPM into a Laravel Application. I have run npm run dev, which has built successfully; I have also run npm run watch while developing the application.
I have also put this line in the app.js file:
import Push from 'push.js';
And I have included the:
<script src="{{ asset('js/app.js') }}" defer></script>
line into my main template file.
However I'm still getting this error:
Push is not defined
When trying to use the package.
(Here is the package)
(Laravel 5.8)
If you're trying to use it outside of your app.js (and its children via import or require), like in a Blade template, you probably need to do window.Push = Push in your app.js to make it available globally. You can see this in Laravel's default install in the resources/js/bootstrap.js. For example:
window._ = require('lodash');
window.$ = window.jQuery = require('jquery');
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 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 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
I want to add a carousel plugin into laravel.
https://github.com/OwlCarousel2/OwlCarousel2
so I run npm install --save owl.carouse and add following code into index.blade.php
<script src="/node_modules/owl.carousel/dist/owl.carousel.js"></script>
The owl.carousel.js is inside my project, but when I run npm run watch, and look at the browser, there show an error in the console:
GET http://127.0.0.1:8000/node_modules/owl.carousel/dist/owl.carousel.js 404 (Not Found)
Why is that?
You should not import it through a script tag. Add it in your bootstrap.js file
require('owl.carousel');
require() will use the node_modules as the root dir
You can of course use require in any other .js file that you then import through a script tag.
If you are using VueJs you do at the top of the vue component
import owl from 'owl.carousel'
Your web server does not have access to node_modules directory.
You'd better use gulp to copy and bundle it to public directory.
Or else if you want, you can do it manually. Copy the script to the public directory.
I usually make asset/js directory under the public and then copy owl under it.
You will have:
<script src="/asset/js/owl.carousel/dist/owl.carousel.js"></script>
Add this line in your main .scss file:
#import '~owl.carousel/dist/assets/owl.carousel.css';
Compile the css with npm run dev
You can repeat these steps for your javascript files
Edit:
If you do not make use of Laravel mix yet, read this documentation first. https://laravel.com/docs/5.6/mix
(Disclaimer: I'm not very proficient in Vue)
What is the correct way to import/include a Vuejs package in my project? I somehow seem to not be able to import a file.
I'm trying to import this package: https://github.com/sagalbot/vue-select
What I have done so far:
Ran the command: npm install vue-select
Tried adding the vue-select package to my Vue like so (in
resources/assets/js/app.js):
import vSelect from './components/Select.vue'
Vue.component('v-select', vSelect);
Now when I use the v-select in my HTML file it gives this error in console: [Vue warn]: Unknown custom element: <v-select> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
What I've tried to fix this:
Instead of using this in app.js I used it in my *.vue file, I don't use webpack/browserify I think, so import doesnt work :/ I prefer not to use browserify.
I have vue-resource package aswell and that created a vue-resource.js file in my public/js directory which I can import to use vue-resource. It seems like vue-select doesn't create its own vue-select.js file.
If you have any suggestions, please let me know.
I have looked at this question: Import vue package in laravel but I don't understand what paths and files the lines should be added to.
I think this is hust your import statement. If you have installed it through npm, then you should import from vue-select. Also, use require instead of import, This way:
Vue.component('v-select', require('vue-select'));
You may want to use it only in your Vue component, then you should load your own component as explained above, And in your own vue component say VueSelect.vueuse this:
<template>
<!-- use it with name 'v-select' in your component -->
<v-select></v-select>
</template>
<script>
export default {
...
components: { vSelect: require('vue-select') },
...
}
</script>
Then you can register your own component a s global,
Vue.component('vue-select', require( './components/VueSelect.vue') );
And use it in your root component:
<vue-select></vue-select>
Update
If you are using laravel, it gives you laravel mix out of the box which compiles down your assets using webpack. All you need to do is run a compile script:
npm run dev
If you are making changes to your js files, you wouldn't want to run this over and over, so you can run watch command:
npm run watch
If this doesnt work for you, try watch-poll instead. Als, make sure you have installed all dependencies first:
npm install