Did is what I did so far
npm i flatpickr --save
Add #import "~flatpickr/dist/flatpickr.css"; to the app.scss
index.blade.php
#section('content')
<div class="form-group">
<label for="loaned">Loaned</label>
<input type="date" class="form-control" name="loaned" id="loaned">
</div>
#endsection
#section('scripts')
<script>
flatpickr('#loaned')
</script>
#endsection
I get an error, "flatpickr is not defined". I read the documentation but it, I don't know what to do with this part:
// commonjs
const flatpickr = require("flatpickr");
// es modules are recommended, if available, especially for typescript
import flatpickr from "flatpickr";
You can add do this in one of two ways:
In your app.js (usually under the resources folder):
import flatpckr from 'flatpickr';
window.flatpckr = flatpckr;
This will expose the flatpckr function in your global window object.
An alternative is to add all your script code in your script files instead of in the blade files e.g.:
import flatpckr from 'flatpickr';
// Maybe add conditions on when to run this
flatpckr('#loaned');
This way you don't "pollute" your window object with a bunch of libraries without needing to.
In this case I add the following line to webpack.mix.js
mix.copy('node_modules/flatpickr/dist/flatpickr.css', 'public/css/flatpickr.css');
and import the css file the regular way.
<link rel="stylesheet" href="/css/flatpickr.css" />
Addition: of course you need to run npm run dev and if you use versioning, add the file to your git.
This works for me:
npm i flatpickr --save
Register flatpickr in the resources/js/app.js
require('./bootstrap');
require('alpinejs');
require("flatpickr");
Add an import flatpickr in the resources/css/app.css
#import 'flatpickr/dist/flatpickr.css';
Run the npm run dev or npm run watch.
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
How do I add a third party js file to specific blade views?
Basically I want to add gridstack functionality in a dashboard page inside my new project.
I already tried downloading the js and css files from gridstack, I then placed the gridstack.js in the project's resources/assets/js/ folder, and the css files inside the project's resources/assets/css/ folder
The next step would be to load the files in the mixer. For that I thought that I could just go to /resources/assets/js/app.js and add the library
require("./bootstrap");
//Add the following two lines
require("./jquery-ui.min");
require("./gridstack");
then I ran npm run dev, which gave the following errors
ERROR Failed to compile with 20 errors
These dependencies were not found:
jquery-ui/data in ./resources/assets/js/gridstack.js
jquery-ui/disable-selection in ./resources/assets/js/gridstack.js
omitted 18 similar lines
To install them, you can run: npm install --save jquery-ui/data
jquery-ui/disable-selection jquery-ui/focusable jquery-ui/form
jquery-ui/ie jquery-ui/keycode jquery-ui/labels jquery-ui/jquery-1-7
jquery-ui/plugin jquery-ui/safe-blur jquery-ui/scroll-parent
jquery-ui/tabbable jquery-ui/unique-id jquery-ui/version
jquery-ui/widget jquery-ui/safe-active-element jquery-ui/widgets/mouse
jquery-ui/widgets/draggable jquery-ui/widgets/droppable
jquery-ui/widgets/resizable
Of course I tried to run npm install --save jquery-ui/data to see if it works and it does not:
npm ERR! Permission denied (publickey).
fatal: Could not read from remote repository.
Please make sure you have the correct access rights and the repository exists.
How can I add a simple js and css to my project without all these compilation errors...?
I also tried another approach: removed the requires from the above approach, and went for the webpack.mix.js file and made it look like this:
mix.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/app-landing.js', 'public/js/app-landing.js')
.js('resources/assets/js/jquery-ui.min.js', 'public/js')
.js('resources/assets/js/gridstack.js', 'public/js')
....
I then ran the npm run dev only to get the same error from above.
What is wrong here?
I tried to remove the jquery-ui refference and run the npm again... the exact same error
Also, I installed gridstack using npm in my project... but I have no idea how to directly use it. I should be able to use it, since it is "installed", but how?
I also did a npm cache clean, no effect
I also verified my versions of node and npm, they seem ok:
node v6.10.3
npm v3.10.10
EDIT
After removing the ./ from the require, and after removing the jquery-ui altogether (it was already loaded) I managed to get no more errors from the npm command.
However the gridstack functionality is just not there. I compared my sources with an official demo of gridstack and saw that they include 2 js files of gridstack:
<script src="../dist/gridstack.js"></script>
<script src="../dist/gridstack.jQueryUI.js"></script>
But Laravel mix does not agree with me adding the extra require. I get errors again from npm if in /resources/assets/js/app.js I put the following
require("./bootstrap");
require("gridstack");
require("gridstack.jQueryUI"); // nor does it work if I use gridstack.all.js or gridstack.jQueryUI.js
What can I do to get the gridstack full functionality inside my Laravel 5.4 project?
EDIT
What seemed to work is:
remove all changes done previously like the one in app.js
I copied webpack.config.js from node_modules/laravel-mix into my project's root folder
I added the bellow code
module.exports.resolve = {
extensions,
alias: {
'vue$': 'vue/dist/vue.common.js',
'jquery-ui': path.resolve(__dirname, 'node_modules/jquery-ui/ui')
}
};
In webpack.mix.js, I added the following:
mix.js('resources/assets/js/app.js', 'public/js')
.copy('node_modules/gridstack/dist/gridstack.all.js','public/js');
in package.json I added:
"devDependencies": {
...
"gridstack": "^0.3.0"
}
in the command line I did
sudo npm rebuild node-sass
then
sudo npm run dev
After I the above, npm compiles correctly the mix, bun now, I get a jQuery error in the frontend:
jQuery.Deferred exception: c.draggable is not a function
d.prototype.draggable#http://myproject.com/js/gridstack.all.js:16:1395
This points to the second part of the gridstack.all.js (right at the beginning of it, where jquery is defined... again)
Error seems to indicate that jquery is loaded more than once. But that is not a problem in a classic PHP app.
Any idea how to make this work?
The default laravel application requires by default Bootstrap, lodash and jquery, and when I add gridstack to the project, looks like somewhere there is a second require for jquery. I just don't get it.
Can anyone try to simulate what I am doing and tell me how they did
it?
you need to include gridstack via asset() then everything will be happy - for this example the files are in /public/js/dashboard
eg (the hootsuite grid demo page)
<!DOCTYPE html>
<html>
<head>
<title>Grid Demo</title>
<link rel="stylesheet" href="css/dashboard/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="{{ asset('js/dashboard/fixtures.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/dashboard/gridList.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/dashboard/jquery.gridList.js') }}" type="text/javascript"></script>
<script src="{{ asset('js/dashboard/load.js') }}" type="text/javascript"></script>
</head>
<body>
<div class="header">
-
+
<p>
<a class="github-button" href="https://github.com/hootsuite/grid" data-style="mega" data-count-href="/hootsuite/grid/stargazers" data-count-api="/repos/hootsuite/grid#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star hootsuite/grid on GitHub">GitHub</a>
</p>
</div>
<div class="grid-container">
<ul id="grid" class="grid">
<li class="position-highlight">
<div class="inner"></div>
</li>
</ul>
</div>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
</body>
</html>
The documentation of md-icon describes how to use font-awesome in several parts and suggests we could use font-awesome eventually like
<md-icon fontSet="fa" fontIcon="alarm"></md-icon>
But the documentation is very confusing and I can hardly find a routine to register 3rd font set like font-awesome for md-icon via Google.
Any help is appreciated!
PS: I know the normal <i> way generally works but it doesn't seem working in some examples, where the md-icon is used originally.
In your AppModule add:
import { MatIconModule, MatIconRegistry } from '#angular/material';
Then add MatIconModule to your imports e.g.:
imports: [...
MatIconModule
...]
Add MatIconRegistry to your providers:
providers: [...
MatIconRegistry
....]
Then add the following to your AppModule class:
export class AppModule {
constructor(
...public matIconRegistry: MatIconRegistry) {
matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
}
Then you can use anywhere in your project like so:
<mat-icon fontSet="fa" fontIcon="fa-times-circle"></mat-icon>
Update
You'll need to include fontawesome in your project somewhere. I use angular-cli so adding the font-awesome npm package:
npm install font-awesome --save
and including it in styles list in angular-cli.json file works for me:
"styles": [
...
"../node_modules/font-awesome/scss/font-awesome.scss",
],
Update 2
Changed prefixes to 'Mat' to reflect recent updates to angular material.
Add font awesome cdn link in your Index.html file:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
Then try putting this code, It's working for me:
<md-icon class="fa fa-clock-o" aria-hidden="true"></md-icon>
<md-icon class="fa fa-bell" aria-hidden="true"></md-icon>
I've setup https://github.com/FortAwesome/angular-fontawesome#using-the-icon-library
The way I then use it:
<mat-form-field>
<input matInput style="width: calc(100% - 20px);/>
<fa-icon [icon]="['fal', 'home']" size="lg" class="fa-pull-right"></fa-icon>
</mat-form-field>