Which is the best way to use datatable with vue.js and laravel ?
When I am using vuejs-datatable, I got the error
Window.Vue is undefined
My project has a router file. The same datable works fine in a separate project without router.
There are a lot of datatable package avialable for vuejs.
Following links may help.
https://github.com/pstephan1187/vue-datatable
https://vuejsexamples.com/data-table-package-with-server-side-processing-and-vuejs-components/
Related
I'm currently working on application's translation with Laravel Localization (laravel 5.6).
I succeed my text translation on blade templates but I have some view using vuejs.
Into them I can't use directly laravel localization.
I understand that I have to send my translations files (which are in PHP) into the vue in JS.
I found some packages like :
https://github.com/rmariuzzo/Laravel-JS-Localization ; but it doesn't support laravel 5.6 (damned)...
https://github.com/martinlindhe/laravel-vue-i18n-generator ; Laravel 5 package is no longer maintain...
This application use Laravel 5.6 and vue 2.
I can't completely reorganize or upgrade Laravel or vue version.
After many research I'm still not able to do it...
Do you know how can I made translation into my vue component?
Thanks a a lot!
I decided to start learning Vue with a new Laravel project I'm working on.
I added the example component that comes with Laravel in my home.blade view.
The problem is PhpStorm is telling me:
Unknown html tag example-component
I have the Vue.js plugin enabled in PhpStorm and the component itself renders fine when I visit the home page.
How do I get PhpStorm to recognize my Laravel Vue components?
I am trying to make my portfolio using Laravel. I am very new to Laravel. I thought by making a mini project in it will make me familiar with Laravel. Recently, I figured out that Laravel has a dependency on Vue.js
I tried to include jQuery libraries as I am not at all familiar with Vue. But that didn't go so well. Then I started searching for Vue.js but I couldn't find much.
With a lot of effort I made the following Vue component:
var trialEle = new Vue({
el: '#trialEle',
data: {
working: 'yes'
}
});
And then I tried to access the value of working by the following markup:
<div id="trialEle">
<h1>Is this working: {{working}}</h1>
</div>
But I don't know what I am missing because I am constantly having this error:
UPDATE:
As suggested by #Chamara in the answer below, I have changed {{working}} to #{{working}}, now there is no error screen.
But still I cannot access the value of working from my Vue component.
It is displayed on the page as follows:
Is this working: {{working}}
Any help will be truly appreciated.
Thanks in advance.
{{}} is a built in syntax in blade if you need to use vue {{}} inside your blade file you need to put # in front of the {{}}. So like this#{{working}}. # in blade ignore it as a syntax.
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.
how to combine Laravel and React? I mean, Laravel uses blade for its view, how to change it to React instead of blade ? There have been so many Laravel and Angular tutorial, but I can't find any for React and Laravel?
Any references of Laravel and ReactJS tutorial ?
If you are using Laravel to build a REST web service (API), then you might not need Blade. You just return JSON data. Your React App can then make calls to the Laravel API for data and process it right in the browser. You don't need Blade for this.
You would use Laravel to provide the base view (index.blade.php) which would include the React JS app, but then after that all the views and routing would be handled by React.
Here's a link to get you started.
https://medium.com/#rajikaimal/laravel-loves-reactjs-8c02f8b9d1d5
I have created laravel reactjs starter project .. refer the github project below.
I am not using the mix api of laravel since I want reactjs app to be portable to any other server or standalone app
refer the link below
https://medium.com/#padmanabhavn/bringing-laravel-and-reactjs-together-8c970cb0f65d
This question seems old but I will still share my experience for others.
This tutorial and project sample may be found useful.
https://blog.pusher.com/react-laravel-application/
https://github.com/maarcz/taskman
As well as that, the solution below has worked for me in webpack.mix.js without using app.js to be mixed up with other requirements (laravel 8):
mix.js('resources/assets/js/react', 'public/js/reactJs').react()
in blade:
<script src="{{ asset('js/reactJs/react.js') }}"></script>