Compatibility With Laravel Mix? #49

codeitlikemiley · 2019-04-26T01:39:08Z

Hi ived tried many times, using it with laravel mix, but i keep getting error...
I understand this one is build to be used for vue-cli 3, yeah it works with nuxt also
but in case of laravel mix, how can use it on it, hope someone can help me with it thanks

lukadriel7 · 2019-05-22T17:27:20Z

Hello, This implementation seems to work but weirdly I cannot read icon fonts with it (mdi).
I post here so that someone may improve on it.

const mix = require('laravel-mix');

mix.extend('vuetify', new class {
    webpackRules(){
        return [
            {
                type: 'javascript/auto',
                loader: 'vuetify-loader'
            }
        ]
    }
})

mix.vuetify().js('resources/js/app.js', 'public/js').sass('resources/sass/app.scss', 'public/css')

codeitlikemiley · 2019-05-26T03:27:17Z

let me check on it, and see how i can add the mdi icon fonts thanks for the share

likeadeckofcards · 2019-06-17T17:59:29Z

@codeitlikemiley Did you get this working?

@lukadriel7 I get an issue app.js Uncaught ReferenceError: component is not defined

codeitlikemiley · 2019-06-17T18:20:17Z

I made a package
https://packagist.org/packages/codeitlikemiley/vuetified-laravel-preset
This work only because Dynamic components comes into play...
i dont even need to do The OP , cause it wont really work and faulty...
if u installed my package be sure to try it on fresh laravel install cause this is a preset.
also if u are using windows, make sure u use bash to run the command and have python installed inside your bash env.

KaelWD · 2019-08-07T03:51:47Z

See laravel-mix/laravel-mix#2173 and my comment on discord.

If you want my personal opinion: use vue-cli instead. It's better supported, easier to use, and has sane defaults.

leninsheikh · 2019-08-20T16:29:31Z

use vuetify-loader in laravel mix like this

webpack.config.js

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
    plugins: [
        new VuetifyLoaderPlugin(),
    ]
};

webpack.mix.config

const mix = require('laravel-mix');
const webpack = require('./webpack.config');

mix.js('resources/frontend/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig(Object.assign(webpack));

BraunLukas · 2019-08-23T10:32:46Z

@leninsheikh

trying to use your configuration, but it still give me some problems

Error: [VuetifyLoaderPlugin Error] No matching rule for vue-loader found.

when adding rules the js compiles, but im gettin JS errors on site loading
[Vue warn]: Unknown custom element: <v-layout> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

nekosaur · 2019-08-23T11:29:33Z

You can compare your setup with this example project https://github.com/nekosaur/laravel-vuetify

pintoflager · 2019-09-05T19:11:35Z

@nekosaur 's example project is a working example as long as you don't update sass-loader.
To be honest I'm just learning here and not 100% sure what's going on but if you do:

npm remove sass-loader
npm install sass-loader
npm run rev
Result is errors in vuetify main.scss file and fail in compile.

After npm install sass-loader@^7.1.0 -D I get following version installed in my package.json "sass-loader": "^7.3.1", and everything works fine again.

beerwin · 2019-10-26T08:22:08Z

use vuetify-loader in laravel mix like this

webpack.config.js

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
    plugins: [
        new VuetifyLoaderPlugin(),
    ]
};

webpack.mix.config

const mix = require('laravel-mix');
const webpack = require('./webpack.config');

mix.js('resources/frontend/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig(Object.assign(webpack));

This should be put in the documentation. It just works.

pintoflager · 2019-11-23T07:19:42Z

No need for separate webpack.config.js
Laravel mix seem to have .webpackConfig where you can add vuetifyloader

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
        plugins: [
            new VuetifyLoaderPlugin({
                options: {}
            }),
        ]
    })
    .version()
    .sourceMaps()

tomcoonen · 2019-11-25T10:27:51Z

I can't get the VuetifyLoaderPlugin to work, keep getting this error i.c.m. Laravel Mix:
Error: [VuetifyLoaderPlugin Error] No matching rule for vue-loader found. Make sure there is at least one root-level rule that uses vue-loader.

I've tried the mix.extend but that gives me the same issues.

Vue CLI 3 / Laravel Mix 5.

Any ideas?

DRoet · 2019-11-25T10:43:47Z

@tomcoonen could you provide a small repro?

cli 4.0.5 + loader 1.4.2 works fine for me, so it could be related to your specific setup

tomcoonen · 2019-11-25T11:46:38Z

@DRoet I'm going to see if I can reproduce it in some way

aubreychiduku · 2019-11-25T15:21:31Z

I can't get the VuetifyLoaderPlugin to work, keep getting this error i.c.m. Laravel Mix:
Error: [VuetifyLoaderPlugin Error] No matching rule for vue-loader found. Make sure there is at least one root-level rule that uses vue-loader.

I've tried the mix.extend but that gives me the same issues.

Vue CLI 3 / Laravel Mix 5.

Any ideas?

I'm having the same issue without Vue CLI but using Laravel Mix 5

where vuetify-loader 1.4.2 is included as a plugin using

.webpackConfig({ plugins: [new VuetifyLoaderPlugin()] })

KaelWD · 2019-11-25T15:42:23Z

What version of vue-loader do you have?

fraganzas · 2019-11-25T18:02:11Z

Had the same issue when I updated to 1.4.2.
Running npm install vuetify-loader@1.4.1 fixed it for me.

diorray · 2019-11-29T14:14:53Z

After several hours of trying, i've made it working seamlessly.

First, don't use 1.4.2, install 1.4.1 by npm install vuetify-loader@1.4.1
Then, here is working solution

const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

mix.options({
		extractVueStyles: true,
	}).webpackConfig({
		resolve: {
			extensions: ['.js', '.json', '.vue', '.css', '.scss', '.sass'],
			alias: {
				'~': path.join(__dirname, './resources/js'),
				'$comp': path.join(__dirname, './resources/js/components')
			}
		},
		module: {
			rules: [
				{
					test: /\.js$/,
					loader: 'babel-loader',
					exclude: /node_modules\/(?!(vuetify)\/)/,
				},
				{
					test: /\.(sc|c|a)ss$/,
					use: [
						'vue-style-loader',
						'css-loader',
						{
							loader: 'sass-loader',
							options: {
								implementation: require('sass'),
								sassOptions: {
									fiber: require('fibers'),
									indentedSyntax: true
								},
							},
						},
					]
				},
			]
		},
		plugins: [
			new VuetifyLoaderPlugin()
		]
	}).js('resources/js/app.js', 'public/js/app.js')
	.css('resources/css/app.css', 'public/css/');

Notes

You don't need to include vue-loader module or vue-loader rule as its already included in Laravel Mix, in fact if you try to do so, you will get these error below as you added module for the second time:

for including vue-loader module:

Error: [VueLoaderPlugin Error] No matching use for vue-loader is found.
Make sure the rule matching .vue files include vue-loader in its use.

for including vue-loader rule:
blank page + [Vue warn]: Failed to mount component: template or render function not defined. in browser console

goldcoders · 2019-12-02T05:49:20Z

@diorray can you share you package.json file also i didnt manage to it work on my end
must be about the dependencies has mismatch packages

diorray · 2019-12-02T14:09:50Z

@diorray can you share you package.json file also i didnt manage to it work on my end
must be about the dependencies has mismatch packages

@goldcoders run this command:
npm install mini-css-extract-plugin fibers deepmerge css-loader resolve-url-loader sass sass-loader style-loader stylus stylus-loader vue vue-loader@^15.7.2 vue-template-compiler vuetify-loader@1.4.1 vuetify @babel/preset-env babel-plugin-transform-object-rest-spread babel-polyfill-D

If still doesnt work, tell us the errors you're getting

goldcoders · 2019-12-03T03:13:18Z

im getting this error

ERROR in ./node_modules/vuetify/src/components/VDataTable/VDataTableHeader.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src??ref--7-3!./node_modules/sass-loader/dist/cjs.js??ref--7-4!./node_modules/vuetify/src/components/VDataTable/VDataTableHeader.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
 - options has an unknown property 'indentedSyntax'. These properties are valid:
   object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/home/uriah/Sites/xxx/node_modules/sass-loader/node_modules/schema-utils/dist/validate.js:85:11)
    at Object.loader (/home/uriah/Sites/xxx/node_modules/sass-loader/dist/index.js:36:28)

goldcoders · 2019-12-03T03:14:30Z

Can you share a repo that has a minimimal install of vuetify working with vuetify loader
that has all .babelrc webpack.mix.js app.js etc.
i find it hard to make it work on my end using your suggestions

diorray · 2019-12-03T09:47:05Z

Can you share a repo that has a minimimal install of vuetify working with vuetify loader
that has all .babelrc webpack.mix.js app.js etc.
i find it hard to make it work on my end using your suggestions

@goldcoders you should remove node-sass, run this commmand and build again: npm uninstall node-sass && npm install

SyncroIT · 2020-03-11T13:00:18Z

No need for separate webpack.config.js
Laravel mix seem to have .webpackConfig where you can add vuetifyloader

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
        plugins: [
            new VuetifyLoaderPlugin({
                options: {}
            }),
        ]
    })
    .version()
    .sourceMaps()

I tried to do so but I always get this error when using vuetify-loader, it doesn't matter which version I use (I even tried the 1.4.1 instead of the 1.4.3).

UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'length' of undefined

PS: I'm using Laravel 5.6

filipembcruz · 2021-02-17T18:20:45Z

After many issues, I solve this on Laravel 8.

// Dependencies
{
        "laravel-mix": "^6.0.6",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.10",
        "vuetify": "^2.4.3",
        "vuetify-loader": "^1.7.1",
}

// webpack.mix.js
const mix = require('laravel-mix');
const webpack = require('./webpack.config');
Mix.listen('configReady', webpackConfig => {
    // scss
    const scssRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.scss$/)
    );
    scssRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.prependData = '@import "./resources/sass/_variables.scss";'
    })

    // sass
    const sassRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.sass$/)
    );

    sassRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.prependData = '@import "./resources/sass/_variables.scss"'
    })
})
mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/gift.js', 'public/js')
    .vue()
    .sass('resources/sass/pages/home.scss', 'public/css')
    .sass('resources/sass/pages/gift.scss', 'public/css')
    .webpackConfig(Object.assign(webpack))
    .copyDirectory('resources/images/', 'public/images');

if (mix.inProduction()) {
    mix.version();
};

// webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
    plugins: [
        new VuetifyLoaderPlugin(),
    ]
};

JeffreyHosler · 2021-02-20T15:50:42Z

@filipembcruz

I been working on this for like a month and kept telling myself i would come back later and fix it. This did the trick. thank you sir.

JeffreyHosler · 2021-02-20T19:52:28Z

actually @filipembcruz, do you happen to have a git i can look at? I am having issues with vuetify overwriting my custom css. Maybe its being loaded first or something.

It is loading my variables which is nice. And my css is showing up in in console.log, just being over ridden by vuetify.

// webpack.mix.js

Mix.listen('configReady', webpackConfig => {
    // scss
    const scssRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.scss$/)
	);
    scssRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.additionalData = '@import "@/styles/variables.scss";'
    })

    // sass
    const sassRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.sass$/)
    );

    sassRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.additionalData = '@import "@/styles/variables.scss"'
    })
})

mix.js('Resources/platform/src/main.js', path.resolve(__dirname, '../../public/assets/platform/js') )
	.vue()
	.webpackConfig({
		resolve: {
			alias: {
				'@webinar': path.resolve(__dirname, 'Resources'),
				'@assets': path.resolve(__dirname, 'Resources/platform/src/assets'),
				'@': path.resolve(__dirname, 'Resources/platform/src/'),
			}
		},
		output: {
			filename: '[name].js',
			path: path.resolve(__dirname, '../../public'),
			chunkFilename: mix.inProduction() ? 'assets/webinars/platform/js/[name].[chunkhash].js' : 'assets/webinars/platform/js/[name].js',
		},
		plugins: [
			new VuetifyLoaderPlugin(),
			new MomentLocalesPlugin({
				localesToKeep: ['el'],
			}),
		],
	})
	.sass('Resources/platform/src/styles/main.scss', path.resolve(__dirname, '../../public/assets/platform/css') )

// main.scss
@import 'variables';
@import 'mixins/breakpoints';
@import 'mixins/functions';
@import 'mixins/helpers';
@import 'mixins/mixins';
@import 'custom';

@import "components/header";
@import "components/form-ellements";
@import "components/login-form";
@import "components/sidebar";
@import "components/video-block";
@import "components/message-block";
@import "components/chat-block";
@import "components/faq-block";
@import "components/user-profile-box";
@import "components/empty-box";
@import "components/mobile-nav";
@import "components/overview-box";
@import "components/internet-users-popup";
@import "components/admin-panel";

.v-application {
  overflow: hidden;
  background: $primary-link-hover;
}

.header, .content{
  min-height: 100%;
  position: relative;
}

For example, this scss is howing up, but is getting over ridden by vuetifies scss

// components/login-form.scss
.login-form {
  .v-label {
    margin-bottom: 0;
    color: $primary-text-color;
    font-size: 14px;
    line-height: 1;
  }

  .v-btn__content {
    font-size: 15px;
    font-weight: 500;
  }

  a {
    &:hover {
      color:$primary-text-color;
    }
  }
}

JeffreyHosler · 2021-02-23T19:30:40Z

I fixed my issue by appending my custom css. like so

webpack.mix.js

Mix.listen('configReady', webpackConfig => {
    // scss
    const scssRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.scss$/)
    );
    scssRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.additionalData = '@import "@/styles/main.scss";'
    })

    // sass
    const sassRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.sass$/)
    );

    sassRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.additionalData = '@import "@/styles/main.scss"'
    })
})

// main.scss
@import 'variables';

.myCss {
}

This comment has been minimized.

Sign in to view

KaelWD mentioned this issue Aug 5, 2019

[Bug Report] Breaks when used in laravel mix compilation with webpack configuration #73

Closed

This comment has been minimized.

Sign in to view

tomcoonen mentioned this issue Nov 25, 2019

fix: make vuetify-loader compatible with @vue/cli 4.1.0-beta.0 #97

Merged

This comment has been minimized.

Sign in to view

KaelWD closed this as completed in 9fb6ec3 Dec 4, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Compatibility With Laravel Mix? #49

Compatibility With Laravel Mix? #49

codeitlikemiley commented Apr 26, 2019

lukadriel7 commented May 22, 2019

codeitlikemiley commented May 26, 2019

likeadeckofcards commented Jun 17, 2019

codeitlikemiley commented Jun 17, 2019

This comment has been minimized.

This comment has been minimized.

KaelWD commented Aug 7, 2019 •

edited

leninsheikh commented Aug 20, 2019

BraunLukas commented Aug 23, 2019

nekosaur commented Aug 23, 2019

pintoflager commented Sep 5, 2019

beerwin commented Oct 26, 2019

webpack.config.js

webpack.mix.config

pintoflager commented Nov 23, 2019

This comment has been minimized.

tomcoonen commented Nov 25, 2019 •

edited

DRoet commented Nov 25, 2019

tomcoonen commented Nov 25, 2019

aubreychiduku commented Nov 25, 2019

KaelWD commented Nov 25, 2019

This comment has been minimized.

fraganzas commented Nov 25, 2019

diorray commented Nov 29, 2019 •

edited

goldcoders commented Dec 2, 2019

diorray commented Dec 2, 2019 •

edited

goldcoders commented Dec 3, 2019

goldcoders commented Dec 3, 2019

diorray commented Dec 3, 2019

SyncroIT commented Mar 11, 2020 •

edited

filipembcruz commented Feb 17, 2021

JeffreyHosler commented Feb 20, 2021

JeffreyHosler commented Feb 20, 2021

JeffreyHosler commented Feb 23, 2021

Compatibility With Laravel Mix? #49

Compatibility With Laravel Mix? #49

Comments

codeitlikemiley commented Apr 26, 2019

lukadriel7 commented May 22, 2019

codeitlikemiley commented May 26, 2019

likeadeckofcards commented Jun 17, 2019

codeitlikemiley commented Jun 17, 2019

This comment has been minimized.

This comment has been minimized.

KaelWD commented Aug 7, 2019 • edited

leninsheikh commented Aug 20, 2019

webpack.config.js

webpack.mix.config

BraunLukas commented Aug 23, 2019

nekosaur commented Aug 23, 2019

pintoflager commented Sep 5, 2019

beerwin commented Oct 26, 2019

webpack.config.js

webpack.mix.config

pintoflager commented Nov 23, 2019

This comment has been minimized.

tomcoonen commented Nov 25, 2019 • edited

DRoet commented Nov 25, 2019

tomcoonen commented Nov 25, 2019

aubreychiduku commented Nov 25, 2019

KaelWD commented Nov 25, 2019

This comment has been minimized.

fraganzas commented Nov 25, 2019

diorray commented Nov 29, 2019 • edited

Notes

goldcoders commented Dec 2, 2019

diorray commented Dec 2, 2019 • edited

goldcoders commented Dec 3, 2019

goldcoders commented Dec 3, 2019

diorray commented Dec 3, 2019

SyncroIT commented Mar 11, 2020 • edited

filipembcruz commented Feb 17, 2021

JeffreyHosler commented Feb 20, 2021

JeffreyHosler commented Feb 20, 2021

JeffreyHosler commented Feb 23, 2021

KaelWD commented Aug 7, 2019 •

edited

tomcoonen commented Nov 25, 2019 •

edited

diorray commented Nov 29, 2019 •

edited

diorray commented Dec 2, 2019 •

edited

SyncroIT commented Mar 11, 2020 •

edited