Laravel common mix setup for vue.js + pug.js

webpack.mix.js

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

mix.webpackConfig({
	module: {
		rules: [
			{
				test: /\.pug$/,
				loader: 'pug-plain-loader'
			}
		]
	}
});

mix.browserSync('http://localhost:8000/');
mix.js('resources/js/app.js', 'public/js')
    .vue()
    // .sass('resources/sass/app.scss', 'public/css')
    .postCss('resources/css/app.css', 'public/css', [
        require('tailwindcss'),
    ]);

npm install -D pug pug-plain-loader

tailwind.config.js

module.exports = {
    purge: [
        './storage/framework/views/*.php',
        './resources/**/*.blade.php',
        './resources/**/*.js',
        './resources/**/*.vue',
    ],
    darkMode: false, // or 'media' or 'class'
    theme: {
        extend: {
            colors: {
                accent: '#26b6d9',
                secondary: '#066AE0',
                darkKnight: '#3C5572',
            }
        },
        fontFamily: {
            'sans': ['Nunito', 'Arial', 'sans-serif'],
        },
    },
    variants: {
        extend: {},
    },
    plugins: [],
    separator: '_',
}

tsconfig.js

module.exports = {
    resolve: {
      alias: {
        '@': 'src'
      }
    }
  }

stylelint.config.js

module.exports = {
    extends: ["stylelint-config-standard"],
    rules: {
      "at-rule-no-unknown": [
        true,
        {
          ignoreAtRules: [
            "tailwind",
            "apply",
            "variants",
            "responsive",
            "screen",
          ],
        },
      ],
      "declaration-block-trailing-semicolon": null,
      "no-descending-specificity": null,
    },
  };
  

install wsl plugin -__-