I am trying to use this lib: https://github.com/themesberg/tailwind-datepicker
webpack.mix.js file:
mix.setPublicPath('htdocs');
mix.js('resources/js/app.js', 'htdocs/js').
js('resources/js/dateRangePicker.js', 'htdocs/js');
resources/js/dateRangePicker.js file:
import DateRangePicker from '#themesberg/tailwind-datepicker/DateRangePicker';
app.blade file
...
<script type="module" src="{{mix('js/dateRangePicker.js')}}"></script>
<script>
const dateRangePickerEl = document.getElementById('datepickstart');
new DateRangePicker(dateRangePickerEl, {
// options
}
</script>
...
But i am getting error in console:
Uncaught ReferenceError: DateRangePicker is not defined
What am I doing wrong and what is the best way to import and work with js modules?
Related
I am using Laravel. the Frontside is developed by Blade and vue.
After Installing "vuetify". The other component which I have been using happened an error.
I don't know what is going on. the component doesn't be shown in the div.
when "const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');" is removed from mix.webpackconfig, the error from Calendar disappeared.
Is that related to installing "vuetifty"?
ERROR
[Vue warn]: Error in render: "TypeError: Cannot read property 'lang' of undefined"
found in
---> <VCalendarMonthly>
<VCalendar>
<ACalendar> at resources/js/components/ACalendar.vue
<Root>
app.js
Code
window.Vue = require('vue');
Vue.use(require('v-calendar'));
Vue.component('a-calendar', require('./components/ArticleCalendar.vue').default);
const app = new Vue({
el: '#app'
});
<script src=" {{ mix('js/app.js') }}"></script>
<div id="app">
<a-calendar url="{{ url }}"></a-calendar>
</div>
ACalendar.vue
<template>
<div>
<v-calendar v-on:dayclick="dayclick"></v-calendar>
</div>
</template>
export default {
data(){
return {
items:[
],
isLoaded : false,
isLoading : false,
isError : false,
}
},
props: {
url : String
},
}
</script>
const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.webpackConfig({
plugins: [
new VuetifyLoaderPlugin(),
],
});
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/chat.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.version();
app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
When I removed mix.webpackConfig and VuetifyLoaderPlugin,The calendar component works well.
After recently applied vuetify inside laravel 7 means with vuejs, I wasn't able to configure the vuetify actual settings, but that's what I have done and it works normal now.
Also I want to mention that vuetify has almost everything like calendars, tables buttons, forms etc...
resources/sass/app.scss
// Fonts
#import url('https://fonts.googleapis.com/css?family=Nunito');
// Variables
#import 'variables';
// Icons
#import '~#mdi/font/css/materialdesignicons.min.css';
#import '~material-design-icons-iconfont/dist/material-design-icons.css';
// Bootstrap
//#import '~bootstrap/scss/bootstrap';
// Vuetify
#import '~vuetify/dist/vuetify.min.css';
Note I have left the webpack.mix.js as it is
resources/js/app.js
require('./bootstrap');
window.Vue = require('vue');
import VueRouter from 'vue-router'
import Vuetify from 'vuetify';
Vue.use(VueRouter);
Vue.use(Vuetify);
import {routes} from './routes';
import App from './components/App.vue';
const app = new Vue({
el: '#app',
vuetify: new Vuetify(),
router: new VueRouter({mode: 'hash', routes}),
render: h => h(App)
});
View where components are rendering means where app id is located
//Inside head tag
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
//Inside body tag
<v-app id="app"></v-app>
<script src="{{ asset('js/app.js') }}"></script>
This way I have configured my newly vuejs project with vuetify inside laravel 7, everythings is working fine, I might have misconfigured something means there might be a good approach than mine. But for me it's working now.
I am trying to run a javascript module inline. I can't figure out how.
I am using Laravel and Webpack. I am not so technical, I just follow the docs as much as possible.
resources/assets/js/revision.js
var revision = function () {
console.log('Hell world');
};
module.exports = revision;
I run npm run dev with this webpack.mix.js
mix.js('resources/assets/revision.js', 'public/js/revision.js').version();
I have tried this url
<script type="module">
import { revision } from '/js/revision.js';
</script>
gives "The requested module '/js/revision.js' does not provide an export named 'revision'"
and
<script type="module" src="{{ asset('js/revision.js') }}"></script>
is not doing anything....
I use Laravel 5.6, with Mix. I want to load a plugin which uses jQuery to my project.
I created a fileuploader.js file :
// see more at http://plugins.krajee.com/file-input#installation
import 'bootstrap-fileinput/js/fileinput';
import 'bootstrap-fileinput/js/locales/fr';
It loads a npm package. In my webpack.mix.js, I have :
mix.autoload({
jquery: ['$', 'window.jQuery']
});
mix
.js('resources/assets/js/app.js', 'public/js')
.js('resources/assets/js/fileuploader.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/plugins/fileuploader.scss', 'public/css')
;
mix.copyDirectory('resources/assets/img', 'public/img');
if (mix.inProduction()) {
mix.version();
}
In my app.js, I have :
import $ from 'jquery';
window.$ = window.jQuery = $;
import './bootstrap';
$(function() {
// some jQuery code
});
I removed this line from bootstrap.js file :
window.$ = window.jQuery = require('jquery');
But when I take a look to /js/fileuploader.js file generated with Webpack, it sill loads the full jQuery code.
The result in my template is :
<script src="http://localhost:8000/js/app.js"></script>
<script src="http://localhost:8000/js/fileupload.js"></script>
<script>
$(function () {
$('input[type="file"]').fileinput({
language: 'fr',
uploadUrl: '/upload',
});
})
</script>
And I got this error :
Uncaught TypeError: $(...).fileinput is not a function
I suppose it's because jQuery (version 3.3.1) is loaded 2 times in both JS files. How can I prevent this ? Thanks
try removing
mix.autoload({
jquery: ['$', 'window.jQuery']
});
I'm using Laravel facing a problem when compiling assets. By default laravel provides a wrapper around webpack which is laravel-mix, laravel-mix using file called webpack.mix.js, and by using npm run dev command, laravel-mixcompile all js files into one webpack bundle js file.
Code of webpack.mix.js:
let mix = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I have a Main.js file which has some jquery code.
Main.js:
;( function( $, window, document, undefined ) {
'use strict';
$(window).on('load', function() {
alert('ready');
});
}
)( jQuery, window, document );
My directory structure is something like this
resources\assets\js
app.js
bootstrap.js
Main.js
Code of app.js:
require('./bootstrap');
Code of bootstrap.js:
try {
window.$ = window.jQuery = require('jquery');// jquery
require('bootstrap');// bootstrap framework js
require('./Main'); // Main.js
} catch (e) {
}
When i type command npm run dev all assets are compile into one file then why my Main.js jquery code which is just an alert popup doesn't execute on the page.
But when i change order of the bootstrap.js file into something like this then my Main.js code is execute.
try {
window.$ = window.jQuery = require('jquery');// jquery
require('./Main'); // Main.js
require('bootstrap');// bootstrap framework js
} catch (e) {
}
Why this thing is happening. Does conflict happen between bootstrap framework js file and Main.js file.
Replying to the tldr in the comments:
There is not any error comes, but when i load my page my Main.js script is not executed
I had this same issue and including the manifest.js and vendor.js solved these issues:
<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
I'm simply trying to learn vuejs with laravel and cannot get the example component working.
I have created a fresh route to simply serve the vue example for now.
create.blade.php
<!DOCTYPE html>
<html>
<head>
<title>VUE</title>
</head>
<body>
<h1>example</h1>
<div id="app">
<example></example>
</div>
<script src="/js/app.js"></script>
</body>
</html>
The app.js and example.vue files are exactly as out of the box ( so i won't bother showing example.vue here
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
I have npm run watch running and it seems to have built the app files ok.
Controller and route is fine, as page is loading, but I'm getting console error as follows
app.js:1697 Uncaught TypeError: Cannot read property 'csrfToken' of
undefined
at Object.<anonymous> (app.js:1697)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:778)
at __webpack_require__ (app.js:20)
at Object.<anonymous> (app.js:41430)
at __webpack_require__ (app.js:20)
at app.js:66
at app.js:69
When i click the console error in chrome it points to the line in app.js:
window.axios.defaults.headers.common['X-CSRF-TOKEN'] =
window.Laravel.csrfToken;
Is it complaining about csrftoken because I've used it as a blade template ?
How can I get it working inside laravel, just so i can play with and learn vuejs ?
The code that it is complaining about is in the resources/assets/js/bootstrap.js source, which you'll see is being referenced at the top of the app.js file. In your blade file, before you include your app.js, you can set the csrf token value.
<script>
window.Laravel.csrfToken = {{ csrf_token() }};
</script>
<script src="/js/app.js"></script>
Or, alternatively, if all you want to do is play with the example as-is, you can probably just remove that line of code from bootstrap.js. But you'll probably need it later once you start using VueJS more.
I think it's better to modify your bootstrap.js file (after axios import line) with the following:
window.axios.defaults.headers.common = {
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
'X-Requested-With': 'XMLHttpRequest'
};