I use Laravel with Vuejs, and I would like to know which assets I need to import on my components.
Usually with only Laravel, I import the ones coming from the public folder (webpack before).
But here with VueJS I have to import those from the resources folder (not yet switched to webpack), or the same as for Laravel, I take those from the public folder?
PS: When I npm run watch, it's running me in a loop, with the assets coming from the public folder.
Thank you in advance
you should import Public assets.
in View:
<head>
<link rel="stylesheet" href="{{mix('css/app.css')}}">
</head>
<body>
<div id="app">
<vue>
</vue>
</div>
<script src="{{mix('js/app.js')}}"></script>
</body>
</html>
Since you're using VueJS i'll recommend to use mix() instead of assets() since mix will help you to don't clear cache to get new update on your site while it's online.
Related
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.
hello Laravel developers!
I am stuck with Laravel assets URLs.
<link href="/css/app.css" rel="stylesheet">
this link works fine on localhost.
But why i need to add "public" when i upload it to server like
<link href="/public/css/app.css" rel="stylesheet">
I moved app/public/index.php to app/index.php and make changes in server.php and index.php accordingly. Rest is the working fine. issue is only with assets urls.
Similarly, the class
.edu-home-hero-area {
background: url(/assets/images/curve.webp) !important;
}
works fine on localhost but when i upload it, it does not work i need to change it to
.edu-home-hero-area {
background: url(/public/assets/images/curve.webp) !important;
}
please have a look
https://pdaofficial.com/
any help would be appreciated
I'm not sure if i understand your question completely but you should not be moving public folder files some where else. why not reference your css or js assets using asset function. It will directly point to public folder and look for build.css inside css folder.
<link type="text/css" rel="stylesheet" href="{{ asset('css/build.css') }}">
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>
I am working in Laravel 5.4, and Vue components are not showing/updating.
I start a new project and create a route /chat in web.php
This is chat.blade.php
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/app.css">
</head>
<body>
<div id="app">
<example></example>
<chat></chat>
</div>
<script type="text/javascript">
window.Laravel = { csrfToken: '{{ csrf_token() }}' };
</script>
<script src="js/app.js"></script>
</body>
</html>
This is app.js
require('./bootstrap');
Vue.component('example', require('./components/Example.vue'));
Vue.component('chat', require('./components/Chat.vue'));
const app = new Vue({
el: '#app'
});
Example and Chat components are some basic templates, I am not passing any data, just plain text.
Chat.vue
<template lang="html">
<div id="content">
<h1>Messages</h1>
<p>Message text</p>
<small>Hiii</small>
</div>
</template>
<script>
export default {
}
</script>
When I run php artisan for the first time, everything works. I try to edit some text in Chat.vue, like change 'Hiiii' to Hello, when I reload the page it won't change, it just stays the same. I tried restarting the pc, running php artisan again, anything I could think of.
I tried putting some Vue code directly in chat.blade.php, and than it works. It looks like it is not detecting changes in app.js and components.
FYI, I even deleted the Example.vue component. It still appeared on the page.
The best way to solve this problem is to update npm because it will update all the packages and install missing packages, as a result you will have laravel mix compiling your assets; right now you are not able to do so.
npm update
For some people an easier solution can work which is to run the watch-pol command
npm run watch-poll
Have you tried to clear browser cache? This should solve the problem.
everyone I just got the answer and I want to share this with everyone.
Problem:- I am learning Vue js and I need to delete browser history every day to see changes I have made in the editor.so I search for that and not found a valuable answer for this. but as now I got the solution so I decided to share this solution with everyone.
all you need to do is
1)Go to developer tools.
2)Click on the Network tab
3)Click disable cache (Look at the highlighted portion in the image below)
4)Refresh your page again!
Sometime copying code from internet we add some unwanted line.
Just check this line from App/Config/app .
Make sure it is in Development mode.
'env' => env('APP_ENV', 'development'),
copy this code in app.blade.php :
const app = new Vue({
el: '#app'
});
I recently installed Laravel 5.2 and i´ve been experiencing some problems loading css and js files from the project public folder.
I have all my views on the resources folder and my asset files on the public folder, i tried installing html collective but is not working.
Could someone please help me link the css and js files, so they load.
This is my view:
<link href="assets/css/style.css" rel="stylesheet">
<link rel="stylesheet" href="/css/app.css" />
You can use the asset helper:
$url = asset('img/photo.jpg');
Cf docs: https://laravel.com/docs/5.2/helpers#method-asset