Laravel Vue & Vuex by Webpack - laravel-5

Laravel give you app.js for Vue.js out of the box.
So when I try to create component everything is ok.
//app.js file
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app',
});
But how to add Vuex???
I have tried import modules inside app.js and bootstrap.js and every time got error - like Vue not defined or Vuex not defined.
How to do it right? I use all out of box, Webpack for compiling app.js i public folder.

Added
window.Vuex = require('vuex');
to bootstrap.js

Related

Problems with vue in laravel

I am trying to implement
Media manager 3.6.7 to my laravel 5.8 project but i am facing problems with VUE. (This is my first time using it).
In console it gave me two errors: Error in console with BLANK page but when i click on page source i can see that the page is rendered: Page source
I think I am stuck at this:
// app.js
window.Vue = require('vue')
require('../assets/vendor/MediaManager/js/manager')
new Vue({
el: '#app'
})
Where should i put it ? If I put it in media.blade.php i got Require is not a function. If i include require, there is another error
Module name "vue" has not been loaded yet for context: _. Use require([])
If i use require(['vue']) i got like, 20 errors..
What is the problem here? Previous steps are completed succesffully.
The error clearly says that you have not registered the component properly.
In app.js file:
import ComponentA from '/*path of the file*/'
import ComponentB from '/*path of the file*/'
new Vue({
el: '#app',
components: {
'my-notification': ComponentA,
'media-manager': ComponentB
}
})

Multiple instances of VUEjs in laravel

Good morning! How can I work with multiple instances of VUEjs in Laravel?
I want to work with the components in some parts of the project and in other occasions I want to instantiate VUE directly in the view and do the logic there but I have the problem that I can't work with both at the same time.
If I want to work with the components I must leave the "const app new Vue" of the app.js file. But if I leave this file like this it won't work in the views.
how can i do it? Thank you!
app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
import VueSweetalert2 from 'vue-sweetalert2';
require('./bootstrap');
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
Vue.use(VueSweetalert2);
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('eliminar-registro', require('./components/EliminarRegistro.vue').default);
Vue.component('modal-encuestas', require('./components/ModalEncuestas.vue').default);
Vue.component('abrir-modal', require('./components/AbrirModal.vue').default);
Vue.component('ejemplo-prueba', require('./components/EjemploPrueba.vue').default);
/**
* 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.
*/
const app = new Vue({
el: '#app',
});
Notice how your vue instance mounts to an element
const app = new Vue({
el: '#app',
});
This can be found in your app.blade.php or whatever layout you use
there will be a <div id="app"></div>
This is how you mount instances.
So now If you want a second instance
You can mount a second one to another div as long as the two divs are seperate
in app.js
const app = new Vue({
el: '#app',
});
const app = new Vue({
el: '#second-app',
});
Then in your app.blade.php
<div id="app"></div>
<div id="second-app"></div>
This will give you two seperate vue instances on the same page.

All the actions that need to be over the screen don’t work, but the rest of it does Vuetify / Laravel

I have install Vue and Vuetify in my project Laravel 7 but Vuetify is probably not installed properly. Because When I try to click to the button for open modal or when I search with autocomplete nothing happens…
The solution is write this in app.js document.body.setAttribute('data-app', true)
For install Vuetify I have follow this article :
Install vuetify in laravel
When I test with this code for the modal or autocompletion nothing happens :
Autocompletion
Modal
This is my app.js code :
import Vue from 'vue';
import Vuetify from "vuetify";
//this is the solution code
document.body.setAttribute('data-app', true)
//
window.Vue = require('vue');
window.Vue.use(Vuetify);
import ReadMore from 'vue-read-more';
Vue.use(ReadMore);
import { LMap, LTileLayer, LControl,LMarker,LCircleMarker,LTooltip,LFeatureGroup, LPopup, LControlLayers, LControlZoom, LIcon, LWMSTileLayer} from "vue2-leaflet";
import 'leaflet/dist/leaflet.css';
Vue.component('l-map', LMap);
Vue.component('l-icon', LIcon);
Vue.component('l-tile-layer', LTileLayer);
Vue.component('l-wms-tile-layer', LWMSTileLayer);
Vue.component('l-circle-marker', LCircleMarker);
Vue.component('l-marker', LMarker);
Vue.component('l-control', LControl);
Vue.component('l-control-layers', LControlLayers);
Vue.component('l-control-zoom', LControlZoom);
Vue.component('l-tooltip',LTooltip);
Vue.component('l-popup',LPopup);
Vue.component('l-feature-group', LFeatureGroup)
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('presentation-component', require('./components/Presentation.vue').default);
Vue.component('auth-component', require('./components/Auth.vue').default);
Vue.component('equipe-component', require('./components/Researchteam.vue').default);
Vue.component('atlas-component', require('./components/Atlas.vue').default);
const app = new Vue({
vuetify: new Vuetify,
el: '#app',
});
```

How to Register the component correctly without Error? Vue Js

I am get this error due import of folder that contain index file,how can I solve it?
Root folder
.app.js
.store
..index.js
import store from './store/index'
Vue.component('posts', require('./components/Posts.vue'))
Vue.component('createPost', require('./components/CreatePost.vue'))
const app = new Vue({
el: '#app',
store
});
You registered the component incorrectly, as it stated.
Change these
Vue.component('createPost', require('./components/CreatePost.vue'))
To these
Vue.component('create-post', require('./components/CreatePost.vue'))

Registering Third-Party Vue Components in Laravel

I'm new to using Vue.js with Laravel and there is one thing I couldn't figure out.
When I write my own components, I know how to implement and register them into my project by using the app.js file.
My question is, how can I register third party components into Laravel? I'm trying to register Vue Form Wizard into my project, but I can't get it to work.
I've tried multiple ways to register the component:
// app.js file
require('./bootstrap');
window.Vue = require('vue');
Vue.component('form-wizard', require('./components/FormWizard.vue'));
const app = new Vue({
el: '#app'
});
My component file:
<script>
import VueFormWizard from 'vue-form-wizard';
import 'vue-form-wizard/dist/vue-form-wizard.min.css';
Vue.use(VueFormWizard)
</script>
My view called like so:
<form-wizard
#on-complete="onComplete"
color="#FFA500"
error-color="#a94442"
shape="tab"
next-button-text="Continue"
back-button-text="Previous"
finish-button-text="Complete"
></form-wizard>
What do I need to do to make this work?
You don't need to define a FormWizard component. Simply move the code in the script section of your component file to the app.js file:
// app.js file
require('./bootstrap');
window.Vue = require('vue');
import VueFormWizard from 'vue-form-wizard';
import 'vue-form-wizard/dist/vue-form-wizard.min.css';
Vue.use(VueFormWizard)
const app = new Vue({
el: '#app'
});
This will register the VueFormWizard component globally, meaning you can use the form-wizard tag in any template.

Resources