I installed laravel 5.6 and used a template i purchased from themeforest. I have all the css and js files in version1 folder (public/version1/app.min.css and public/version1/js/app.min.js). Then i modified the template as per blade rules and the website renders good. I want to use a javascript framework for frontend with this template for creating SPA applications so that i can view other pages without refreshing. I checked react, loved it however i see vue is good too with laravel.
I ran php artisan preset vue and npm install && npm run dev
Are there any other steps im missing? I have searched alot and couldn't find a single resource on how to use a template (purchased) with vue and laravel.
Any links to get me started would also help me. I have the links for creating crud with vue.
Followed this link and made the following changes
I placed all the css files in resources/assets/css folder and all the js files in the public/js folder.
Updated the webpack.mix.js
mix.js('resources/assets/js/app.js', 'public/js')
mix.styles([
'resources/assets/css/app.min.css',
'resources/assets/css/primary.css',
'resources/assets/css/style.css'
], 'public/css/app.css');
Now everything is compiled into public/css/app.css and the theme is rendered without any issues.
Related
I deployed Laravel with Tailwind css on Heroku and my vanilla CSS for the home page is working fine but when I add /login to the address to move to laravel breeze login page, Tailwind css isn't loading.
This is the link for the homepage: https://zarafah.herokuapp.com/
And this is the login page which tailwind is not rendering: https://zarafah.herokuapp.com/login
When i checked the network tap on google chrome it shows like this:
enter image description here
This is driving me crazy because on my local serve everything works perfectly.
I ran npm run prod and npm run production and made sure of everything but still I can't find out what is the issue.
I'm using Laravel 8 with Tailwind css v3.
you have a http link for the css
change it to https
https://zarafah.herokuapp.com/css/app.css
and it should work
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
My Laravel installation is in a subfolder/subapp. I then installed Backpack 4.1. Url of backpack login is something like http://example.test/laravel/admin/login.
My Laravel is running fine as a second app in the subfolder (I used nginx to manage the main app and the laravel app as second app in sub-folder).
But the backpack page is not loading the CSS and JS files as /public/ of laravel is missing in the path.
I tried to add ASSET_URL=public in .env of laravel. But did not work.
Need help on this.
Thank you.
I have integrated real chat system develop from VUE JS in my project developed in Laravel framework.
All Vue components need to be compiled down to JavaScript locally. Laravel does that automatically out of the box and you end up with a single static asset app.js. You need to use npm -command to do that see Laravel documentation for details. Then you just deploy single static app.js with you code.
I am using laravel 5.3 with angular 2 for my project and using webpack for compilation of the assets including js and css.
I am trying to use same font awesome and bootstrap for the client and admin area.
I have the folder structure of laravel with everything inside js directory.
|-public
|-js
|-assets
|-fontawesome-webfonts.woff
|-image1.png
|-vendor.bundle.js
|-polyfill.bundle.js
For Angular 2 routes we need to add the base href to the main template which i have also added.
<base href="/">
Admin url is localhost:8000/admin
and user url is localhost:8000
I have included the bundles like
{!! Html::script('js/vendor.bundle.js') !!}
and the vendor have imported the less files as:
vendor.bundle.js
import 'admin-lte/build/less/AdminLTE.less';
import 'font-awesome/less/font-awesome.less';
The main issue is that when i use the same vendor.bundle.js to both user and admin pages the user page works fine since it loads the fonts from js/assets/fontawesome-webfonts.woff but when i load the admin page it couldn't load the fonts as it searches from admin/js/assets/fontawesome-webfonts.woff which is not the correct directory.
How could i make Angular search into js/assets/fontawesome-webfonts.woff for both url?
The issue is displayed in the image too.
I just figured it out by myself using the url-loader webpack plugin.
You should leave the base href to as it is and configure the assets.
I just needed to add a new test only for the fonts
{
test: /\.(svg|woff|woff2|ttf|eot)$/,
loader: 'url-loader?limit=10000&name=assets/[hash].[ext]&publicPath=/js/'
}
You need to specify the publicPath and add the other directories to name.
That's all. Hope it will save someone's precious time.
Note: don't forget the '/' at the front of the public path