I don't know Vue.js. I have just cloned one project from GitHub and now I want to edit come Vue template code. After updating the class of p tag, I am still getting old class when I refresh the page.
I think I need to re-generate or re-compile like something but don't know how as it's my first time with Vue.js.
Please help me
You need to install node modules and their dependencies from package.json stored in root directory of your laravel project:
Run
npm install
And then after node modules are installed:
npm run dev
To compile the assets.
See more about frontend and vue in laravel here:
https://laravel.com/docs/5.7/frontend
Related
Vite didnt load asset properly on my laravel 9 project. i've been facing this problem when using laravel 9 with Vite. first when i install laravel breeze i though the breeze is the problem, but now i try using jetstream it has the same issue. please see the screenshot below. can someone help me ?
I think you need to run the Vite server using npm run dev. That will also take care of hot reloading
I run "npm run dev" command by mistake. And website is started using dev url. I searched for a solution but never found. I found solution myself. You need to delete "hot" file in your public folder on your hosting.
In you hosting go to "public" path and delete named "hot" file.
im workin with LARAVEL and vue. i'have launched a project on digital ocean using ubuntun and nginx. Since the launch i'have add more features. Today i pulled those change on the production server, but they do not appear on the browser..
Using nano i'have chechked all the files, and yes, the files have changed but they do not reflect on the browser.
I'have used
npm run dev, npm run watch
php artisan config:cache, php artisan cache:clear but yet it doesnt seems to work
any idea ?
Before you push your updated Vue files you need to run npm run prod to prepare your assets as production ready.
Laravel uses mix to compile assets: https://laravel.com/docs/8.x/mix
Now you have your freshly compiled assets in your public/ directory, therefore you can pull to digitalocean machine. But now the browser might still be using cached asset (if name stays same, browser doesn't fetch same asset again for a while)
So, Mix Versioning comes to help: https://laravel.com/docs/8.x/mix#versioning-and-cache-busting
In your webmack.mix.js file you need to add .version() at the end of mix piping. End result will be something like this;
mix.js('resources/js/app.js', 'public/js')
.version();
As you want to use versioning, now you need to resolve asset urls with mix(...) instead of asset(...) in your blade files;
<script src="{{ mix('/js/app.js') }}"></script>
Now whenever you compile your assets, mix will assign them new version numbers and will at them to end of assets' urls in your blade. Browser will understand there is a update in file (because of a different version number) and will fetch updated asset.
Did you clear your browser's cache?
If you are working with Vue and/or Sass and therefore your files are changing from time to time, I suggest you to use mix() instead of asset() for cache busting. Otherwise all of your users will have to delete their cache (this is obv. not a good approach)
https://laravel.com/docs/8.x/mix#versioning-and-cache-busting
I'm currently using Laravel 5.6. I have integrated bootstrap and would like to use the package React Bootstrap. For my component building.
Currently the components do not render properly. I believe it's because it's conflicting with the Laravel bootstrap/
In app.js I've disabled:
// require('./bootstrap');
The component still does not appear correctly.
I also import this in my component:
import 'bootstrap/dist/css/bootstrap.min.css';
This causes my layout to change drastically.
Is there any specific way I can up my laravel project and be able to take advantage of the React Bootstrap components?
you should run npm install && npm run dev commands and then it will work properly
this is the link from documentation https://laravel.com/docs/7.x/frontend
you can try adding bootstrap cdn on your blade file
I have an Ubuntu VPS with Laravel v5.6 served with nginx, and I am trying to use React on the front-end. I don't know if this is possible what I want to do is:
use node and npm to build my front-end app locally,
generate the CSS and JS files and upload those already generated files to my VPS server,
the output should not change since as far as I know npm generates at JS and CSS files with your whole code in it
Thanks for the help, and if there is any suggestion for a different approach just let me know.
You should start to use a frontend bundling solution like webpack or parcel, they do exactly the same
If you generate your app with create-react-app it comes with webpack built-in
i have a laravel 5 & vuejs application on my local server (vue js that comes with laravel). And now i want to deploy this application on real server like "000webhost.com" to test.
Laravel works fine, but Vue doesn't, I get some unexpected behaviors like blank page when assigning the id="app" to the parent element, and when i remove the id="app" the page appears and works correctly but Vue doesn't.
This is my project structure:
project structure
When uploading,, I upload the whole project without "node_modules" directory (that comes with npm install) Could this be the reason ?
You need to run npm run dev or npm run prod to create your resource bundle with the javascript and other assets. You technically don't need node_modules, so long as you build the projects on another machine and upload all that to your hosted server.