I have a helper defined below:
function cdn($file)
{
return env('CDN_URI', '').'/'.ltrim($file, '/');
}
In my blade, I am serving the bundled Vue js file with the helper:
<script type="text/javascript" src="{{ cdn('/dist/js/app.js') }}"></script>
I am having caching issues now so I want to start using versioning. I read in Laravel Mix docs that to imoport the versioned files, put them in the mix() . Would I be able to wrap that around my other helper as follows:
<script type="text/javascript" src="{{ mix(cdn('/dist/js/app.js')) }}"></script>```
To enable versioning, you need to add the following in your webpack.mix.js when you are compiling your assets.
mix.version();
Something along the lines of:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.version();
Then after you add this to your template:
<script src="{{ mix('js/app.js') }}"></script>
Compile your assets with npm run prod, and if you view the source, you will see something like the following where you put your JavaScript.
<script src="/js/app.js?id=476befa31a13c804b084"></script>
Finally, you can add your cdn() helper, make sure to wrap the helper around the mix() function.
<script src="{{ cdn(mix('js/app.js')) }}"></script>
Related
I have a Laravel application where I use the mix function in my blade templates to include my css and js files like this:
<script src="{{ mix('js/app.js') }}"></script>
This works locally but when I deploy the app to the production server, the mix function still inserts the local paths:
<script src="//localhost:8080/js/app.js"></script>
The APP_URL in the .env file is set and I've also cleared the Laravel caches.
Any ideas what could be wrong?
Emoji-Mart https://github.com/missive/emoji-mart
i make js file in resource folder /resources/js/map.js
import 'emoji-mart/css/emoji-mart.css'
import { Picker } from 'emoji-mart'
add in webpack.mix.js
.js('resources/js/map.js', 'public/js')
Use
npm run dev
add include in my blade
<script type="text/javascript" src="{{ asset('/js/map.js') }}"></script>
then try use in blade code from readme
<Picker set='apple' />
<Picker onSelect={this.addEmoji} />
But didnt see nothing
this is my first encounter with laravel mix, can you tell me what i'm doing wrong?
Consider using a emoji package which was built to run inside a Laravel application. You are using a react-based plugin which won't work this way.
I tried lot of ways to fix this problem from stackoverflow, laracast, google but nothing works,
-> I think my vue.js is not loading or working(Im using sublime text, all files showing highlighted or colored text except ExampleCmponent.vue file), npm run watch successfully but vue devtools also not deteceting any vue.
-> I also tried:
<div id="app">
<example-component></example-component>
</div>
Im sharing screenshots with you please help me out if possible:
ExampleComponent.vue
home.blade: i also tried without #id tag->
chrome:vue devtools:
here is app.js:
I tried:
Laravel 5 VueJS not working
https://laracasts.com/discuss/channels/vue/example-component-not-working
https://laravel.com/docs/7.x/frontend
What you have done here is called Fronend-Scaffolding. You still need to Compile Assets.
Open your webpack.mix.js and add your .js & .scss files. Once done, confirm files are in public /js /css folder.
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Then, add below lines in your blade.
// use mix() for cache bursting. Or simply stick with asset()
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<script src="{{ mix('js/app.js') }}"></script>
How I can enable hash for css and js files, compiled by laravel mix?
Example I need do:
<link href="{{ asset('css/app.css') }}?hash=3234234" rel="stylesheet">
For clear cache, when file is changed. How I can do it?
Using versioning with your static asset you have to use mix() it will do the versioning automatically for you.
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
And while mixing use .version() too.
mix.js('resources/assets/js/app.js', 'public/js')
.version();
From the Docs
If you won't know the exact file name. So, you should use Laravel's global mix function within your views to load the appropriately hashed asset. The mix function will automatically determine the current name of the hashed file
I'd like to use a JavaScript function in my blade.php file. I created the xyz.js file with a very simple function
function picture(soemthing){
document.getElementById('idXYZ').src = "example.com";
}
Then I added this file to the webpack.mix.js config:
mix.js(['resources/assets/js/app.js', 'resources/assets/js/xyz.js'], 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
and run: npm run dev. So far so good, npm compiled my script and the picture function was included in the app.js file. Now I'd like to add a form in blade.php and call the picture function on click. I created the following blade.php file:
#extends('layouts.app')
#section('content')
<div class="container">
<form>
Enter url: <input type="text" id="someID">
<input type="button" onclick="picture($('#someID').val())" value="Click"/>
</form>
</div>
<script src="{{ mix('js/app.js') }}"></script>
#endsection
And here I got really lost (btw: I was always the backend guy). On page reload browser displays
[Vue warn]: Error compiling template: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.
And when I click the button I have
Error new:76 Uncaught ReferenceError: xyz is not defined
I understand that the first errors says that the app.js file was not loaded and that's the reason why picture is not found. How should I include app.js or any other compiled by mix JavaScript file? Is it really the tag causing this problem?
Try this I solved me
<script src="{{ asset('js/app.js') }}?time={{ time() }}"></script>
" I think not all browsers support this "
I think you're getting the error because you're placing a new script tag inside of the vue.js application div.
If you're opening your layout file app.blade.php there is a div with id="app" and inside it you're having your content section yield. Side-effect means that you shouldn't load a new script inside a Vue.js template.
The script should be in your layout at the end of the body tag. Also the script tag should look like this:
<script src="{{ asset('js/app.js') }}"></script>
Then your script should be available. But I would have a look at Vue.js and how you're handling click events there. click handler docs