I have just updated my environment, from using vueJS by pulling in the script from the official CDN, to an installed version, with npm under a laravel environment.
I am now, getting two notes about running in developement instead of one.
Does this mean that I'm instantiating Vue twice?
I do have the import Vue from 'vue' in two places. Once in my main .js file and the other one in some bus.js which looks like
import Vue from 'vue'
export default new Vue()
Related
I'm creating a Vue component library for integration with my Laravel project that uses Inertia.js. How can I use the inertia methods and components inside my library?
I have installed #inertiajs/vue3 on both laravel and the vue component library, but it doesn't work. I import the components and methods in the vue component library but when I go back to laravel, they don't seem to be working.
How we can achieve react scripts like auto chunking of files and dynamic import in Laravel Mix?
I'm currently using Laravel 5.6. I have integrated bootstrap and would like to use the package React Bootstrap. For my component building.
Currently the components do not render properly. I believe it's because it's conflicting with the Laravel bootstrap/
In app.js I've disabled:
// require('./bootstrap');
The component still does not appear correctly.
I also import this in my component:
import 'bootstrap/dist/css/bootstrap.min.css';
This causes my layout to change drastically.
Is there any specific way I can up my laravel project and be able to take advantage of the React Bootstrap components?
you should run npm install && npm run dev commands and then it will work properly
this is the link from documentation https://laravel.com/docs/7.x/frontend
you can try adding bootstrap cdn on your blade file
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.
In many tutorials about VueJS I see this example:
import VueResource from 'vue-resource';
Vue.use(VueResource);
But in newly created Laravel 5.3 project I found only this code (bootstrap.js file):
window.Vue = require('vue');
require('vue-resource')
And found no "use" directive for vue-resource, but AJAX queries like this.$http.get() still work well. So, how Vue instance can use vue-resource?
vue-router doesn't require use if Vue is declared globally. From the official docs:
Some plugins provided by Vue.js official plugins such as vue-router automatically calls Vue.use() if Vue is available as a global variable. However in a module environment such as CommonJS, you always need to call Vue.use() explicitly.
In laravel, you will see that Vue is declared globally by attaching it to window like so:
window.Vue = require('vue');
So the use is not required.
source: https://v2.vuejs.org/v2/guide/plugins.html#Using-a-Plugin