I'm starting to study VUEJS with Hot Module Replacement (or HMR), and I did a clean install of Laravel v5.8, and following the instructions in the documentation of the Laravel Mix -- https://laravel.com/docs/5.8/mix -- everything looks very simple, however, when running the npm run hot, error is displayed in the browser console.
Apparently it is functional, but I'm not sure if this is expected behavior or if in fact it is an error and that needs some adjustment or parameterization.
But the interesting thing is that if I run npm run dev, no error is displayed.
versions
# php artisan --version
Laravel Framework 5.8.37
# npm -v
6.13.4
# node -v
v12.16.1
# yarn -v
1.21.1
webpack.mix.js
const mix = require('laravel-mix');
mix.options({
hmrOptions: {
host: 'vueapp.lab',
port: '8080'
}
});
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
The reason for that is the app.scss is compiled by default by webpack and it is linked as a resource in mix.config.js.
So removing app.scss compilation from your mix.config.js and import it to your main .vue file (default is App.vue) hmr will do the trick.
In your main vue file add tag style like this:
<style lang="scss">
#import 'path/to/app.scss';
</style>
Related
I just created a new project with Laravel and Sail. I am noticing that some Tailwind css classes are not loading when I run "sail npm run dev". For example, an element that had the utility "py-5" was not loading. So, I decided to try compiling with Laravel Mix again and it finally worked. Same happened when working with Tailwind css column classes. When I run Mix it always shows it compiled successfully.
Any ideas?
The problem probably results because you want to build tailwindcss once in the container but it is not configured / installed there. Locally it seems to work for you already. Therefore, you should go through the following steps.
Make sure that you are already install tailwind and other dependency via: sail npm install.
Check always if you have postcss anbd autoprefixer installed via sail: sail npm install -D tailwindcss#latest postcss#latest autoprefixer#latest.
Then check your webpack.mix.js file. It have to look like:
mix.js("resources/js/app.js", "public/js")
.postCss("resources/css/app.css", "public/css", [
require("tailwindcss"),
]);
Add to your css file this three lines:
#tailwind base;
#tailwind components;
#tailwind utilities;
Then run sail npm run dev.
Tailwind has a config option (tailwind.config.js) in what files it will look for the classes used, make sure all the files you use the tailwind class in are part of the content option.
module.exports = {
...
content: [
'./storage/framework/views/*.php',
'./resources/**/*.blade.php',
'./resources/**/*.js',
],
...
}
I bought a vue template. I want to install it over laravel but I getting a lot of 'Module not found: Error: Can't resolve '#/path';' errors.
I have tried to add a resolve alias to webpack but with no luck.
Any ideeas how should I proceed?
Maybe you fail to put it at the end .vue() in webpack.mix.js file
mix.js('resources/js/app.js', 'public/js').vue()
I want to install Vue 3 into a Laravel 8 project, but I don't want to use something like laravel/ui because it adds Bootstrap and a bunch of other stuff I don't want.
I tried npm i vue#next, and it installs Vue 3, but when I try to do import { createApp } from 'vue'; in app.js, etc., I get a bunch of Webpack errors on npm run dev with Laravel Mix ("laravel-mix": "^6.0.6", in package.json).
This is the webpack.mix.js file I'm using:
const mix = require('laravel-mix');
mix
.extract(['vue'])
.js('resources/js/app.js', 'public/js/')
.vue()
.version();
And I get this error when I run npm run dev:
[webpack-cli] Error: Cannot find module 'webpack/lib/rules/DescriptionDataMatcherRulePlugin'
(Stack trace here.)
Does anyone know how to simply install Vue 3 (without a bunch of additional scaffolding) in Laravel 8? Thank you.
After searching more, I found another SO post with essentially the same question and an answer that worked.
Instead of just doing npm i vue#next, I had to do the following instead:
npm i -D laravel-mix#next vue#next #vue/compiler-sfc vue-loader#next
After that, everything worked as expected.
Here's the SO post I referenced: Install vue 3.0 in laravel
I have started to use Laravel 8 and I have just noticed a error coming from Webpack:
Uncaught Error: Module parse failed: Unexpected token (1:0)
I have read from various posts that this is caused by by webpack and vue. I am not using Vue directly, but I am using Laravel auth UI, which I can assume uses Vue. Fixes for the error from what I have researched suggest adding .vue() to the app.js reference in webpack.mix.js. I have tested this fix:
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/sass/app.scss', 'public/css')
.sourceMaps();
The error persists, despite an update to node to current stable version.
The Laravel app is pretty basic, I am not compiling anything and purely coding locally on MAMP. The webpack documentation around the error is not particularly helpful in this instance. Any direction would be very helpful.
Within a few minutes of posting the question I solved the issue. The webpack.mix.js file update was working, but I had failed to run 'npm run dev' after this update. Anyone facing the same error should ensure they add .vue() to the webpack file and then run 'npm run dev'
I want use sparksuite/simplemde-markdown-editor in Laravel Mix compiling.
I have add this line in app.scss:
#import "node_modules/simplemde/dist/simplemde.min.css";
and this line in app.js:
window.SimpleMDE = require('simplemde');
I want compiling this plugin in my project...
/* in webpack.mix.js file add following lines at the end */
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
After adding Run below command in terminal
npm run dev
(or)
npm run watch