I'm using Laravel 5.6, Laravel Mix 2.0, and Bootstrap-Vue 2.0.0-rc.1.
Trying to find a way to configure Laravel Mix to include Bootstrap-Vue's CSS into my app.css file and prevent Bootstrap-Vue from including <style> tags into the page <head>.
I saw this note in the package docs but still not sure how to use this properly:
Note: requires webpack configuration to load css files (official guide)
Finally, found a solution - ExtractTextPlugin.
let mix = require('laravel-mix');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
mix.webpackConfig({
module: {
rules: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
}
});
Reference: https://github.com/JeffreyWay/laravel-mix/issues/1589
Install:
npm i bootstrap-vue
npm install --save-dev style-loader css-loader
Use:
edit resources/js/app.js to:
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
edit resources/sass/app.scss to:
Import the styles:
import '~bootstrap/dist/css/bootstrap.css'
import '~bootstrap-vue/dist/bootstrap-vue.css'
Make sure the app.js and app.css are included in the blade(view) that is acting as the container for your vue.
See: https://bootstrap-vue.js.org/docs/
Related
With Laravel Mix I'm generating two different css/js files for Admin and for the main site like this:
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/js/site/app.js', 'public/js')
.postCss('resources/css/site/app.css', 'public/css', [
require('autoprefixer'),
require('postcss-import'),
tailwindcss('./tailwind.site.config.js'),
])
.options({
processCssUrls: false,
}).version();
mix.js('resources/js/admin/app.js', 'public/_admin/js')
.postCss('resources/css/admin/app.css', 'public/_admin/css', [
require('autoprefixer'),
require('postcss-import'),
tailwindcss('./tailwind.admin.config.js'),
])
.options({
processCssUrls: false,
}).version();
How can I tell vite to do the same thing ??
Thanks!!
The default vite.config.js is
import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';
export default defineConfig({
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: [
...refreshPaths,
'app/Http/Livewire/**',
],
}),
],
});
Create two vite.config.js files, and also create two tailwind.config.js files for frontend & backend.
I have already posted this solution on github with demo laravel project.
https://github.com/pkfan/setup-laravel-vite-for-multiple-tailwind.config.js
I have upload a video about it.
watch this video on youtube
See https://laravel-vite.dev/guide/extra-topics/multiple-configurations.html.
You will need to add a configuration to config/vite.php, create a new vite.back-office.config.ts file, pass the configuration name to the #vite directive and run slightly different development and build commands.
The docs are TypeScript-focused, but the same technique will work for your JS/CSS assets.
Starting with Tailwind CSS v3.2, hacky workarounds are no longer needed.
You can now define the config file to use inside of your CSS files:
https://tailwindcss.com/blog/tailwindcss-v3-2#multiple-config-files-in-one-project-using-config
I built a single page application (SPA) using Laravel 8 + Vue.js + InertiaJs. Everything is working fine in the development environment, but when I compile assets for production, it shows me a blank page, and there is no error in the console. All assets are loading correctly with a 200 code, and everything seems to be OK, but the Vue app is not mounting!
webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-workbox');
mix.webpackConfig({
output: {
filename: '[name].js',
chunkFilename: 'js/[name].js',
}
}).js('resources/js/app.js', 'public/js')
.extract(['vue'])
.version();
Image1
Image2
Image3
try using the inertiajs webpack.mix.js provided by the pingCRM github:
const path = require('path')
const mix = require('laravel-mix')
const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
/*
|--------------------------------------------------------------------------
| 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
.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
// prettier-ignore
cssImport(),
cssNesting(),
require('tailwindcss'),
])
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
},
},
})
.version()
.sourceMaps()
note you may have to follow the instructions for setting up tailwindcss which can be found here, only do this if you plan to use it otherwise remove the require('tailwindcss'), from the webpack file
you also may need to npm install --save-dev postcss-import and npm install --save-dev postcss-nesting the --save-dev flag will add it to your package.json file for future reference
I am currently building a web application using Laravel and Vue. The error that I am getting is for all the components that I have.
ERROR in ./resources/assets/js/components/App 1:0
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 id="layout-wrapper">
| <app-topbar></app-topbar>
# ./resources/assets/js/app.js 6:0-35 41:11-14
# multi ./resources/assets/js/app.js ./resources/assets/sass/style.scss
the App.vue file looks like this:
<template>
<div id="layout-wrapper">
<app-topbar></app-topbar>
<app-menu></app-menu>
<div class="main-content">
<div class="page-content">
<router-view></router-view>
<app-footer></app-footer>
</div>
</div>
</div>
</template>
<script>
import AppTopbar from './_partials/AppTopbar'
import AppMenu from './_partials/AppMenu'
import AppFooter from './_partials/AppFooter'
import Users from './users/Users'
import Dashboard from './dashboard/Dashboard'
export default {
components: {
'app-topbar': AppTopbar,
'app-menu': AppMenu,
'app-footer': AppFooter,
Users,
Dashboard,
},
beforeMount() {
axios.get('/metadata')
.then(response => {
window.Laravel = {
response: response,
current_year: response.current_year,
csrf: response.csrf,
asset(path){
return this.response.asset+'/'+path;
},
trans(text){
return this.response.trans[text];
},
route(name){
return this.response.base_url+'/'+this.response.routes[name];
}
};
});
},
}
</script>
From the error, I understand that the problem is that <template></template> tags are not being parsed. From what I found out I need the vue-loader and vue-template-compiler dependencies for them. I have already installed those, however, I still keep getting these errors.
I also found that trying the older version (current 15.x.x , older 14.x.x) of vue-loader could help, but it did not.
My versions are:
laravel 8.12.3
npm 6.14.4
package.json dependencies:
"devDependencies": {
"axios": "^0.19",
"cross-env": "^7.0",
"laravel-mix": "^5.0.1",
"lodash": "^4.17.19",
"resolve-url-loader": "^3.1.0",
"sass": "^1.29.0",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.12"
},
"dependencies": {
"vue": "^2.6.12",
"vue-loader": "^14.2.4",
"vue-router": "^3.4.9"
}
Since I am not skilled in Vue, I understand that I did something wrong. However, I have not found solutions online. So, I would like to ask for your help.
Update:
Since Laravel has a pre-configured webpack.config file then probably, this is what I think I am able to show you.
webpack.mix.js :
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.sass('resources/assets/sass/style.scss', 'public/assets')
.js('resources/assets/js/app.js', 'public/js')
.styles([
// Layout
'resources/assets/template/system/css/bootstrap.min.css',
'resources/assets/template/system/css/icons.min.css',
'resources/assets/template/system/css/app.min.css',
// Data Table
'resources/assets/template/system/css/dataTables.bootstrap4.min.css',
'resources/assets/template/system/css/responsive.bootstrap4.min.css',
// Custom
'public/assets/style.css'
], 'public/css/style.min.css')
.scripts([
// Layout
'resources/assets/template/system/js/jquery.min.js',
'resources/assets/template/system/js/bootstrap.bundle.min.js',
'resources/assets/template/system/js/metisMenu.min.js',
'resources/assets/template/system/js/simplebar.min.js',
'resources/assets/template/system/js/waves.min.js',
'resources/assets/template/system/js/jquery.sparkline.min.js',
'resources/assets/template/system/js/morris.min.js',
'resources/assets/template/system/js/raphael.min.js',
'resources/assets/template/system/js/app.js',
// Data Tables
'resources/assets/template/system/js/jquery.dataTables.min.js',
'resources/assets/template/system/js/dataTables.bootstrap4.min.js',
'resources/assets/template/system/js/dataTables.responsive.min.js',
'resources/assets/template/system/js/responsive.bootstrap4.min.js',
// Vue
//'resources/assets/template/system/js/vue.js',
// Custom
//'resources/assets/js/vue.js',
'public/js/app.js',
'resources/assets/js/script.js'
], 'public/js/script.min.js');
In Laravel 8 the compilation of assets works in a slightly different way. It will only add vue compilers as a dependency if you declare that you want to compile a vue file in webpack.mix.js.
See what happened to me after doing this: http://prntscr.com/whr7wv
Try changing
.js('resources/assets/js/app.js', 'public/js')
to
.js('resources/assets/js/app.js', 'public/js').vue()
and return to post if successful.
Note: consider not using laravel/ui and manually creating app.js
Application Laravel 8 + Vue 2.6 versions then please change the code in the
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
To
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]).vue();
"you may need an appropriate loader to handle this file type" laravel and vue application error reason >> package.json - "laravel-mix": "^6.0.6" is version 6 or higher.
This is what worked for me (Laravel 8 + Vue 2.6). Change the code in the
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
to
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.vue();
then run
npm update vue-loader
Actually you have not installed ui for vue files in laravel, that's why it does not recognize the template tag in vue file. So run few commands in new terminal:
composer require laravel/ui
php artisan ui vue
npm install && npm run dev
Laravel Mix (4.0.15)
OS Ubuntu 18.04
Steps to Reproduce:
Create a New laravel project (Laravel 5.8, as it uses laravel-mix 4)
Import a component dynamically.
Vue.component('example', () => import('./components/Example.vue'));
I have been using babel dynamic import to import this.
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
You may need .babelrc in the root.
try to put the chunks file into public/js/prod It works file till now.
let mix = require('laravel-mix');
mix.webpackConfig({
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
// 'vue$': 'vue/dist/vue.esm.js',
'#': __dirname + '/resources/assets/js'
},
},
output: {
chunkFilename: 'js/prod/[name].js',
},
});
mix.js('resources/assets/js/app.js', 'js')
.version();
try to extract the plugins, & It causes problem.
mix.js('resources/assets/js/app.js', 'js')
.mix.extract(['vue','jquery', 'popper.js'])
.version();
Now the file app.js and vendor.js goes to js/prod//js/app.js and js/prod//js/vendor.js respectively.
There is no way to put the app.js and vendor.js in /js and chunks in /js/prod. In the previous version which was available.
I am trying to load Bootstrap Vue into a Laravel 5.6 project
The official docs say to modify your webpack.config.js file like:
+ module: {
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
Webpack docs: https://webpack.js.org/guides/asset-management/#loading-css
I don't have a webpack.config.js file so I tried loading the CSS in with Laravel mix
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.styles('node_modules/bootstrap-vue/dist/bootstrap-vue.css', 'public/css');
This give me an error
mix.combine() requires a full output file path as the second argument.
and I'm not convinced it's the right way to do it.
What is the proper way to add bootstrap-vue into a new Laravel 5.6 project?
Import the Bootstrap Vue styles in your app.scss file directly, instead of through mix:
// app.scss
#import "~bootstrap/dist/css/bootstrap.css";
#import "~bootstrap-vue/dist/bootstrap-vue.css";
// webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
Laravel Mix already has the CSS loader configured so you don't need to set up a separate webpack.config.js file.