I am making some project with Laravel, Vue2 now.
I deployed my project onto the test server, there .svg files display, but in my local environment they don't display.
I use :src="asset('images/ico_arrow_left1.svg')" in vue component.
My images and svg files are all in root/public/images folder.
For example; I wrote the following code to display svg in vue component.
<a #click="previousDay"><img class="ico_ico_arrow" :src="asset('images/ico_arrow_left1.svg')"></a>
The codes are sampe in test server and local.
show in test server, but not show in local, why?
If you want import a file from public folder you should check the documentation. You should use require when you import dynamic asset. Like this:
<img class="ico_ico_arrow" :src="require('images/ico_arrow_left1.svg')"/>
The asset() helper function is only for the Laravel Blade template. you can't use it inside of a regular Vue application.
In Vue, you should use require()in order to solve this problem.
Related
I looking for solution which can describe integration of swiper in Laravel. I searched on internet but didn't find any proper way to integrate swiperjs carousel in Laravel.
I use npm install swiper but don't know how to call it?
Use CDN script is best option than to install locally sipperJs vie npm
use CDN scripts of swipperJs
put CDN script in tag in layout.blade or index.blade in view directory
keep JS in public/js
keep CSS in public/css
add swiperJS layout in index.blade
slider will run....
if not run then maybe if any js script comficting it.
ps: no need to use other solutions like
var Swiper = require('swiper');
import Swiper from 'swiper';
I have seen some tutorial on how to include Vue.js into Laravel projects.
As far as I can see the tutorials are using Vue.js by creating templates and importing them into the blade-files. Is there anything "wrong" in just including the Vue javascript file directly into blade-files and using Vue directly like that? In other words just using:
<script src="https://cdn.jsdelivr.net/npm/vue#2.5.17/dist/vue.js"></script>
in the blade-files I want to use Vue.
The reason for this is that I just want Vue.js to replace some of the work that has been done by Jquery in the application. I have also been thinking about using React. But it seems like that goes the same way as Vue (creating templates, which then should be imported into the corresponding blade-files).
I use Laravel 5.6.
Thanks for any guidance!
Great, I will try to explain my approach of doing such kind of replacement work.
Laravel comes with assets directory containing js and css directory. If you explore more the js directory you'd see two files bootstrap.js and app.js.
bootstrap.js file is nothing but few handy stuffs like setting jQuery as global object so that it can be accessed in vue instance easily, setting axios default header to have X-CSRF-TOKEN while using axios in the project.
But the important part is app.js. It initialises the vue instance and binds it with a #app div which mostly the first div after <body> tag.
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
In the above file, you can see there vue instance is created and it is bound to a div whose id is app. Along with that Vue is also registering a component called example which is stored under js/components/ directory as Example.vue.
Now, based on your requirement you can go ahead and follow these steps to create components to replace some of jQuery codes without having any conflicts.
• Make sure to bind the the vue instance to root div so that you can use the component in the blade file this way.
<div id="something">
<example></example>
</div>
• If you Laravel mix, make sure you compile the app.js
mix.js('resources/assets/js/app.js', 'public/js')
I have worked on projects have similar required modifications, I followed the way I just mentioned and worked quite well for me.
Feel free to ask any question you have. Cheers!
Im not entirely sure I fully understand what you are trying to achieve, but you will have to new Vue in every blade file then since you have a classic page reload when you switch from one blade file to the next (if they're not included in each other). I imagine that this is going to give you a lot of trouble sharing data between your various vue instances.
I am using the exact same Ajax call in multiple blade templates.
If Ajax fails, I show an error jpg located in public/images/danger.png.
When I had my JS in the blade file written inline in <script> tags, it was easily accessible as I had blade helpers to access public with:
{{asset('/images/danger.png')}}
Yet now, accessing /public with:
http://"+location.host +"/public/images/danger.png
is impossible.
It would be unDRY to put the exact same AJAX call in 12 blades, no need to elaborate why..
How do you guys counter this issue?
remove /public from your route,you can directly use /images/imgname.jpg
You can just use absolute routes in your javascript files. This will however not work if your Laravel application sits in a sub folder.
"/public/images/danger.png"
just the same as used in html (in blade)
like
$('.abc').attr("src", "{{asset('imgs/male_b.svg')}}");
I have a set of components, some components include other components via #include('my-sub-component')
The issue is that when I want to use vue I have to put the entire component in the vue.js file inside the template tags.
But inside the template I want to use the #include so I can include some sub components. This does not work.
How can I include blade components inside a vue component?
As far as I know, it's impossible. You can't use PHP (Laravel Blade) .blade.php tags inside Vue Component .js, of course Vue can't execute PHP script in this case. The possible use case is you use the Vue Component inside Laravel Blade.
The closest thing you can get to this is to use inline templates. You can't access blade directives it if you are writing your templates in single file components and compiling them with webpack or something because they are not being rendered with PHP.
You could put the style and scripts components in the SFC though and but in order to use blade directives the template would need to be in a .blade.php file
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