I have installed datatables with npm by help of this doc, now I'm not sure how I can add datatables css and js files to my app.css and app.js
Downloaded files by NPM
Code
my webpack.mix.js
const mix = require('laravel-mix');
//laravel default to make app.css and app.js
// I want add Datatables to these files
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
//my template files
mix.combine([
'public/theme/primary/js/jquery.min.js',
'public/theme/primary/js/popper.min.js',
'public/theme/primary/js/bootstrap.min.js',
'public/theme/primary/js/uza.bundle.js',
'public/theme/primary/js/default-assets/active.js'
], 'public/js/combined.js');
Any idea?
Solved
I added this code to my bootstrap.js under require('bootstrap');
require( '../../node_modules/datatables.net/js/jquery.dataTables.js' );
require( '../../node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js' );
and then added styles to my app.scss
#import '~datatables.net-bs4/css/dataTables.bootstrap4.css';
Everything works perfectly now.
Hope it help others.
To combine multiple scripts and styles you can do it this way:
mix.scripts([
'node_modules/datatables.net-bs4/js/dataTables.bootstrap4.js',
'resources/js/app.js'
])
.styles([
'node_modules/datatables.net-bs4/css/dataTables.bootstrap4.css',
'resources/sass/app.scss'
]);
This by default should create all.js and all.css files in the respective js and css public folders.
Related
I have a fresh Laravel installation. On compiling files using npm run dev VUE I get a file error
"You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file"
Laravel Verion: "^8.12"
Package.json
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"vue": "^2.5.17",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.10"
}
blade file
<div id="app">
<hello></hello>
</div>
<script src="{{mix('js/app.js')}}"></script>
app.js
require('./bootstrap');
import Vue from 'vue'
Vue.component('hello', require('./hello.vue').default);
const app = new Vue({
el: '#app'
});
Hello.vue
<template>
<div>
Hello World!
</div>
</template>
<script>
export default {
}
</script>
npm run dev
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
| <div>
| Hello World!
as your using laravel-mix 6 it have different config for webpack.mix.js
webpack.mix.js
use .vue()
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
ref link https://laravel-mix.com/docs/6.0/upgrade
If anyone still encounters this issue, here how I figure out the cause in my case and it's actually a Laravel mix 6 configuration issue for Vue support.
You can check the documentation for more details : Laravel mix 6 upgrade documentation
But let me explain it in short here...
I was using Laravel mix 6 (you may probably use the same if you created a fresh Laravel 8 project) and according to its official documentation "Laravel Mix 6 ships with support for the latest versions of numerous dependencies, including webpack 5, PostCSS 8, Vue Loader 16, and more". So no need for you to add vue loader although the error states it.
You rather need to tell explicitly Laravel mix 6 to support vue, here what they say "Laravel Mix was originally built to be quite opinionated. One of these opinions was that Vue support should be provided out of the box. Any call to mix.js() would instantly come with the benefit of Vue single-file components.
Though we're not removing Vue support by any stretch, we have extracted Vue to its own "featured flag": mix.vue().
Here what I did.
First option
// You can simply use this
mix.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
Second option
// Or this if you want to extract styles as well
// Feel free to check the documentation for more customisations
mix.js('resources/js/app.js', 'public/js')
.vue({
extractStyles: true,
globalStyles: false
})
.postCss('resources/css/app.css', 'public/css', [
//
]);
First of all, thanks to Paul for this clarification which saved my evening :)
After that the compilation worked for me, but an error appeared in the console when I reloaded the page:
Vue.use is not a function
For those who would be in the same case, in your app.js file, you must replace the line :
window.Vue = require('vue');
With :
window.Vue = require('vue').default;
here i do with the some problem
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
mix.js('resources/js/app.js', 'public/js').vue() .postCss('resources/css/app.css', 'public/css', [ // ]);
Or
npm install vue-template-compiler vue-loader#^15.9.7 --save-dev --legacy-peer-deps
try both..
after npm run prod for production in laravel, do I need to upload mix.manifest.json along app.css and app.js to shared hot or not?
the mix.manifest.json file will change to :
{
"/js/app.js": "/js/app.js?id=b891664151c01b268197",
"/css/app.css": "/css/app.css?id=4b5a5b36ae9495db0146"
}
but no such files in public, uploading just app.css and app.js is enough?
and is my code correct for versioning in production and development?
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.version();
if (mix.inProduction()) {
mix.version();
}
You will also have to copy mix.manifest.json to your public folder along with app.css and app.js. Mix.manifest.json is where Laravel looks to get the version number. You will also have to change how you grab your css and js files in your app.blade.php so it looks like this:
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
As title says when I run npm run dev or run watch it compiles just app.js and app.scss to public as it should but for additional files it just recopy content.
Using Laravel 5.7 and I added two additional files to resources (user.js & user.scss)
Also I added two more lines into webpack.mix:
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/user.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/user.scss', 'public/css');
User files are just recopied like those in resource folder..
This works fine in laravel 5.6 and same files are used..
If you wanna get only one file in public you need to add require('./user'); at the end of your app.js.
Same for scss files, add #import 'user'; into app.scss, but rename user.scss to _user.scss.
For separate files in my project on laravel 5.7
// App
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
// Admin
mix.js('resources/js/admin.js', 'public/js')
.sass('resources/sass/admin.scss', 'public/css');
I have been able to get this to work on just a basic vue application but I am having trouble bringing it across to laravel vue. I was able to add module in vue.config.js in the vue application that would import any scss files i added. Using the same code in the laravel vue app in the webpack.mix.js file it is not compiling correctly. This is my webpack.mis.js file:
let mix = require('laravel-mix');
module.exports = {
css: {
loaderOptions: {
sass: {
data: `#import "./resources/assets/sass/variables.scss";`
}
}
}
};
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
I have also attempted the other configurations suggested from the docs but I haven't succeeded. I have also seen a lot of answers suggesting to just include the relative path to the files I wish to include in every component but this is inefficient and error prone as the application develops. There must be a way to achieve this and I have just got the configuration incorrect.
Any advice is appreciated, thanks.
Laravel Mix has an option exactly for this. It's globalVueStyles.
Check out the documentation: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/options.md.
It will only work with extractVueStyles active:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
extractVueStyles: true,
globalVueStyles: 'resources/sass/_variables.scss',
})
.version();
How can I minify my JavaScript and css files all in one?
currently I have:
let mix = require('laravel-mix');
mix.styles([
'theme/admin/assets/css/bootstrap.css',
'theme/admin/assets/font-awesome/css/font-awesome.css',
'theme/admin/assets/css/zabuto_calendar.css',
'theme/admin/assets/lineicons/style.css',
'theme/admin/assets/css/style.css',
'theme/admin/assets/css/style-responsive.css',
'css/adminstyle.css'
], 'public/css/admin.css');
mix.scripts([
'theme/admin/assets/js/jquery.min.js',
'theme/admin/assets/js/bootstrap.min.js',
'theme/admin/assets/js/jquery.dcjqaccordion.2.7.js',
'theme/admin/assets/js/jquery.scrollTo.min.js',
'theme/admin/assets/js/jquery.nicescroll.js',
'theme/admin/assets/js/jquery.sparkline.js',
'theme/admin/assets/js/common-scripts.js',
'theme/admin/assets/js/zabuto_calendar.js'
], 'public/js/admin.js');
in my webpack.mix.js file but it creates empty files.
You have to use full path starting from the root directory of your Laravel application.
So instead of:
'theme/admin/assets/css/bootstrap.css'
As you've said that theme is under public, you should do this:
'public/theme/admin/assets/css/bootstrap.css'
Do this update on the rest of your URLs