1

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.

lilyco
  • 11
  • 5
  • Hi, did you gave a try to [that one](https://stackoverflow.com/a/67751550/8816585)? Also, try to maybe make a [`.client plugin`](https://nuxt.com/docs/guide/directory-structure/plugins#plugins-directory). – kissu Nov 21 '22 at 02:34

0 Answers0