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....
Related
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?
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'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'
};
I've used elixir & browserify before. However, I want to start using Vueify so I can have all my component's parts (HTML/CSS/JS) in 1 file.
It seems something has changed with laravel-browserify
The commonly (that I have found) answer is the following:
var elixir = require('laravel-elixir');
var vueify = require('laravel-elixir-browserify').init("vueify");
elixir(function(mix) {
// resources/assets/js/main.js
mix.vueify('main.js', {insertGlobals: true, transform: "vueify", output: "public/js"});
});
This throws the error:
Error: Cannot find module 'laravel-elixir/ingredients/commands/Utilities'
//...//
at Object.<anonymous> (C:\Users\BLANKED\Code\Project\node_modules\laravel-elixir-browserify\index.js:5:17)
So, some more searching around, and I find
https://github.com/laravel/elixir/issues/203
elixir.config.js.browserify.transformers.push({
name: 'vueify'
});
elixir(function(mix) {
mix.browserify('main.js');
});
JeffreyWay's method will now gulp, however it doesn't seem to include any of the *.vue files, and instead replaces them with a vue-hot-reload-api function to presumably retrieve it.
Which seems great, and something that - no doubt - I will find very useful.
But it's not working, and I cannot figure out how to disable it.
And a very basic Vue App is not working.
Or what I am doing wrong.
Edit:
To make it clear, I would be happy to gulp *.vue files without the hot reload working.
Perhaps this is something that just works when using homestead, but I'm hoping to do some quick & dirty testing without having to run up homestead.
Final edit:
//gulpfile.js
var elixir = require('laravel-elixir');
elixir.config.js.browserify.transformers.push({
name: 'vueify'
});
elixir(function(mix) {
mix.browserify('main.js');
});
// main.js
var Vue = require('vue')
var App = require('./app.vue')
new Vue({
el: 'body',
components: {
app: App
}
})
// app.vue
<style>
.red {
color: #f00;
}
</style>
<template>
<h1 class="red">{{msg}}</h1>
</template>
<script>
module.exports = {
data: function () {
return {
msg: 'Hello world!'
}
}
}
</script>
As of this commit Vueify is now included within Laravel Elixr. I found that when including the Vueify transformer manually it is run twice causing the template to not properly be created, leaving just the hot-reload code.
To fix the issue I just removed the following lines from my gulpfile.js.
elixir.config.js.browserify.transformers.push({
name: 'vueify'
});
You may also have to ensure your version of laravel-elixr is over version 3.4.0.