Swiper is initializing without problems, for some reason, pagination (and everything else...) is not working.
I'm using webpack on laravel (5.8), the version of swiper i'm using is 6.4.5. No errors in console
This is my code:
// import Swiper JS
import Swiper, { Pagination } from 'swiper';
// import Swiper styles
import 'swiper/swiper-bundle.css';
// configure Swiper to use modules
Swiper.use([Pagination]);
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
loop: true,
autoplay: true,
grabCursor: true,
// If we need pagination
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
Outcome:
Swiper is created, pagination not working, autoplay not working, nothing is working only the swiper is created
I managed to resolve this issue, I'll post my answer if anyones has the same problem.
The version of swiper i'm currently using contains the vue integration, I'm not using the vue integration because i'm working with the version 2 of vue.js, swiper needs the version 3 of vue.js. So I commended out my vue instance, and everything started working, the issue was a conflict between vue.js and Swiper.
In the documentation you import the same way for vue and ES modules so i'm guessing there is some type of conflict.
So I moved my swiper import after the vue.js declaration:
/**
* 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',
});
require('./scripts/swiper');
And now everything is working
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
}
})
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>
Is it possible to add vuetify to default vuepress theme ?
I just need to add few components to default theme however it would be nice to use the vuetify for handling forms within my components.
I have found a custom vuepress theme which uses a vuetify, however I would prefer to use default vuepress theme.
Another option is to eject the default theme and add the vuetify to it. However I would prefer not to eject the default theme just add vuetify to it.
The previous answer from oscarteg got me most of the way there. Here's what I had to do for the .vuepress/enhanceApp.js file (and yes, if you do not have one go ahead and create it).
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
Vue.use(Vuetify);
options.vuetify = new Vuetify({})
};
Note that in the new Vuetify({}) passed to options.vuetify you can set your theming.
See https://github.com/vuejs/vuepress/issues/681#issuecomment-515704018
The easiest way would be to use the vuetify CDN. In your config.js add something like
module.exports = {
head: [
['link', { rel: 'stylesheet', href: `https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css` }],
['script', { src: `https://cdn.jsdelivr.net/npm/vue/dist/vue.js` }],
['script', { src: `https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js` }],
]
}
Something like that. See https://vuepress.vuejs.org/config/#head
Another way would be to install the vuetify package and add Vuetify to enhanceApp. It would look like this in your .vuepress/enhanceApp.js
import Vuetify from 'vuetify'
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
Vue.use(Vuetify)
}
See https://vuepress.vuejs.org/guide/basic-config.html#theme-configuration
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.