Is there anyone out there who has attempted to integrate a Vue solution into Nuxt as a plugin or module?
I've been facing numerous challenges while trying to accomplish this correctly!
My current struggle involves importing the Splide Vue slider from NPM into Nuxt. Even after installing it via NPM, I'm encountering difficulties in importing it into a splide.js file within plugins and then referencing it in nuxt.config.js as a plugin. Various errors keep popping up.
Below are the relevant files:
nuxt.config.js
modules: [
// https://go.nuxtjs.dev/bootstrap
'@nuxtjs/style-resources',
'@nuxtjs/bulma',
'@splidejs/splide'
],
splide.vue (in nuxt components)
<template>
<splide :options="options">
<splide-slide>
<h1>boo</h1>
</splide-slide>
<splide-slide>
<h1>boo2</h1>
</splide-slide>
</splide>
</template>
<script>
export default {
data() {
return {
options: {
rewind : true,
width : 800,
perPage: 1,
gap : '1rem',
},
};
},
}
</script>
splide.js (in plugins)
import Vue from 'vue';
import VueSplide from 'vue-splide';
Vue.use( VueSplide );
new Vue( {
el : '#app',
render: h => h( App ),
} );
Here is the link to the Splide site for instructions: splide instructions
The most recent error I encountered is "window is not defined"