Nuxt3: installing vue3-spinner (error: require is not defined in ES module scope)

Question

In my nuxt3 app, I am trying to install the vue3-spinner package. Here is my implementation:

// file: @/plugins/vue3-spinner.js
import vue3Spinner from 'vue3-spinner'
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(vue3Spinner)
})

// file: @/components/MyComponent.vue
<script setup>
import { DotLoader } from "vue3-spinner"
console.log(DotLoader)
</script>

Problem: I get this 500 error:

require is not defined in ES module scope, you can use import instead This file is being treated as an ES module because it has a '.js' file extension and '/Users/me/projects/my-nuxt-app/node_modules/vue3-spinner/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

What am I not doing right?

Answer 1

You need to ensure that this plugin only runs on the client side. Otherwise, you'll get an error.

<script setup>
import { DotLoader } from "vue3-spinner"
</script>
<template>
  <div>
    <ClientOnly>
      <DotLoader />
    </ClientOnly>
  </div>
</template>
<style scoped lang="css"></style>

~/plugins/spinner.client.js

import vue3Spinner from 'vue3-spinner'

export default defineNuxtPlugin( ( nuxtApp ) => {
    nuxtApp.vueApp.use( vue3Spinner )
} )

I created a example demo here. https://stackblitz.com/edit/nuxt-starter-qfccjy?file=plugins/spinner.client.js

Hope that helps you.