Material Components with Laravel

Question

As per the documentation of Google Material Components, I am unable to find a way to integrate it with Laravel. The steps mentioned there to configure the webpack are mentioned however I am unable to find a suitable way to put it in Laravel Mix.

So the question is how to integrate google material components(not the lite version) into Laravel project.

Answer 1

With Laravel Mix, integration of Material Components is easier than with plain Webpack config.

First, install default Laravel project's Node dependencies, and make sure that you have node-sass and sass-loader installed, and, of course, add material-components-web:

npm i
npm i node-sass sass-loader -D
npm i material-components-web -S

Then, assuming that you have an app.js in resources/assets/scripts folder and app.scss in resources/assets/sass folder, your webpack.mix.js should look something like this:

const mix = require('laravel-mix')

mix
.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css', {
  includePaths: ['node_modules']
})

Then, in app.js and app.scss you import ES2015 and Sass respectively the same way as described in MDC Web documentation.

Here I described how to install Vanilla JS project. If you're interested in Vue.js, then you can add Vue.js wrapper for MDC-Web (Vue MDC Adapter):

npm i vue-mdc-adapter -S

Then, use it as described in Vue MDC Adapter documentation.