I'm trying to implement pull to refresh using the vue-pull-to plugin in Nuxt3, but it returns window is not defined error. It's already in my nuxt.config inside build transpile from node_modules. I don't know how to solve this issue.
nuxt.config.ts
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
modules: ['@nuxtjs/tailwindcss', '@vueuse/nuxt',],
ssr: true,
tailwindcss: {
cssPath: '~/assets/css/tailwind.css',
configPath: 'tailwind.config.js',
exposeConfig: false,
config: {},
injectPosition: 0,
viewer: true,
devServerHandlers: [],
},
typescript: {
shim: false
},
// auth: {
// strategies: {
// laravelSanctum: {
// provider: 'laravel/sanctum',
// url: 'http://localhost:8085',
// },
// },
// },
build: {
transpile: ['vue-pull-to']
}
})
sample template:
<template>
<div>
<pull-to :top-load-method="refresh">
<ul v-for="item in dataList">
<li>{{ item }}</li>
</ul>
</pull-to>
</div>
</template>
<script>
import PullTo from 'vue-pull-to'
import { fetchDataList } from 'api'
export default {
name: 'example',
components: {
PullTo
},
data() {
return {
dataList: []
}
},
methods: {
refresh(loaded) {
fetchDataList()
.then((res) => {
this.dataList = res.data.dataList
loaded('done')
})
}
}
}
</script>
I also tried importing it as a plugin, but it still didn't work.