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.
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 am trying to compile my app.scss file that comes with my new project from Laravel, but I want to install Bootstrap 4. At the time of doing my npm run dev does not install Bootstrap 4, but it still has the Bootstrap that Laravel brings by default.
Any recommendations or documentation for this?
In fact Laravel comes with Bootstrap 4 by default. If you take a look at https://github.com/laravel/laravel/blob/master/package.json file (you should have package.json in your project too) you will see line:
"bootstrap": "^4.0.0"
what means Bootstrap 4 will be installed.
You should run
npm install
to install all packages and by default it will install Bootstrap 4.
This ~ sign mean here node_modules directory so in fact line
#import "~bootstrap/scss/bootstrap"
means
#import "node_modules/bootstrap/scss/bootstrap"
If you look in the Laravel welcome.blade.php file, you can see some CSS and a link tag that imports a Google Font. This is not to be confused with actually importing Bootstrap 4.
Heres the steps to take to implement Bootstrap 4, and all the other cool things that come with Laravel by default. It already seems as though you've run npm run watch so I'm going to assume you've run that command.
Simple Steps
Add a link tag to your head element:
<link rel="stylesheet" href="css/app.css">
Add the following at the bottom of your body element:
<script src="js/app.js" charset="utf-8"></script>
That should do it for you. But please make sure you've compiled the SCSS files and Javascript files using the npm run watch command or else it won't work!
Cheers!
I've been trying to set up a project in Laravel 5.7 and one of the requirements is that it need to have MDBootstrap and Vue.js. I tried following the official guide for installing MDB Vue as a dependency using
npm install --save mdbvue
but now according to the guide, now I need to add 2 imports
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbvue/build/css/mdb.css';
before importing the app.vue file but I'm not sure how to do this in the laravel (5.7) environment.
First, I can't find the location of the URLs of the imports above. And second, where am I suppose to place these imports?
If anyone has done this setup before, would appreciate any guidance.
Thanks
After digging into the errors this is the solution I found.
The import are already done for you so that step can be skipped the missing step was to do npm install --save-dev babel-preset-stage-2 with this everything worked fine for me
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.
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.