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.
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.
Related
What is the workflow of installing and using any js/css library using npm in laravel 8. What steps should I follow?
For an example let's say I want to install fontawesome using npm and use it in my laravel project. What I know is, once I run the npm install --save #fortawesome/fontawesome-free command it creates a folder for that inside node_modules.
I don't know what should I do after npm install --save #fortawesome/fontawesome-free.
How can I get to know what to do inside resources/css/app.css and webpack.mix.js and what next for any js or css library?
You can use laravel mix, based on my experience the general step to use any css / js package from npm to laravel mix is :
npm install.
import the css needed by the library to resources/sass/app.scss
require js script needed by the library to resource/js/bootstrap.js
npm run development or npm run production to rebuild the app.css and bootstrap.js.
For fontawesome you can read further in this tutorial:
https://dev.to/dendihandian/adding-font-awesome-to-laravel-the-laravel-mix-way-4ndj
I try to add vuetify in laravel and make web admin. but my app.js file is over 6mb 7mb.
Using laravel 5.8 and vuetify
how can to reduce file size?
Be sure you are using minified version of vuetify.
run following command
npm install vuetify vuetify-loader stylus stylus-loader style-loader css-loader --save
Follow the reference here: https://medium.com/js-dojo/how-to-reduce-your-vue-js-bundle-size-with-webpack-3145bf5019b7
Use A-la-carte to only import modules you really need.
I want to use autocomplete in Laravel Mix. The tutorial I saw was using vue-cli and it's working. It is using tailwind, but when I implement it in Laravel Mix using npm install, it does not work. I used a tutorial to install Tailwind in Laravel Mix but I can not find tailwind.js under resources/js. If I want to write a manual how I write those file link tutorial below.
https://sandulat.com/blog/installing-tailwind-into-laravel/
Tailwind.js will not be generated in resources/js. When you run
npx tailwind init
or
./node_modules/.bin/tailwind init
the tailwind.js will be placed in the directory your terminal is currently in. Your webpack.mix.js would look something like this:
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.options({
processCssUrls: false,
postCss: [tailwindcss('./tailwind.js')],
});
Note the processCssUrls: false, this IS required for mix to compile tailwind.
You could also install a simple npm package:
Laravel Mix Tailwind
I use sass code in nuxt components simply by adding lang="scss" in the style tags. When I add this attribute to the style tag in a layout file (layouts folder) the style tag isn't processed any more and the following css (scss) code ignored.
Can anybody explain what's happening and how to fix this issue?
You have to install node-sass and sass-loader in order to use pre-processor, run this terminal command in the project folder
npm install sass-loader node-sass --save-dev
And take a look this link to enable other pre-processor in Vue, Pre-Processors - vue-loader
Problem solved: After having re-started the dev server (npm run dev) nuxt compiled scss code correctly. The issue seems to be limited to the live browser update in dev mode.
where does nativescript look for modules as I read in http://www.bennadel.com/blog/2169-where-does-node-js-and-require-look-for-modules.htm the order for nodejs is like this:
(I don't have problem with relative paths,the problem is when no file path is used)
1-First, Node.js looks to see if the given module is a core module then in node_modules in this order:
for example for var utils = require( "utils" ); it like this :
./node_modules/utils.js
./node_modules/utils/index.js
./node_modules/utils/package.json
what about in nativescript what is the order of locations it looks for modues?
Usually, you would just npm to manage all your dependencies from the project root. NativeScript uses commonJS, so npm is used to distribute plugins. You can find out more here.
There are a number of slightly different approaches:
NPM Modules:
So to add the Nativescript OAuth you would run npm install knock-knock-jokes --save in the project root and then in the app var knockknock = require('knock-knock-jokes') would work.
NativeScript Plugins:
For Nativescript specific plugins, you can run tns plugin add nativescript-oauth for most nativescript applications, this will keep all dependencies recorded in your package.json file also.
With TypeScript
Also, you might like to use TypeScript to enable IntelliSense etc. In which case the syntax would be more like import * as tnsOAuthModule from 'nativescript-oauth'; and if the module doesn't have a definition file shipped with it on npm, then you might like to use the typings which will manage your typescript definitions.