Splidejs in Nuxt Vue

Question

是否有人尝试将Nuxt中的Vue解决方案用作插件或模块？

要想以正确的方式做到这一点，我面临着很多挑战！

我正试图将Splide Vue滑块从NPM导入到Nuxt中，在您通过NPM安装它之后，如何在插件中将其导入到Splide.js文件中，然后尝试将其作为插件在nuxtconfig.js中进行处理，这似乎是一个挑战。我犯了各种各样的错误。

这是我的文件：

nuxt.config.js

modules: [
// https://go.nuxtjs.dev/bootstrap
'@nuxtjs/style-resources',
'@nuxtjs/bulma', 
'@splidejs/splide'

],

拼接.vue(在nuxt组件中(

<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(插件中(

import Vue from 'vue';
import VueSplide from 'vue-splide';
Vue.use( VueSplide );
new Vue( {
el    : '#app',
render: h => h( App ),
} );

这是splide网站上的链接：splide说明

我最近的错误是"；窗口未定义"；

Answer 1

将splide.js重命名为splide.client.js，这样它就被定义为客户端插件。

Nuxt文档。

如果假设插件仅在客户端或服务器端运行，则.client.js或.server.js可以作为插件文件的扩展名应用。该文件将仅自动包含在相应的(客户端或服务器(端。

Answer 2

好的，感谢Nick，

我还做了一些其他的更改来让它工作，这是我的工作代码：

滑块.vue(组件下方(

<template>
<div>
<splide :options="options">
<splide-slide>
<h1>boo1</h1>
<!-- <img src="../assets/img/mw-logo.png" alt="">         -->
</splide-slide>
<splide-slide>
<h1>boo2</h1> 
<!-- <img src="../assets/img/mw-logo.png" alt="">         -->
</splide-slide>
<splide-slide>
<h1>boo2</h1> 
<!-- <img src="../assets/img/mw-logo.png" alt="">         -->
</splide-slide>
</splide>
</div>
</template>
<script>
export default {
data() {
return {
options: {
rewind : true,
width  : 800,
perPage: 2,
gap    : '1rem',

},
};
},
}
</script>

nuxt.config.js:

plugins: [
{src: '~/plugins/splide.js', mode: 'client'}
],

splide.client.js

import Vue from 'vue';
import VueSplide from '@splidejs/vue-splide';
import '@splidejs/splide/dist/css/themes/splide-default.min.css';

Vue.use( VueSplide );
new Vue( {
el    : '#app',
render: h => h( App ),
} );

index.vue(页面下方(

<slider />