Vuetify: [Documentation] Laravel Mix setup

[Nothing-Works]

Problem to solve

vuetifyjs with laravel-mix is a bit tricky to setup.

Proposed solution

This package does it. Consider adding this to the docs?

I create a package. It does everything for you. npm link

And here is laravel setup

It's also on laravel-mix.com

[ibrahimBeladi]

What would this package provide exactly?

[Nothing-Works]

@ibrahimBeladi so currently, if I want to setup vuetify with laravel using laravel webpack wrapper, I need to do a few things manually. (btw, from the people I know who are laravel developer, most of them use laravel-mix which comes with laravel by default.)

1. install some dependencies manually.
2. add vuetify webpackRules (as laravel-mix does not expose webpack.config.js so it's tricky and verbose to do that)
3. add vuetify-loader plugin if we want tree-shaking (and this is the same reason as NO. 2)
4. also laravel-mix has some predefined rules for sass and scss. In order to make it work with vuetify, I also need to exclude them from the default rules.

And there some forks have this issue from the community, From vuetify (unsolved), From vuetify (vuetify-loader problem), From laravel-mix (the solution is verbose), From stackoverflow. And I can find some more, but I think it's enough.

So, like this issue he wants documentation and currently it's missing. I can kind of understand why it's not on docs.

Because this is what you need to do in order to configure it properly. It's hard to take in and overwhelming and so verbose.

mix.webpackConfig({
    module: {
        rules: [
        {
          test: /\.s(c|a)ss$/,
          use: [
            'vue-style-loader',
            'css-loader',
            {
              loader: 'sass-loader',
              options: {
                implementation: require('sass'),
                fiber: require('fibers'),
              }
            }
          ]
        }
      ]
    },
    plugins: [
        new VuetifyLoaderPlugin()
    ],
}); 

Mix.listen('configReady', webpackConfig => {
  // Exclude vuetify folder from default sass/scss rules
  const sassConfig = webpackConfig.module.rules.find(
    rule =>
      String(rule.test) ===
      String(/\.sass$/)
  );

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

  sassConfig.exclude.push(path.resolve(__dirname, 'node_modules/vuetify'))
  scssConfig.exclude.push(path.resolve(__dirname, 'node_modules/vuetify'))
});

mix.js('app.js', 'dist/js');

Finally, it comes to the package, all you need to do is just

mix.js('resources/js/app.js', 'public/js').vuetify()
//if you use vuetify-loader
mix.js('resources/js/app.js', 'public/js').vuetify('vuetify-loader')

Hopefully, I explained well. maybe I should ask @MajesticPotatoe to review as well.

[MajesticPotatoe]

Closing this as its an extension of #9553 and would be included in that if anything.
I personally have never touched Laravel, so would be looking to the community to handle and maintain the validity of the documentation for it if we decide to include it.

[Nothing-Works]

@MajesticPotatoe I can help with the doc.

[KaelWD]

I always recommend using vue-cli for your frontend, and laravel just as an API.

[Nothing-Works]

@KaelWD not everyone is building SPAs