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.
Related
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
}
})
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.
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',
});
```
So, hi. I've been struggling for 4 hours to add at least two different Vue components to my app.js file which is located in js folder along with these vue components in my Laravel project.
I couldn't find any real solution on the internet since it didn't fix my problem.
I have tried something like
Vue.component('signature-element', require('./components/Signature.vue').default);
under the other component which works perfectly, but the problem is I can't make the app work with 2 or more components.
I've tried installing vue-router via npm and configuring a router but it didn't work too, somehow whole JS stopped without any errors in the command log in browser or in Mix.
I've also tried calling the import function instead of the first one I've mentioned, for example:
const componentVar = import ...;
inside vue:
new Vue({
components: { first, componentVar },
mounted() {}
});
But this also did not work unfortunately.
In the second example you're trying to registrate locally your components.
If you want to do this you can do it like this:
import first from './components/first'
import componentVar from './components/componentVar'
new Vue({
el: '#app',
components: {
'first': first,
'componentVar': componentVar
}
})
Instead if you want to use the first example this means you want to register your components globally. That means they can be used in the template of any root Vue instance (new Vue) created after registration
Example:
Vue.component('signature-element', { /* ... */ })
new Vue({ el: '#app' })
Then in your view
<div id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</div>
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